How to customize the WinForms GridGroupingControl to get the outlook style?

5 mins read

To customize the GridGroupingControl to the Outlook style, the following properties and events have to be handled in the grid.

Step 1: Outlook style theme.

Setting the TableOptions.GridVisualStyles property enables the Outlook-like look and feel. This helps you to customize Office 2007 and other themes. These themes are available in the Syncfusion Essential Studio version 5.1.

In the given code example, customization for Office 2007 themes alone is given.

//Sets the VisualStyles like Office2007, Office2010, Metro, etc.
this.gridGroupingControl1.GridVisualStyles = Syncfusion.Windows.Forms.GridVisualStyles.Office2007Blue;

'Sets the VisualStyles like Office2007, Office2010, Metro, etc.
Me.gridGroupingControl1.GridVisualStyles = Syncfusion.Windows.Forms.GridVisualStyles.Office2007Blue

Step 2: GroupCaptionPlusMinusCell Appearance.

The GroupCaptionPlusMinusCell appearance can be customized with an image object. This can be achieved by drawing the customized image over the cell. The GroupExpanded and GroupCollapsed events are handled to draw appropriate images to the cell. Refer to the following KB article for more details.

https://www.syncfusion.com/support/kb/594

Step 3: Resizing Columns.

In the Outlook, the columns get proportionally resized to fill the client area. A similar behavior can be achieved by handling the QueryColWidth event. In the QueryColWidth event handler, new proportional column width has to be calculated and assigned to the e.Size property.

void TableModel_QueryColWidth(object sender, GridRowColSizeEventArgs e)
{
    GridTableModel tableModel = sender as GridTableModel;
    // Proportional sizing.
    float factor = 0f;
    int availableWidth = myGrid.Width - (tableModel.GetColumnIndentCount() * myGrid.TableOptions.IndentWidth);
    if (myGrid.TableControl.VScroll)
        factor = (float)(availableWidth - SystemInformation.VerticalScrollBarWidth) / GetTotalColumnWidth();
    else
        factor = (float)availableWidth / GetTotalColumnWidth();
    if (e.Index >= tableModel.GetColumnIndentCount() && e.Index != -1)
    {
        e.Size = Convert.ToInt32(Math.Round((e.Size + 2) * factor));
    }
    e.Handled = true;
}

Private Sub TableModel_QueryColWidth(ByVal sender As Object, ByVal e As GridRowColSizeEventArgs)
    Dim tableModel As GridTableModel = TryCast(sender, GridTableModel)
    'Proportional sizing.
    Dim factor As Single = 0f
    Dim availableWidth As Integer = myGrid.Width - (tableModel.GetColumnIndentCount() * myGrid.TableOptions.IndentWidth)
    If myGrid.TableControl.VScroll Then
        factor = CSng(availableWidth - SystemInformation.VerticalScrollBarWidth) / GetTotalColumnWidth()
    Else
        factor = CSng(availableWidth) / GetTotalColumnWidth()
    End If
    If e.Index >= tableModel.GetColumnIndentCount() AndAlso e.Index <> -1 Then
        e.Size = Convert.ToInt32(Math.Round((e.Size + 2) * factor))
    End If
    e.Handled = True
End Sub

Alternate solution for the column sizing

//Allows the Proportional Column resizing.
myGrid.AllowProportionalColumnSizing = true;

'Allows the Proportional Column resizing.
myGrid.AllowProportionalColumnSizing = True

Step 4: Additional property setting.

1. ListBoxSelectionMode: To select the whole row like the Outlook style, the TableOptions.ListBoxSelectionMode property has to be set to SelectionMode.One and the ListBoxSelectionCurrentCellOptions property set to HideCurrentCell to have the same color.

//Selections
//Fills the back color of the current cell with the alphablendcolor.
myGrid.TableOptions.ListBoxSelectionCurrentCellOptions = GridListBoxSelectionCurrentCellOptions.HideCurrentCell;
//Hides the current cell border.
myGrid.TableModel.Options.ShowCurrentCellBorderBehavior = GridShowCurrentCellBorder.HideAlways;
//Sets the selection mode to select the whole row.
myGrid.TableOptions.ListBoxSelectionMode = SelectionMode.One;
//Sets the alphablendcolor.
myGrid.TableModel.Options.AlphaBlendSelectionColor = SystemColors.InactiveCaptionText;

'Selections
'Fills the back color of the current cell with the alphablendcolor.
myGrid.TableOptions.ListBoxSelectionCurrentCellOptions = GridListBoxSelectionCurrentCellOptions.HideCurrentCell
'Hides the current cell border.
myGrid.TableModel.Options.ShowCurrentCellBorderBehavior = GridShowCurrentCellBorder.HideAlways
'Sets the selection mode to select the whole row.
myGrid.TableOptions.ListBoxSelectionMode = SelectionMode.One
'Sets the alphablendcolor.
myGrid.TableModel.Options.AlphaBlendSelectionColor = SystemColors.InactiveCaptionText

