DataGrid Grouping in XAML with Data from SQL Table

Question

I have an SQL table names Cities that have four fields: City Province EnName Code I want to display its data on WPF DataGrid and set grouping by Province on it

This is my XAML design

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <local:SLTADataSet x:Key="SLTADataSet"/>
        <CollectionViewSource x:Key="CountriesViewSource" Source="{Binding Countries, Source={StaticResource SLTADataSet}}"/>
        <CollectionViewSource x:Key="CitiesViewSource" Source="{Binding Cities, Source={StaticResource SLTADataSet}}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Province"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

    </Window.Resources>
    <Grid >
        <DataGrid x:Name="CitiesDataGrid"  ItemsSource="{Binding Source={StaticResource CitiesViewSource}}" CanUserAddRows="False" >
            <DataGrid.GroupStyle>
                <!-- Style for groups at top level. -->
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Margin" Value="0,0,0,5"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <Expander IsExpanded="false" Background="Gray" >
                                            <Expander.Header>
                                                    <TextBlock FontWeight="Bold" Text="{Binding Source={StaticResource CitiesViewSource }, Path=Province}" Background="Yellow" />
                                            </Expander.Header>
                                            <Expander.Content>
                                                <ItemsPresenter />
                                            </Expander.Content>
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
                <!-- Style for groups under the top level. -->
                <!--<GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <DockPanel Background="yellow">
                                --><!--<TextBlock Text="{Binding Source={StaticResource CitiesViewSource}, Path=Province}" Foreground="Black"  Margin="30,0,0,0" Width="100"/>--><!--
                                <TextBlock Text="SSSSSSSSSSSSSS" Foreground="Black"  Margin="30,0,0,0" Width="100"/>
                            </DockPanel>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>-->
            </DataGrid.GroupStyle>
        </DataGrid>
    </Grid>
</Window>

here is the behind code

Class MainWindow

    Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs) Handles MyBase.Loaded
        Dim SLTADataSet As WpfApp1.SLTADataSet = CType(Me.FindResource("SLTADataSet"), WpfApp1.SLTADataSet)
        Dim SLTADataSetCitiesTableAdapter As WpfApp1.SLTADataSetTableAdapters.CitiesTableAdapter = New WpfApp1.SLTADataSetTableAdapters.CitiesTableAdapter()
        Dim CitiesViewSource As System.Windows.Data.CollectionViewSource = CType(Me.FindResource("CitiesViewSource"), System.Windows.Data.CollectionViewSource)
        SLTADataSetCitiesTableAdapter.Fill(SLTADataSet.Cities)
        CitiesViewSource.View.MoveCurrentToFirst()
    End Sub

    Private Sub MainWindow_Initialized(sender As Object, e As EventArgs) Handles Me.Initialized

    End Sub
End Class

Grouping is done and working perfect but I have a problem with expander in Datagrid grouping style it always the name of first province in table for all the group item I cannot find what the problem is. Would you please help me on it.

Answer 1

Since you have grouped by the Province property, you could just bind to the Name property of the GroupItem:

<TextBlock FontWeight="Bold" Text="{Binding Name}" Background="Yellow" />