Click here to Skip to main content
12,621,430 members (30,476 online)
Click here to Skip to main content

Stats

69K views
1.1K downloads
23 bookmarked
Posted

Customizing Group Row Header of Silverlight DataGrid

, 20 Jan 2011 CPOL
This article will definitely help you. Here, I will show you how to modify the XAML to add different content to create a multi level row group header too.
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:viewModels="clr-namespace:DataGridDemo1.ViewModels"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    xmlns:Converters="clr-namespace:DataGridDemo1.Converters" 
    x:Class="DataGridDemo1.Views.MainView">
    <UserControl.Resources>
        <viewModels:MainViewModel x:Key="MainViewModel"/>
        <Converters:GroupRowHeaderVisibilityConverter x:Key="GroupRowHeaderVisibilityConverter"/>
    </UserControl.Resources>
    <StackPanel x:Name="LayoutRoot" Background="White"
                DataContext="{StaticResource MainViewModel}">
        <StackPanel Orientation="Horizontal">
            <ComboBox Width="200" Height="20" Margin="10"
                      HorizontalAlignment="Left" SelectionChanged="ComboBox_SelectionChanged">
                <ComboBoxItem Content="City"/>
                <ComboBoxItem Content="State"/>
                <ComboBoxItem Content="Department"/>
            </ComboBox>
            <TextBlock Text="Filter Records by: " Height="20"/>
            <TextBox Width="150" Height="25" TextChanged="TextBox_TextChanged"/>
        </StackPanel>
        <sdk:DataGrid 
            IsReadOnly="True" Margin="10" Height="200" ItemsSource="{Binding Employees}">
            <sdk:DataGrid.RowGroupHeaderStyles>
                <Style TargetType="sdk:DataGridRowGroupHeader">
                    <Setter Property="Cursor" Value="Arrow" />
                    <Setter Property="IsTabStop" Value="False" />
                    <Setter Property="Background" Value="#FFE4E8EA" />
                    <Setter Property="Height" Value="20"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="sdk:DataGridRowGroupHeader">
                                <sdk:DataGridFrozenGrid x:Name="Root" 
                                                        Background="{TemplateBinding Background}">
                                    <sdk:DataGridFrozenGrid.Resources>
                                        <ControlTemplate x:Key="ToggleButtonTemplate" 
                                                         TargetType="ToggleButton">
                                            <Grid>
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal"/>
                                                        <VisualState x:Name="MouseOver">
                                                            <Storyboard>
                                                                <ColorAnimation Storyboard.TargetName="CollapsedArrow" 
                                                                                Storyboard.TargetProperty="(Stroke).Color" 
                                                                                Duration="0" To="#FF6DBDD1"/>
                                                                <ColorAnimation Storyboard.TargetName="ExpandedArrow" 
                                                                                Storyboard.TargetProperty="(Fill).Color" 
                                                                                Duration="0" To="#FF6DBDD1"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Pressed">
                                                            <Storyboard>
                                                                <ColorAnimation Storyboard.TargetName="CollapsedArrow" 
                                                                                Storyboard.TargetProperty="(Stroke).Color" 
                                                                                Duration="0" To="#FF6DBDD1"/>
                                                                <ColorAnimation Storyboard.TargetName="ExpandedArrow" 
                                                                                Storyboard.TargetProperty="(Fill).Color" 
                                                                                Duration="0" To="#FF6DBDD1"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Disabled">
                                                            <Storyboard>
                                                                <DoubleAnimation Duration="0" 
                                                                                 Storyboard.TargetName="CollapsedArrow" 
                                                                                 Storyboard.TargetProperty="Opacity" To=".5"/>
                                                                <DoubleAnimation Duration="0" 
                                                                                 Storyboard.TargetName="ExpandedArrow"
                                                                                 Storyboard.TargetProperty="Opacity" To=".5"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                    <VisualStateGroup x:Name="CheckStates">
                                                        <VisualState x:Name="Checked" />
                                                        <VisualState x:Name="Unchecked">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Duration="0" 
                                                                                               Storyboard.TargetName="CollapsedArrow" 
                                                                                               Storyboard.TargetProperty="Visibility">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                                                            Value="Visible"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Duration="0" 
                                                                                               Storyboard.TargetName="ExpandedArrow" 
                                                                                               Storyboard.TargetProperty="Visibility">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>

                                                <Path Stretch="Uniform" 
                                                      Data="F1 M 0,0 L 0,1 L .6,.5 L 0,0 Z"
                                                      Width="5" HorizontalAlignment="Center" 
                                                      VerticalAlignment="Center" x:Name="CollapsedArrow" 
                                                      Visibility="Collapsed" Stroke="#FF414345"/>
                                                <Path Stretch="Uniform" 
                                                      Data="F1 M 0,1 L 1,1 L 1,0 L 0,1 Z" Width="6" 
                                                      HorizontalAlignment="Center" VerticalAlignment="Center" 
                                                      x:Name="ExpandedArrow" Fill="#FF414345"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </sdk:DataGridFrozenGrid.Resources>

                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CurrentStates">
                                            <VisualState x:Name="Regular"/>
                                            <VisualState x:Name="Current">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="FocusVisual" 
                                                                     Storyboard.TargetProperty="Opacity" 
                                                                     To="1" Duration="0" />
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>

                                    <sdk:DataGridFrozenGrid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition/>
                                    </sdk:DataGridFrozenGrid.ColumnDefinitions>
                                    <sdk:DataGridFrozenGrid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition/>
                                        <RowDefinition Height="Auto"/>
                                    </sdk:DataGridFrozenGrid.RowDefinitions>

                                    <Rectangle Grid.Column="1" Grid.ColumnSpan="5" Fill="#FFFFFFFF" Height="1"/>
                                    <Rectangle Grid.Column="1" Grid.Row="1" x:Name="IndentSpacer" />
                                    <ToggleButton Grid.Column="2" Grid.Row="1" x:Name="ExpanderButton" 
                                                  Height="15" Width="15" IsTabStop="False" 
                                                  Template="{StaticResource ToggleButtonTemplate}" Margin="2,0,0,0"/>

                                    <!-- This is START of the First Group Header of the DataGrid -->
                                    <StackPanel Grid.Column="3" Grid.Row="1" Orientation="Horizontal" 
                                                VerticalAlignment="Center" Margin="0,1,0,1" 
                                                Visibility="{Binding Width, Converter={StaticResource GroupRowHeaderVisibilityConverter}, ElementName=IndentSpacer}">
                                        <TextBlock Margin="4,0,0,0" Text="{Binding Name}" Foreground="Red"/>
                                    </StackPanel>
                                    <!-- This is END of the First Group Header of the DataGrid -->

                                    <!-- This is START of the Second Group Header of the DataGrid -->
                                    <Grid Grid.Column="3" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,1,0,1"
                                          Visibility="{Binding Width, ConverterParameter=true, Converter={StaticResource GroupRowHeaderVisibilityConverter}, ElementName=IndentSpacer}">
                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                                            <TextBlock Margin="4,0,0,0" Text="{Binding Name}" Foreground="Blue"/>
                                        </StackPanel>

                                    </Grid>
                                    <!-- This is END of Second Group Header of the DataGrid -->

                                    <Rectangle Grid.Column="1" Grid.ColumnSpan="5" Fill="#FFD3D3D3" Height="1" Grid.Row="2"/>
                                    <Rectangle x:Name="FocusVisual" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="3" 
                                        Stroke="#FF6DBDD1" StrokeThickness="1" 
                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                                        IsHitTestVisible="false" Opacity="0" />
                                    <sdk:DataGridRowHeader x:Name="RowHeader" Grid.RowSpan="3" sdk:DataGridFrozenGrid.IsFrozen="True"/>

                                </sdk:DataGridFrozenGrid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </sdk:DataGrid.RowGroupHeaderStyles>
        </sdk:DataGrid>
        <sdk:DataPager x:Name="pagerEmployee" 
                       DisplayMode="FirstLastPreviousNextNumeric" PageSize="3"
                       NumericButtonCount="3" Height="24" Margin="10,0" 
                       HorizontalAlignment="Stretch" VerticalAlignment="Center" 
                       Source="{Binding Employees}" />
    </StackPanel>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

_Kunal Chowdhury_
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383

You may also be interested in...

Pro
Pro
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.161128.1 | Last Updated 20 Jan 2011
Article Copyright 2011 by _Kunal Chowdhury_
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid