WPF DataGrid.GroupStyle 与 MVVM

Question

我尝试列出几个应该在三个不同组中可视化的数据项:

仪表板

家政

科学

使用 MVVM (Model-View-ViewModel) 设计模式，我制作了两个模型类:

数据组.cs

public class DataGroup
{
    public String Name { get; set; }
}

数据项.cs

public class DataItem
{
    public String Name { get; set; }
    public String Format { get; set; }
    public DataGroup Group { get; set; }
}

...一个 ViewModel 类:
DataListViewModel.cs

class DataListViewModel : ViewModelBase
{
    public List<Models.DataGroup> GroupList { get; set; }
    public List<Models.DataItem> DataList { get; set; }

    public DataListViewModel()
    {
        var GroupList = new List<Models.DataGroup>
        {
            new Models.DataGroup
            {
                Name = "Dashboard"
            },
            new Models.DataGroup
            {
                Name = "Housekeeping"
            },
            new Models.DataGroup
            {
                Name = "Science"
            }
        };

        var DataList = new List<Models.DataItem>
        {
            new Models.DataItem
            {
                Name = "Panel A",
                Format = "N/A",
                Group = GroupList[0],
            },
            new Models.DataItem
            {
                Name = "Panel B",
                Format = "N/A",
                Group = GroupList[0],
            },
            new Models.DataItem
            {
                Name = "Panel C",
                Format = "N/A",
                Group = GroupList[0],
            },
            new Models.DataItem
            {
                Name = "+3.4 V",
                Format = "TBD",
                Group = GroupList[1],
            },
            new Models.DataItem
            {
                Name = "+5.3 V",
                Format = "TBD",
                Group = GroupList[1],

etc.
这里是 XAML 代码 数据列表.xaml

<ListView Name="PersonListView"
                      ItemsSource="{Binding DataList}"
                      IsSynchronizedWithCurrentItem="True"
                      SelectedItem="{Binding SelectedDataItem}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
            </GridView>
        </ListView.View>
    </ListView>

    <!-- DataList -->
    <DataGrid BorderBrush="Black"
              ItemsSource="{Binding DataList}"
              SelectedItem="{Binding SelectedDataItem}"
              IsSynchronizedWithCurrentItem="True"
              AutoGenerateColumns="False"
              IsReadOnly="True" SelectionMode="Single">
        <DataGrid.Style>
            <Style TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}">
                <Setter Property="AlternatingRowBackground" Value="{DynamicResource AccentColorBrush4}"/>
            </Style>
        </DataGrid.Style>

        <!--GroupStyle to group data-->
        <DataGrid.GroupStyle>
            <GroupStyle>

                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding GroupList, IsAsync=True}"/>
                        </StackPanel>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>

                <!--Group DataItems into DataGroup-->
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Expander IsExpanded="True" Background="{StaticResource HighlightBrush}">
                                        <Expander.Header >
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Foreground="{DynamicResource WhiteBrush}"/>
                                                <TextBlock Text=" - " Foreground="{DynamicResource WhiteBrush}"/>
                                                <TextBlock Text="{Binding Path=ItemCount}" Foreground="{DynamicResource WhiteBrush}"/>
                                            </StackPanel>
                                        </Expander.Header>
                                        <ItemsPresenter/>
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>

            </GroupStyle>
        </DataGrid.GroupStyle>


        <DataGrid.Columns>
            <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
            <DataGridTextColumn Header="Format" Binding="{Binding Format}" ElementStyle="{StaticResource DataGridTextColumnRightAlignStyle}"/>
            <!--<DataGridTextColumn Header="SID" Binding="{Binding Sid}" ElementStyle="{StaticResource DataGridTextColumnRightAlignStyle}"/>-->

        </DataGrid.Columns>
    </DataGrid>

我能够可视化 DataList，但对它们进行组合不起作用。如何更改 DataListViewModel 中的代码？

Answer 1

要对这样的列表进行分组，您需要使用 CollectionViewSource。

将其添加到您的资源中，如下所示:

    <CollectionViewSource x:Key="GroupedDataList" Source="{Binding DataList}">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="Group" />
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>

并绑定(bind)到它而不是直接绑定(bind)到 DataList :

    <DataGrid BorderBrush="Black"
          ItemsSource="{Binding Source={StaticResource GroupedDataList}}"

GroupStyle显示也有点偏离 - 你不需要 HeaderTemplate那里有ContainerStyle你已经申请了。此外，您需要更改 Binding第一个 TextBlock到Name.Name :

<StackPanel Orientation="Horizontal">
    <TextBlock Text="{Binding Path=Name.Name}" FontWeight="Bold" Foreground="{DynamicResource WhiteBrush}"/>
    <TextBlock Text=" - " Foreground="{DynamicResource WhiteBrush}"/>
    <TextBlock Text="{Binding Path=ItemCount}" Foreground="{DynamicResource WhiteBrush}"/>
</StackPanel>

但是你可以玩弄绑定(bind)和放置，找出最适合你的。

哦，我做的最后一件事是删除顶部的 ListView，它在我制作的示例应用程序中完全被掩盖了。但是，根据您包含的 XAML，可能并非如此。

希望这可以帮助!