Styling the xamWebGrid Group By Area

Styling the xamWebGrid group by area is easy as long as you know the right class to target in your style. The following image depicts the xamWebGrid with a customized group by background.

The key to applying the style is to set the right TargetType value, which in this case is the GroupByAreaControl. The first step is to add a namespace into the XAML to point to the Infragistics Control Primitives.

...
xmlns:igPrim="clr-namespace:Infragistics.Silverlight.Controls.Primitives;assembly=Infragistics.Silverlight.XamWebGrid.v10.1"
...

Next, create a style that targets the GroupByAreaControl:

<UserControl.Resources>
    <Style x:Key="GroupByStyle" TargetType="igPrim:GroupByAreaCellControl">
        <Setter Property="Background" Value="Maroon" />
        <Setter Property="Width" Value="510" />
    </Style>
</UserControl.Resources>

Finally, point the GroupByAreaStyle to the style you just created:

<igGrid:XamWebGrid x:Name="grid" ItemsSource="{Binding Items}">
    <igGrid:XamWebGrid.GroupBySettings>
        <igGrid:GroupBySettings GroupByAreaStyle="{StaticResource GroupByStyle}" AllowGroupByArea="Top" />
    </igGrid:XamWebGrid.GroupBySettings>
    
    <igGrid:XamWebGrid.Columns>
        <igGrid:TextColumn Key="Title" />
        <igGrid:TextColumn Key="UnitPrice" />
        <igGrid:TextColumn Key="UnitsInStock" />
        <igGrid:TextColumn Key="UnitsOnOrder" />
        <igGrid:TextColumn Key="Category" />
    </igGrid:XamWebGrid.Columns>
</igGrid:XamWebGrid>

Now you have the hooks necessary to style the group by area in the xamWebGrid any way you see fit.

Thanks to Stephen Zaharuk for the inspiration for this post :)