2. AddNewRecord: Set the ShowAddNewRecordBeforeDetails and ShowAddNewRecordAfterDetails properties to false to hide the AddNewRecord of the grid.

myGrid.ChildGroupOptions.ShowAddNewRecordBeforeDetails = false;
myGrid.TopLevelGroupOptions.ShowAddNewRecordBeforeDetails = false;

myGrid.ChildGroupOptions.ShowAddNewRecordBeforeDetails = false
myGrid.TopLevelGroupOptions.ShowAddNewRecordBeforeDetails = false

3. GridLines: The grid lines are customized by setting the TableModel.Properties.DisplayVertLines to false to hide the vertical grid lines. The horizontal lines are customized by handling the QueryCellStyleInfo event.

void myGrid_QueryCellStyleInfo(object sender, GridTableCellStyleInfoEventArgs e)
{
    //Sets the font styles.
    if (e.TableCellIdentity.TableCellType == GridTableCellType.AnyRecordFieldCell)
        e.Style.Font.Facename = "Arial";
    //Customizes the styles to the GroupCaptionCell.
    if (e.TableCellIdentity.TableCellType == GridTableCellType.GroupCaptionCell)
    {
        e.Style.Themed = false;
        e.Style.BackColor = Color.White;
        e.Style.Borders.Top = new GridBorder(GridBorderStyle.None, groupBorderColor, GridBorderWeight.Thick);
        e.Style.Borders.Bottom = new GridBorder(GridBorderStyle.Solid, groupBorderColor, GridBorderWeight.Thick);
        e.Style.TextColor = groupTextColor;
        e.Style.Font.Bold = true;
        e.Style.TextMargins.Bottom = 8 - 3;
        e.Style.VerticalAlignment = GridVerticalAlignment.Bottom;
    }
    //Customizes the styles to the GroupCaptionPlusMinusCell.
    if (e.TableCellIdentity.TableCellType == GridTableCellType.GroupCaptionPlusMinusCell)
    {
        e.Style.CellAppearance = GridCellAppearance.Flat;
        e.Style.Borders.Top = new GridBorder(GridBorderStyle.None);
        e.Style.Borders.Bottom = new GridBorder(GridBorderStyle.Solid, groupBorderColor, GridBorderWeight.Thick);
    }
    //Customizes the styles to the GroupIndentCell.
    if (e.TableCellIdentity.TableCellType == GridTableCellType.GroupIndentCell)
    {
        e.Style.Borders.Top = new GridBorder(GridBorderStyle.None);
        e.Style.Borders.Bottom = new Syncfusion.Windows.Forms.Grid.GridBorder(Syncfusion.Windows.Forms.Grid.GridBorderStyle.Solid, Color.FromArgb(227, 239, 255), Syncfusion.Windows.Forms.Grid.GridBorderWeight.ExtraThin);
    }
    if ((e.TableCellIdentity.TableCellType == GridTableCellType.GroupIndentICell) ||
        (e.TableCellIdentity.TableCellType == GridTableCellType.GroupIndentLCell) || (e.TableCellIdentity.TableCellType == GridTableCellType.GroupIndentTCell))
        if (myGrid.TableDescriptor.GroupedColumns.Count > 1)
            e.Style.BackColor = Color.FromArgb(253, 238, 201);
}

Private Sub myGrid_QueryCellStyleInfo(ByVal sender As Object, ByVal e As GridTableCellStyleInfoEventArgs)
    'Sets the font styles.
    If e.TableCellIdentity.TableCellType = GridTableCellType.AnyRecordFieldCell Then
        e.Style.Font.Facename = "Arial"
    End If
    'Customizes the styles to the GroupCaptionCell.
    If e.TableCellIdentity.TableCellType = GridTableCellType.GroupCaptionCell Then
        e.Style.Themed = False
        e.Style.BackColor = Color.White
        e.Style.Borders.Top = New GridBorder(GridBorderStyle.None, groupBorderColor, GridBorderWeight.Thick)
        e.Style.Borders.Bottom = New GridBorder(GridBorderStyle.Solid, groupBorderColor, GridBorderWeight.Thick)
        e.Style.TextColor = groupTextColor
        e.Style.Font.Bold = True
        e.Style.TextMargins.Bottom = 8 - 3
        e.Style.VerticalAlignment = GridVerticalAlignment.Bottom
    End If
    'Customizes the styles to the GroupCaptionPlusMinusCell. 
    If e.TableCellIdentity.TableCellType = GridTableCellType.GroupCaptionPlusMinusCell Then
        e.Style.CellAppearance = GridCellAppearance.Flat
        e.Style.Borders.Top = New GridBorder(GridBorderStyle.None)
        e.Style.Borders.Bottom = New GridBorder(GridBorderStyle.Solid, groupBorderColor, GridBorderWeight.Thick)
    End If
    'Customizes the styles to the GroupIndentCell.
    If e.TableCellIdentity.TableCellType = GridTableCellType.GroupIndentCell Then
        e.Style.Borders.Top = New GridBorder(GridBorderStyle.None)
        e.Style.Borders.Bottom = New Syncfusion.Windows.Forms.Grid.GridBorder(Syncfusion.Windows.Forms.Grid.GridBorderStyle.Solid, Color.FromArgb(227, 239, 255), Syncfusion.Windows.Forms.Grid.GridBorderWeight.ExtraThin)
    End If
    If (e.TableCellIdentity.TableCellType = GridTableCellType.GroupIndentICell) OrElse (e.TableCellIdentity.TableCellType = GridTableCellType.GroupIndentLCell) OrElse (e.TableCellIdentity.TableCellType = GridTableCellType.GroupIndentTCell) Then
        If myGrid.TableDescriptor.GroupedColumns.Count > 1 Then
            e.Style.BackColor = Color.FromArgb(253, 238, 201)
        End If
    End If
