Question

Thanks for reading my question!
I have a problem with customizing a DataGrid RowGroupHeader, the situation is:
I need a way of taking control over a DataGrid RowGroupHeader as I want to display some databound values in it. The values will be generated at runtime so the RowGroupHeaderStyle needs to be generated and added to DataGrid’s RowGroupHeaderStyles property at runtime too (possibly using XamlReader.Load).
Additionally the position of the databound value within the RowGroupHeader should be aligned with a corresponding column from the DataGrid.
I’ve managed to create a working template using this post MS Forum but I had no luck with positioning the databound element, in my case TextBlock, to correctly align with a given DataGrid column.
Any suggestions?
Many thanks

Answer 1

This hasn’t been an easy one but after some extensive googling and piecing up other people’s experiences I’ve come up with this that work fine for me

string loadString = @"<Style xmlns=""http://schemas.microsoft.com/client/2007"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"" 
                                                 xmlns:localprimitives=""clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data""
xmlns:vsm=""clr-namespace:System.Windows;assembly=System.Windows""
xmlns:data=""clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"" TargetType=""data: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=""data:DataGridRowGroupHeader"">
                            <localprimitives:DataGridFrozenGrid Name=""Root"" Background=""{TemplateBinding Background}"">
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name=""CurrentStates"">
                                        <vsm:VisualState x:Name=""Regular""/>
                                        <vsm:VisualState x:Name=""Current"">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName=""FocusVisual"" Storyboard.TargetProperty=""Opacity"" To=""1"" Duration=""0"" />
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                                <localprimitives:DataGridFrozenGrid.Resources>

                                </localprimitives:DataGridFrozenGrid.Resources>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width=""Auto"" />
                                    <ColumnDefinition Width=""Auto"" />
                                    <ColumnDefinition Width=""Auto"" />
                                    <ColumnDefinition Width=""Auto"" />
                                    <ColumnDefinition Width=""Auto"" />
                                    <ColumnDefinition Width=""Auto"" />"     

At this point I have some dynamic columns in the grid so I’m adding them just as the Grid.ColumnDefinitions so far but if your datagrid is static then you put the right number of columns.

