WPF - Binding to current item from within group header style

Question

Hi,

I'm something of a WPF noob so please take it easy on me ;-)

I am trying to create a grouped DataGrid (WPF toolkit version). I have successfully created the data source, the DataGrid itself, the required CollectionViewSource and the Style for the group header (which uses an expander).

I want to group by a property called 'Assign_To' and have the relevant value (the value that the grouped items share) show up in the header. However, I cannot work out how to bind to the current group/item in order to return its Assign_To property.

The closest I have got (shown below) is binding to the overall CollectionViewSource, which returns a fixed value for Assign_To. What would be the proper way to bind to the current item/group in order to return the correct value for 'Assign_To'?

Hope someone can help. Thanks!

Andy T.

Here's the source...

<Window DataContext="{Binding Source={StaticResource SampleDataSource}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="DataGridTest.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480" mc:Ignorable="d">

    <Window.Resources>
        <CollectionViewSource x:Key="CVS" Source="{Binding MyData}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Assign_To"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

        <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <Expander IsExpanded="True">
                            <Expander.Header>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Assign To: "/>
                                    <TextBlock Text="{Binding Source={StaticResource CVS}, Path=Assign_To}"/>
                                </StackPanel>                               
                            </Expander.Header>
                            <ItemsPresenter/>
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>


    <Grid x:Name="LayoutRoot">
        <dg:DataGrid
         ItemsSource="{Binding Source={StaticResource CVS}}"
         SelectionUnit="CellOrRowHeader" 
         CanUserAddRows="False" 
         CanUserDeleteRows="False" 
         CanUserResizeRows="False">
         <dg:DataGrid.GroupStyle>
            <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <dg:DataGridRowsPresenter/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
         </dg:DataGrid.GroupStyle>          
        </dg:DataGrid>   
    </Grid> 
</Window>

Answer 1

binding settings depend on the type of the Assign_To property. The simplest settings which could probably work for you would be:

<TextBlock Text="Assign To: "/>
<TextBlock Text="{Binding Name}"/>

pls, check if an example below would work for you; also this link WPF Toolkit DataGrid Part IV: TemplateColumns and Row Grouping might be helpful for you

code:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        var dataProvider = (CollectionViewSource)FindResource("CVS");
        dataProvider.Source = Test.GetTests();
    }
}

public class Test
{
    public string   Assign_To { get; set; }
    public string   Test0 { get; set; }
    public int      Test1 { get; set; }

    public static List<Test> GetTests()
    {
        List<Test> tests = new List<Test>();

        tests.Add(new Test { Assign_To = "a", Test0 = "aaaa", Test1 = 1 });
        tests.Add(new Test { Assign_To = "a", Test0 = "bbbb", Test1 = 1 });
        tests.Add(new Test { Assign_To = "b", Test0 = "cccc", Test1 = 2 });

        return tests;
    }
}

xaml:

<Window.Resources>    
    <CollectionViewSource x:Key="CVS" >
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="Assign_To"/>
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>

    <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">
                    <Expander IsExpanded="True">
                        <Expander.Header>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Assign To: "/>
                                <TextBlock Text="{Binding Name}"/>
                            </StackPanel>
                        </Expander.Header>
                        <ItemsPresenter />
                    </Expander>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>    
</Window.Resources>

<Grid>        
    <DataGrid 
        ItemsSource="{Binding Source={StaticResource CVS}}"            
        HorizontalScrollBarVisibility="Hidden" SelectionMode="Extended"
        AutoGenerateColumns="False"  
        Name="dataGrid1">    
        <DataGrid.GroupStyle>
            <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <DataGridRowsPresenter/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </DataGrid.GroupStyle>    
        <DataGrid.Columns>
            <DataGridTextColumn Header="Test0" Binding="{Binding Path=Test0}" />
            <DataGridTextColumn Header="Test1" Binding="{Binding Path=Test1}" />
        </DataGrid.Columns>
    </DataGrid>
</Grid>

hope this helps, regards

Answer 2

Thanks for your reply. I really appreciate it and will check it out to see if it works.

Anyway, as it turns out, after some poking and prodding, I have worked it out using XAML only. What I had been missing was the fact that each item the group header is bound to is a GroupItem and that the default DataContext of a GroupItem is a CollectionViewGroup. In turn, a CollectionViewGroup has an Items property, which is a collection and I can therefore get the Assign_To value of the first item in the collection and use that in my header text. Like this:

<Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <Expander IsExpanded="True">
                            <Expander.Header>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Assign To: "/>
                                    <TextBlock Text="{Binding Items[0].Assign_To}"/>
                                </StackPanel>       
                            </Expander.Header>
                            <ItemsPresenter/>
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>