Creating a Derived Accordion Control with FlexGrid
The FlexGrid for WinForms control is known for its flexibility. The control can be used in more ways than one and you can customize it easily enough to avoid having to write a custom solution from scratch in many cases. In previous posts we demonstrated how you can use the FlexGrid as a Calendar control, a TreeListView and as a ListBox. Some developers have gone as far as using it to make Visio style diagrams just using FlexGrid. In this post I will show how to derive a custom control from FlexGrid to make an Accordion control, just like the one used in the Studio for WinForms Control Explorer. The FlexAccordion component derives from FlexGrid and is designed to display a hierarchical list of items with 1 level deep. It was modeled specifically to fit the needs of the Control Explorer, but it can be modified further for more scenarios. FlexGrid makes it easy to create such a control because it gives us a backbone to start with that has provides hit testing, scrolling, item selection, tags for user data, and custom cell styles. 
Extending FlexGrid
To create your own custom component which derives from C1FlexGrid, first add a new Component Class to your solution. 
Add a project reference to the C1.Win.C1FlexGrid assembly. In your derived class declaration, specify the base class name as C1FlexGrid using the syntax as seen below.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using C1.Win.C1FlexGrid;
namespace MyNameSpace
{
public partial class FlexAccordion : C1FlexGrid
{
public FlexAccordion()
{
InitializeComponent();
}
}
}
Define the Object Model
Next, define the object model or the properties. The FlexAccordion will add several unique properties in addition to everything available to us from C1FlexGrid.
ExpandedIndex (int) - Gets or sets the currently expanded header row index SelectedItemIndex (int) - Gets or sets the index of the currently selected item AnimationDelay (int) - Gets or sets the animation delay in milliseconds CanExpand (Boolean) - Gets or sets whether the control can expand/collapse HeaderStyle (C1.Win.C1FlexGrid.CellStyle) - Gets or sets the CellStyle object associated with item headers ItemStyle (C1.Win.C1FlexGrid.CellStyle) - Gets or sets the CellStyle object associated with items
Most of these properties will simply hold an integer or Boolean value that will later be referenced during implementation. The two styles are custom CellStyles added to the base C1FlexGrid component. Here we are taking advantage of this CellStyle feature to make styling the headers and items more straightforward. Below is the code used to declare the object model as described. Note that all of this code is to be placed within the FlexAccordion class above or below the constructor.
# region private members
private int _expandedIndex;
private int _selectedItemIndex;
private int _animationDelay;
private bool _canExpand;
private CellStyle _headerStyle;
private CellStyle _itemStyle;
# endregion
# region public members
/// <summary>
/// Gets or sets the currently expanded row index
/// </summary>
public int ExpandedIndex
{
get { return _expandedIndex; }
set { _expandedIndex = value; }
}
/// <summary>
/// Gets or sets the currently selected item
/// </summary>
public int SelectedItemIndex
{
get { return _selectedItemIndex; }
set
{
if (_selectedItemIndex != -1)
{
this.SetCellStyle(\_selectedItemIndex, 0, \_itemStyle);
}
_selectedItemIndex = value;
}
}
/// <summary>
/// Gets or sets the animation delay in milliseconds.
/// </summary>
public int AnimationDelay
{
get { return _animationDelay; }
set { _animationDelay = value; }
}
/// <summary>
/// Gets or sets whether the control can expand/collapse
/// </summary>
public bool CanExpand
{
get { return _canExpand; }
set { _canExpand = value; }
}
/// <summary>
/// Gets or sets the CellStyle object associated with item headers.
/// </summary>
public CellStyle HeaderStyle
{
get { return _headerStyle; }
set { _headerStyle = value; }
}
/// <summary>
/// Gets or sets the CellStyle object associated with items.
/// </summary>
public CellStyle ItemStyle
{
get { return _itemStyle; }
set { _itemStyle = value; }
}
# endregion
Next initialize these properties in the constructor below the InitializeComponent call. Since we don't initialize AnimationDelay, this will default to 0. Also use this place to set any other base C1FlexGrid properties to a new default value. In this case, we change ScrollBars and SelectionMode to better fit with the accordion control.
public FlexAccordion()
{
InitializeComponent();
_headerStyle = this.Styles.Add("Header");
_itemStyle = this.Styles.Add("Item");
_expandedIndex = -1;
_selectedItemIndex = -1;
_canExpand = true;
this.ScrollBars = ScrollBars.None;
this.SelectionMode = SelectionModeEnum.Row;
}
Expand and Collapse Implementation
To add some interaction to our custom control we can override any of the C1FlexGrid events. To detect the user clicking on a row to then expand or collapse its children, we can override the MouseClick event.
protected override void OnMouseClick(MouseEventArgs e)
{
base.OnMouseClick(e);
if (this.MouseRow != -1)
{
Row hitRow = this.Rows[this.MouseRow];
if (hitRow.Index == _expandedIndex)
{
//Do nothing. Just clicked an already expanded header.
}
else if (hitRow.IsNode && this._canExpand)
{
//Expand items
Expand(hitRow.Index);
_expandedIndex = hitRow.Index;
}
else if (!hitRow.IsNode)
{
this.SelectedItemIndex = hitRow.Index;
}
}
this._canExpand = true;
}
In this implementation of an accordion, the user can click any Header to expand its items. But to collapse the items they must go click a different Header. So in the second IF statement we are detecting the user clicking on an already-expanded header so we choose to do nothing. If they hit an item row which is not a header, we set that as the Selected Item. If they hit a collapsed header we begin the collapsing and expanding in the Expand method.
//This method collapses the currently expanded items (if any) and expands at the passed row index.
protected void Expand(int expandRow)
{
int collapseRow = _expandedIndex + 1;
expandRow += 1;
bool done = false;
bool collapsing = false;
bool expanding = false;
while (!done)
{
//Update the current collapsing row index
if (collapseRow < this.Rows.Count)
collapsing = !this.Rows[collapseRow].IsNode;
else collapsing = false;
//Update the current expanding row index
if (expandRow < this.Rows.Count)
expanding = !this.Rows[expandRow].IsNode;
else expanding = false;
if (expanding || collapsing)
{
//Collapse and expand 1 row each at a time
if (collapsing)
this.Rows[collapseRow].Visible = !this.Rows[collapseRow].Visible;
if (expanding)
this.Rows[expandRow].Visible = !this.Rows[expandRow].Visible;
//Redraw FlexGrid to reflect new visible rows and sleep for animation effect
this.Refresh();
System.Threading.Thread.Sleep(_animationDelay);
}
else
{
//No more rows to expand or collapse
done = true;
}
//if we could expand/collapse continue to next row
if (collapsing) collapseRow += 1;
if (expanding) expandRow += 1;
}
updateScrollButtons();
}
In the Expand method we expand or collapse a row by setting its Visible property. This is common practice for hiding rows and columns in C1FlexGrid. We use the row's IsNode property (exposed through the base C1FlexGrid) to determine which rows are headers and which rows are items (IsNode = True == Header). A key line of code to point out is #30, this.Refresh(). This is calling the base C1FlexGrid's Refresh method which forces the control to redraw even though we are not completely finished running this method. This gives us our accordion's animation effect along with the thread sleep. Without it, the expand/collapse would appear instant (hey, that might be what you want). The trick used here to creating a smooth expand and collapse experience is to collapse and expand rows on the same thread back and forth, one row at a time. I tried using new threads for each action because that seemed to be the "right way" to do busy work, but found that the animation was very jerky to the eye.
Mouse Over Effects
As a nice touch, we can add some "built-in" mouse over effects. C1FlexGrid provides a built-in Highlight CellStyle which we can use. We can override the MouseEnterCell and MouseLeaveCell events to apply and remove this style based upon where the user's cursor is.
//Handle mouseover styles
protected override void OnMouseEnterCell(RowColEventArgs e)
{
base.OnMouseEnterCell(e);
if (!this.Rows[e.Row].IsNode)
{
this.SetCellStyle(e.Row, 0, this.Styles["Highlight"]);
}
}
protected override void OnMouseLeaveCell(RowColEventArgs e)
{
base.OnMouseLeaveCell(e);
if (!this.Rows[e.Row].IsNode && e.Row != _selectedItemIndex)
{
this.SetCellStyle(e.Row, 0, _itemStyle);
}
}
You can customize the appearance of the Highlight CellStyle for every instance of FlexAccordion by setting it in the components constructor. Or you can leave it to set for each instance of FlexAccordion on each form it may display.
Scroll Buttons
By default, C1FlexGrid will give you a standard vertical scrollbar for when items overflow the space provided. We can turn off the scrollbar and add our own custom scroll buttons without much code. To turn off scrollbars for every instance of FlexAccordion you could set this in the constructor:
this.ScrollBars = ScrollBars.None;
Or you can leave this to set on each form's instance of the control. These scroll buttons are optional and created at design-time. To add these buttons, open the FlexAccordion.cs file in Designer view and drag two Buttons from the Toolbox onto the designer surface. This is what you will see before you add the buttons. Name them btnBottomScroll and btnTopScroll. Add Click events to each button. In code we can implement a custom scrolling action by just setting the base control's TopRow property. It's little things like this which make C1FlexGrid so flexible!!!
private void btnTopScroll_Click(object sender, EventArgs e)
{
//Scroll up
scroll(-1);
}
private void btnBottomScroll_Click(object sender, EventArgs e)
{
//Scroll down
scroll(2);
}
//This function does a custom scroll by only counting visible rows
private void scroll(int dir)
{
int i = this.TopRow + dir;
while (!this.Rows[i].Visible)
{
i += dir;
}
this.TopRow = i;
}
The updateScrollButtons method is used internally to redraw the buttons after the control has been expanded, scrolled or resized. It's also used to position the buttons where we want them. Then we override a few base C1FlexGrid events to make calls to our updateScrollButtons method to ensure that these buttons are always updated as necessary.
//Scroll functions
private void updateScrollButtons()
{
if (this.BottomRow < LastVisibleRow())
{
btnBottomScroll.Visible = true;
btnBottomScroll.Location = new Point(this.Width - btnBottomScroll.Width, this.Height - btnBottomScroll.Height);
}
else
{
btnBottomScroll.Visible = false;
}
if (this.TopRow > 0)
{
btnTopScroll.Visible = true;
btnTopScroll.Location = new Point(this.Width - btnTopScroll.Width, 0);
}
else
{
btnTopScroll.Visible = false;
}
}
//This function determines the last visible row of the grid, which may be different than the last row.
private int LastVisibleRow()
{
int i = this.Rows.Count - 1;
while (!this.Rows[i].Visible)
{
i -= 1;
}
return i;
}
protected override void OnSizeChanged(EventArgs e)
{
base.OnSizeChanged(e);
if(btnBottomScroll != null && this.Rows.Count > 0)
updateScrollButtons();
}
protected override void OnAfterScroll(RangeEventArgs e)
{
base.OnAfterScroll(e);
updateScrollButtons();
}
The LastVisibleRow method is used to grab the last visible row as the name implies but not to be confused with the BottomRow which is the bottom-most row which can be seen by the user. A visible row in this case is one with its Visible property set to true. We need to know which is the last Visible row so we know if we need to show or hide the scroll down button.
Working with FlexAccordion
Now you can build the FlexAccordion control and use it on a form within your project. You can find your custom components in the Visual Studio toolbox after you've successfully built the project. 
Drag one onto the form. You can customize the Header and Item styles by setting them in code.
//Initialize Accordion Styles
CellStyle csHeader = flexAccordion1.HeaderStyle;
csHeader.ForeColor = Color.White;
csHeader.TextEffect = TextEffectEnum.Raised;
csHeader.BackColor = Color.Green;
Set the AnimationDelay property to a higher value to have a slower animation (a good value to try is 20 milliseconds). To add items you must bind the control or add items through code. Remember that we built the accordion with the understanding that all header rows are to be marked by the IsNode property (IsNode = True == Header). Here is some sample code adding an item and setting it to be a header.
// add 1 header row
flexAccordion1.AddItem("Header");
flexAccordion1.Rows[0].IsNode = true;
// add 1 item row
flexAccordion1.AddItem("Item");
// add 1 header row
flexAccordion1.AddItem("Header");
flexAccordion1.Rows[2].IsNode = true;
// add 2 item rows
flexAccordion1.AddItem("Item");
flexAccordion1.AddItem("Item");
The FlexAccordion Class
Here is the full implementation of the FlexAccordion control.
public partial class FlexAccordion : C1FlexGrid
{
# region private members
private int _expandedIndex;
private int _selectedItemIndex;
private int _animationDelay;
private bool _canExpand;
private CellStyle _headerStyle;
private CellStyle _itemStyle;
# endregion
# region constructor
public FlexAccordion()
{
InitializeComponent();
_headerStyle = this.Styles.Add("Header");
_itemStyle = this.Styles.Add("Item");
_expandedIndex = -1;
_selectedItemIndex = -1;
_canExpand = true;
this.ScrollBars = ScrollBars.None;
this.SelectionMode = SelectionModeEnum.Row;
}
# endregion
# region public members
/// <summary>
/// Gets or sets the currently expanded row index
/// </summary>
public int ExpandedIndex
{
get { return _expandedIndex; }
set { _expandedIndex = value; }
}
/// <summary>
/// Gets or sets the currently selected item
/// </summary>
public int SelectedItemIndex
{
get { return _selectedItemIndex; }
set
{
if (_selectedItemIndex != -1)
{
this.SetCellStyle(\_selectedItemIndex, 0, \_itemStyle);
}
_selectedItemIndex = value;
}
}
/// <summary>
/// Gets or sets the animation delay in milliseconds.
/// </summary>
public int AnimationDelay
{
get { return _animationDelay; }
set { _animationDelay = value; }
}
/// <summary>
/// Gets or sets whether the control can expand/collapse
/// </summary>
public bool CanExpand
{
get { return _canExpand; }
set { _canExpand = value; }
}
/// <summary>
/// Gets or sets the CellStyle object associated with item headers.
/// </summary>
public CellStyle HeaderStyle
{
get { return _headerStyle; }
set { _headerStyle = value; }
}
/// <summary>
/// Gets or sets the CellStyle object associated with items.
/// </summary>
public CellStyle ItemStyle
{
get { return _itemStyle; }
set { _itemStyle = value; }
}
# endregion
# region implementation
//This method triggers the expand or collapse action when the control is clicked
protected override void OnMouseClick(MouseEventArgs e)
{
base.OnMouseClick(e);
if (this.MouseRow != -1)
{
Row hitRow = this.Rows[this.MouseRow];
if (hitRow.Index == _expandedIndex)
{
//Do nothing
}
else if (hitRow.IsNode && this._canExpand)
{
//expand/collapse items
Expand(hitRow.Index);
_expandedIndex = hitRow.Index;
}
else if (!hitRow.IsNode)
{
this.SelectedItemIndex = hitRow.Index;
}
}
this._canExpand = true;
}
//This method collapses the currently expanded items (if any) and expands at the passed row index.
protected void Expand(int expandRow)
{
int collapseRow = _expandedIndex + 1;
expandRow += 1;
bool done = false;
bool collapsing = false;
bool expanding = false;
while (!done)
{
//Update the current collapsing row index
if (collapseRow < this.Rows.Count)
collapsing = !this.Rows[collapseRow].IsNode;
else collapsing = false;
//Update the current expanding row index
if (expandRow < this.Rows.Count)
expanding = !this.Rows[expandRow].IsNode;
else expanding = false;
if (expanding || collapsing)
{
//Collapse and expand 1 row each at a time
if (collapsing)
this.Rows[collapseRow].Visible = !this.Rows[collapseRow].Visible;
if (expanding)
this.Rows[expandRow].Visible = !this.Rows[expandRow].Visible;
//Redraw FlexGrid to reflect new visible rows and sleep for animation effect
this.Refresh();
System.Threading.Thread.Sleep(_animationDelay);
}
else
{
//No more rows to expand or collapse
done = true;
}
//if we could expand/collapse continue to next row
if (collapsing) collapseRow += 1;
if (expanding) expandRow += 1;
}
updateScrollButtons();
}
//Handle mouseover styles
protected override void OnMouseEnterCell(RowColEventArgs e)
{
base.OnMouseEnterCell(e);
if (!this.Rows[e.Row].IsNode)
{
this.SetCellStyle(e.Row, 0, this.Styles["Highlight"]);
}
}
protected override void OnMouseLeaveCell(RowColEventArgs e)
{
base.OnMouseLeaveCell(e);
if (!this.Rows[e.Row].IsNode && e.Row != _selectedItemIndex)
{
this.SetCellStyle(e.Row, 0, _itemStyle);
}
}
//Scroll functions
private void updateScrollButtons()
{
if (this.BottomRow < LastVisibleRow())
{
btnBottomScroll.Visible = true;
btnBottomScroll.Location = new Point(this.Width - btnBottomScroll.Width, this.Height - btnBottomScroll.Height);
}
else
{
btnBottomScroll.Visible = false;
}
if (this.TopRow > 0)
{
btnTopScroll.Visible = true;
btnTopScroll.Location = new Point(this.Width - btnTopScroll.Width, 0);
}
else
{
btnTopScroll.Visible = false;
}
}
//This function determines the last visible row of the grid, which may be different than the last row.
private int LastVisibleRow()
{
int i = this.Rows.Count - 1;
while (!this.Rows[i].Visible)
{
i -= 1;
}
return i;
}
//This function does a custom scroll by only counting visible rows
private void scroll(int dir)
{
int i = this.TopRow + dir;
while (!this.Rows[i].Visible)
{
i += dir;
}
this.TopRow = i;
}
protected override void OnSizeChanged(EventArgs e)
{
base.OnSizeChanged(e);
if(btnBottomScroll != null && this.Rows.Count > 0)
updateScrollButtons();
}
protected override void OnAfterScroll(RangeEventArgs e)
{
base.OnAfterScroll(e);
updateScrollButtons();
}
private void btnTopScroll_Click(object sender, EventArgs e)
{
//Scroll up
scroll(-1);
}
private void btnBottomScroll_Click(object sender, EventArgs e)
{
//Scroll down
scroll(2);
}
# endregion
}
Conclusion
This post has demonstrated one way to extend the C1FlexGrid to provide a custom control to meet the exact needs of one application. Hopefully the same code may be useful to someone else out there as it shows some very basic yet useful ways to extend a ComponentOne control. You can download the full sample below. Download Sample
Greg Lutz