Cannot Bind Grouping property in ListView

Question

I have an ObservableCollection of items that I want to use to group my ListView, but I just can't bind my Grouping to that item.

That's my little class:

public class Module
{
    public string Name { get; set; }

    public Module(string name)
    {
        Name = name;
    }
}

ViewModel:

public ObservableCollection<Module> ServerModules
{
    get => serverModules;
    set
    {
        if (serverModules == value) { return; }
        serverModules = value;
        OnPropertyChanged();
    }
}

Here my Xaml Code:

<StackPanel Orientation="Vertical">
    <ListView ItemsSource="{Binding ServerModules}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Property" Width="200"/>
                <GridViewColumn Header="Value" Width="200"/>
            </GridView>
        </ListView.View>
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock FontSize="20" FontWeight="Bold" Foreground="DodgerBlue" Text="{Binding Name}"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
</StackPanel>

The Name Property cannot be resolved. I also tried using a CollectionViewSource but it's also not working for me:

<CollectionViewSource x:Key="GroupModules" Source="{Binding ServerModules}">
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="Name"/>
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
<ListView ItemsSource="{Binding Source={StaticResource GroupModules}}">

Any ideas and help are really appreciated.

Update Solution:
In my Resources section I defined a CollectionViewSource to set a GroupDescription property and a Style for my GroupItem.

<UserControl.Resources>
    <CollectionViewSource x:Key="GroupedModules" Source="{Binding ServiceModuleSetViewModel.AllModuleProperties}">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="ModuleName" />
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>
    <!-- ListView GroupStyle.ContainerStyle -->
    <Style TargetType="{x:Type GroupItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Expander IsExpanded="True">
                        <Expander.Header>
                            <TextBlock Text="{Binding Name}" FontSize="13" Foreground="DodgerBlue" FontWeight="Bold" />
                        </Expander.Header>
                        <ItemsPresenter />
                    </Expander>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

ListView:

    <ListView ItemsSource="{Binding Source={StaticResource GroupedModules}}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.GroupStyle>
            <GroupStyle/>
        </ListView.GroupStyle>

        <ListView.View>
            <GridView>
                <GridViewColumn Header="Name" Width="200">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate DataType="local:ModuleProperty">
                            <TextBlock FontSize="13" Text="{Binding Path=Name}" TextAlignment="Center"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="Value" Width="200">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate DataType="local:ModuleProperty">
                            <TextBox FontSize="13" Text="{Binding Path=Value}" TextAlignment="Center"
                                     Width="100"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

The ListView control has the CollectionViewSource Resource as ItemsSource.
Each GridViewColumn has a CellTemplate to display my data in the columns.

Does this answer your question? [How do I use WPF bindings with RelativeSource?](https://stackoverflow.com/questions/84278/how-do-i-use-wpf-bindings-with-relativesource) — greenjaed, Dec 21 '20 at 21:41
Thanks for your reply. I'm not sure - I tried something out, but still don't get the right result (see Update in Post). Maybe you can provide some code example. — Stan1k, Dec 21 '20 at 23:20
Okay, I may have led you astray with my first comment. I think this tutorial outlines pretty well how to use ListView grouping: [The ListView control: ListView grouping](https://www.wpf-tutorial.com/listview-control/listview-grouping/) — greenjaed, Dec 21 '20 at 23:49
That article definitely helped me, develope a solution. For me personally it was still hard to adapt the Code Behind examples from the website, to MVVM architecture, but finally I have a working solution. I will share it soon. — Stan1k, Dec 22 '20 at 20:22

Anton · Accepted Answer · 2020-12-21T23:50:52.047

You need to define style for GroupItem or specify GroupStyle.ContainerStyle
Also for GridViewColumn you need to specify DisplayMemberBinding.

<UserControl.Resources>
    <!-- ListView GroupStyle.ContainerStyle -->
    <Style TargetType="{x:Type GroupItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Expander IsExpanded="True">
                        <Expander.Header>
                            <TextBlock Text="{Binding Name}" Foreground="Gray" FontWeight="Bold" />
                        </Expander.Header>
                        <ItemsPresenter />
                    </Expander>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<StackPanel Orientation="Vertical">
    <ListView ItemsSource="{Binding ServerModules}">
        <ListView.GroupStyle>
            <GroupStyle/>
        </ListView.GroupStyle>

        <ListView.View>
            <GridView>
                <GridViewColumn Header="Property" DisplayMemberBinding="{Binding Property}" Width="200"/>
                <GridViewColumn Header="Value" DisplayMemberBinding="{Binding Value}" Width="200"/>
            </GridView>
        </ListView.View>
    </ListView>
</StackPanel>

Thanks for your code example. For me that wasn't enough, I also needed to define a `CollectionViewSource` in the **Resources** section to be able to use a `GroupDescription` property. I will share my working solution above. — Stan1k, Dec 22 '20 at 20:28

Cannot Bind Grouping property in ListView

1 Answers1