End Sub

In the attached sample, a helper class named ConfigureOutlookStyle is designed to set the property settings.

//Method to set the desired skin.
public void SwitchToVisualStyles(GridVisualStyles skin)
{
    myGrid.TableOptions.GridVisualStyles = skin;
    //Sets colors to be used with respect to the current skin.
    InitializeOffice2007Colors(skin);
    myGrid.TableOptions.GridLineBorder = new GridBorder(GridBorderStyle.Solid, lineColor, GridBorderWeight.Thin);
    myGrid.Appearance.GroupIndentCell.Borders.Bottom = new GridBorder(GridBorderStyle.Solid, lineColor, GridBorderWeight.ExtraThin);
    myGrid.Appearance.AnyRecordFieldCell.Borders.Bottom = new GridBorder(GridBorderStyle.Solid, lineColor, GridBorderWeight.ExtraThin);
}
void myGrid_TableControlCurrentCellActivating(object sender, GridTableControlCurrentCellActivatingEventArgs e)
{
    e.Inner.ColIndex = 0;
}
void InitializeOffice2007Colors(GridVisualStyles skin)
{
    switch (skin)
    {
        case GridVisualStyles.Office2007Blue:
                lineColor = Color.FromArgb(227, 239, 255);
                groupBorderColor = Color.FromArgb(111, 157, 217);
                groupTextColor = Color.FromArgb(55, 100, 160);
                break;
        case GridVisualStyles.Office2007Black:
                lineColor = Color.FromArgb(227, 239, 255);
                groupBorderColor = Color.FromArgb(145, 153, 164);
                groupTextColor = Color.FromArgb(97, 106, 118);
                break;
        case GridVisualStyles.Office2007Silver:
                lineColor = Color.FromArgb(221, 224, 227);
                groupBorderColor = Color.FromArgb(165, 164, 189);
                groupTextColor = Color.FromArgb(112, 111, 145);
                break;
    }
}

'Method to set the desired skin.
Public Sub SwitchToVisualStyles(ByVal skin As GridVisualStyles)
    myGrid.TableOptions.GridVisualStyles = skin
    'Sets colors to be used with respect to the current skin.
    InitializeOffice2007Colors(skin)
    myGrid.TableOptions.GridLineBorder = New GridBorder(GridBorderStyle.Solid, lineColor, GridBorderWeight.Thin)
    myGrid.Appearance.GroupIndentCell.Borders.Bottom = New GridBorder(GridBorderStyle.Solid, lineColor, GridBorderWeight.ExtraThin)
    myGrid.Appearance.AnyRecordFieldCell.Borders.Bottom = New GridBorder(GridBorderStyle.Solid, lineColor, GridBorderWeight.ExtraThin)
End Sub
Private Sub myGrid_TableControlCurrentCellActivating(ByVal sender As Object, ByVal e As GridTableControlCurrentCellActivatingEventArgs)
    e.Inner.ColIndex = 0
End Sub
Private Sub InitializeOffice2007Colors(ByVal skin As GridVisualStyles)
    Select Case skin
        Case GridVisualStyles.Office2007Blue
                 lineColor = Color.FromArgb(227, 239, 255)
                 groupBorderColor = Color.FromArgb(111, 157, 217)
                 groupTextColor = Color.FromArgb(55, 100, 160)
        Case GridVisualStyles.Office2007Black
                 lineColor = Color.FromArgb(227, 239, 255)
                 groupBorderColor = Color.FromArgb(145, 153, 164)
                 groupTextColor = Color.FromArgb(97, 106, 118)
        Case GridVisualStyles.Office2007Silver
                 lineColor = Color.FromArgb(221, 224, 227)
                 groupBorderColor = Color.FromArgb(165, 164, 189)
                 groupTextColor = Color.FromArgb(112, 111, 145)
        End Select
End Sub

After applying the properties, the Grid looks like the following screenshot:

Customize the outlook styles