wpf - 具有MVVM的WPF DataGrid.GroupStyle

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

仪表板

客房清洁

科学

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

DataGroup.cs

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

DataItem.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代码 DataList.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中更改代码？

最佳答案

要对这样的列表进行分组，您需要使用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，情况可能并非如此。

希望这可以帮助!

关于wpf - 具有MVVM的WPF DataGrid.GroupStyle，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32949319/