+ colStr1 +
                               @"</Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height=""Auto""/>
                                    <RowDefinition/>
                                    <RowDefinition Height=""Auto""/>
                                </Grid.RowDefinitions>
                                <StackPanel x:Name=""CustomRGHStackPanel"" Orientation=""Horizontal"" Tag=" + _tagNo + @"  Grid.Column=""3"" Grid.Row=""1""  VerticalAlignment=""Center"" Margin=""0,1,0,1"">
                                    <StackPanel.Resources>
                                        <Style  TargetType=""data:DataGridCell"">
                                            <Setter Property=""Background"" Value=""Transparent"" />
                                            <Setter Property=""HorizontalContentAlignment"" Value=""Stretch"" />
                                            <Setter Property=""VerticalContentAlignment"" Value=""Stretch"" />
                                            <Setter Property=""IsTabStop"" Value=""False"" />
                                            <Setter Property=""FontWeight"" Value=""Black""/>
                                            <Setter Property=""Template"">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType=""data:DataGridCell"">
                                                        <Grid Margin=""1,-1,-1,0"" >
                                                            <Grid Name=""Root"" Background=""{TemplateBinding Background}"" Margin=""5,0,0,0"">
                                                                <vsm:VisualStateManager.VisualStateGroups>
                                                                    <vsm:VisualStateGroup x:Name=""CurrentStates"">
                                                                        <vsm:VisualState x:Name=""Regular"" />
                                                                        <vsm:VisualState x:Name=""Current"">
                                                                            <Storyboard>
                                                                                <DoubleAnimation Storyboard.TargetName=""FocusVisual"" Storyboard.TargetProperty=""Opacity"" To=""1"" Duration=""0"" />
                                                                            </Storyboard>
                                                                        </vsm:VisualState>
                                                                    </vsm:VisualStateGroup>
                                                                    <vsm:VisualStateGroup x:Name=""ValidationStates"">
                                                                        <vsm:VisualState x:Name=""Valid""/>
                                                                        <vsm:VisualState x:Name=""Invalid"">
                                                                            <Storyboard>
                                                                                <DoubleAnimation Storyboard.TargetName=""InvalidVisualElement"" Storyboard.TargetProperty=""Opacity"" Duration=""0"" To=""1""/>
                                                                                <ColorAnimation Storyboard.TargetName=""FocusVisual"" Storyboard.TargetProperty=""(Fill).Color"" Duration=""0"" To=""#FFFFFFFF""/>
                                                                            </Storyboard>
                                                                        </vsm:VisualState>
                                                                    </vsm:VisualStateGroup>
                                                                </vsm:VisualStateManager.VisualStateGroups>

                                                                <Grid.ColumnDefinitions>
                                                                    <ColumnDefinition />
                                                                    <ColumnDefinition Width=""Auto"" />
                                                                </Grid.ColumnDefinitions>

                                                                <Rectangle Name=""FocusVisual"" Stroke=""#FF6DBDD1"" StrokeThickness=""1"" Fill=""#66FFFFFF"" HorizontalAlignment=""Stretch"" 
                           VerticalAlignment=""Stretch"" IsHitTestVisible=""false"" Opacity=""0"" />

                                                                <ContentPresenter
                    Content=""{TemplateBinding Content}""
                    ContentTemplate=""{TemplateBinding ContentTemplate}""
                    HorizontalAlignment=""{TemplateBinding HorizontalContentAlignment}""
                    VerticalAlignment=""{TemplateBinding VerticalContentAlignment}""
                    Margin=""{TemplateBinding Padding}"" />

                                                                <Rectangle x:Name=""InvalidVisualElement"" IsHitTestVisible=""False"" StrokeThickness=""1"" Stroke=""#FFDC000C"" HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"" Opacity=""0""/>
                                                                <Rectangle Name=""q1q"" Fill=""#c9caca"" Grid.Column=""1"" Margin=""1,0,1,0"" HorizontalAlignment=""Right"" VerticalAlignment=""Stretch"" Width=""0"" />

                                                            </Grid>
                                                            <Rectangle Name=""qq"" Fill=""#c9caca""  Margin=""1,0,1,0"" HorizontalAlignment=""Left"" VerticalAlignment=""Stretch"" Width=""1"" />

                                                        </Grid>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </StackPanel.Resources>
                                    <data:DataGridCell  Content=""{Binding Name}""/>
                                    <data:DataGridCell  Content=""""/>
                                    <data:DataGridCell  Content=""""/>
                                    <data:DataGridCell  Content=""""/>
                                    <data:DataGridCell  Content=""""/>
                                    <data:DataGridCell HorizontalContentAlignment=""Left"" Margin=""7,0,0,0"" Content=""{Binding Converter={StaticResource myConverter}, ConverterParameter=TotalScore}""/>" + colStr2 +
                                @"</StackPanel>
                                <Rectangle Grid.Column=""1"" Grid.ColumnSpan=""5"" Fill=""#FFFFFFFF"" Height=""1""/>
                                <Rectangle Grid.Column=""1"" Grid.Row=""1"" Name=""IndentSpacer"" />
                                <ToggleButton Grid.Column=""2"" Grid.Row=""1"" Name=""ExpanderButton"" Height=""15"" Width=""15"" Margin=""2,0,0,0"">
                                  <ToggleButton.Template>
                                    <ControlTemplate TargetType=""ToggleButton"">
                                      <Grid Background=""Transparent"">
            <vsm:VisualStateManager.VisualStateGroups>
                <vsm:VisualStateGroup x:Name=""CommonStates"">
                    <vsm:VisualState x:Name=""Normal""/>
                    <vsm: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>
                    </vsm:VisualState>
                    <vsm: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>
                    </vsm:VisualState>
                    <vsm: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>
                    </vsm:VisualState>
                </vsm:VisualStateGroup>
                <vsm:VisualStateGroup x:Name=""CheckStates"">
                    <vsm:VisualState x:Name=""Checked"" />
                    <vsm: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>
                    </vsm:VisualState>
                </vsm:VisualStateGroup>
            </vsm: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>
        </ToggleButton.Template>
        </ToggleButton>
                                <Rectangle Grid.Column=""1"" Grid.ColumnSpan=""5"" Fill=""#FFD3D3D3"" Height=""1"" Grid.Row=""2""/>
                                <Rectangle Name=""FocusVisual"" Grid.Column=""1"" Grid.ColumnSpan=""4"" Grid.RowSpan=""3"" Stroke=""#FF6DBDD1"" StrokeThickness=""1"" HorizontalAlignment=""Stretch"" 
                           VerticalAlignment=""Stretch"" IsHitTestVisible=""false"" Opacity=""0"" />
                                <localprimitives:DataGridRowHeader Name=""RowHeader""  Grid.RowSpan=""3"" localprimitives:DataGridFrozenGrid.IsFrozen=""True""/>

                            </localprimitives:DataGridFrozenGrid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>";   

This is where your cell content comes in, and again I have some dynamic columns so I need to add cells dynamically (no need to do this if your grid is static)

<data:DataGridCell  Content=""{Binding Name}""/>
                                <data:DataGridCell  Content=""""/>
                                <data:DataGridCell  Content=""""/>
                                <data:DataGridCell  Content=""""/>
                                <data:DataGridCell  Content=""""/>
                                <data:DataGridCell HorizontalContentAlignment=""Left"" Margin=""7,0,0,0"" Content=""{Binding Converter={StaticResource myConverter}, ConverterParameter=TotalScore}""/>" + colStr2 +    

That is it pretty much, yes I agree it’s not a trivial job but it gives you custom style when you need it! Feel free to comment!