c# - WPF 数据网格组样式

Question

我在 WPF 中有以下 DataGrid，有两个组。
第一组是一个 bool 标志，表示一个人是否活跃。
第二组(或子组)是每个人的 ID。每个人可以有多个城市，因此针对 ID 进行分组，因为每个人在 DataGrid 中显示多个。

这是 XAML:

<DataGrid CanUserAddRows="False" AutoGenerateColumns="False" ItemsSource="{Binding DataSource}">     
    <DataGrid.GroupStyle>                    
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GroupItem}">
                                <Expander IsExpanded="True">
                                    <Expander.Style>
                                        <Style TargetType="{x:Type Expander}">    
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding Name}" Value="True">
                                                    <Setter Property="Background" Value="{StaticResource ActiveBrush}"/>
                                                </DataTrigger>
                                                <DataTrigger Binding="{Binding Name}" Value="False">
                                                    <Setter Property="Background" Value="{StaticResource InactiveBrush}"/>
                                                    <Setter Property="FontStyle" Value="Italic"/>
                                                    <Setter Property="Foreground" Value="Gray"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Expander.Style>
                                    <Expander.Header>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Name, Converter={StaticResource BoolToTextConverter}}" Margin="5 2 5 2"/>
                                            <TextBlock Text=":" Margin="0 2 5 2"/>
                                            <TextBlock Text="{Binding ItemCount}" Margin="0 2 0 2"/>
                                        </StackPanel>
                                    </Expander.Header>
                                        <ItemsPresenter />
                                </Expander>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Background="LightSteelBlue">
                        <TextBlock Text="{Binding Name}" Foreground="White" Margin="5 2 5 2"/>
                    </StackPanel>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </DataGrid.GroupStyle>
    <DataGrid.Columns>
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel>
                        <DockPanel>
                            <Button BorderThickness="0" Content="Edit" Margin="3"
                                Command="{Binding Commands.Edit}"
                                CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                        </DockPanel>
                    </StackPanel>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn Header="ID" Binding="{Binding ID}" IsReadOnly="True"/>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" IsReadOnly="True"/>
        <DataGridTextColumn Header="City" Binding="{Binding City}" IsReadOnly="True"/>                    
    </DataGrid.Columns>
</DataGrid>

一切正常!但是，我不喜欢每个子组的蓝色行。我要实现的是下图中的分组样式:

对于每个子组，我希望“编辑”按钮和 ID 每个人只出现一次。我该怎么做？是否可能仅在 XAML 中或我应该删除代码隐藏中的冗余内容？

编辑
下面是一些测试数据:

public class Person
{
    public Person(bool active, int id, string name, string city)
    {
        Active = active;
        ID = id;
        Name = name;
        City = city;
    }

    public bool Active { get; set; }
    public int ID { get; set; }
    public string Name { get; set; }
    public string City { get; set; }
}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;

        var data = new ObservableCollection<Person>
        {
            new Person(true, 233, "Max", "New York"),
            new Person(true, 233, "Max", "Los Angeles"),
            new Person(true, 314, "John", "Paris"),
            new Person(true, 578, "Mary", "Vienna"),
            new Person(true, 782, "Susan", "Rome"),
            new Person(true, 782, "Susan", "Prague"),
            new Person(true, 782, "Susan", "San Francisco"),
            new Person(false, 151, "Henry", "Chicago")
        };

        DataSource = new ListCollectionView(data);
    }

    private ListCollectionView _dataSource;

    public ListCollectionView DataSource
    {
        get { return _dataSource; }
        set
        {
            _dataSource = value;
            _dataSource.GroupDescriptions.Add(new PropertyGroupDescription("Active"));
            _dataSource.GroupDescriptions.Add(new PropertyGroupDescription("ID"));
        }
    } 

Answer 1

我强烈建议将数据结构更改为:

public class Person {
    public bool Active { get; set; }
    public int ID { get; set; }
    public string Name { get; set; }

    public Collection Cities { get; set; }
}

否则你可以改变这个GroupStyle

<GroupStyle>
    <GroupStyle.HeaderTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Background="LightSteelBlue">
                <TextBlock Text="{Binding Name}" Foreground="White" Margin="5 2 5 2"/>
            </StackPanel>
        </DataTemplate>
    </GroupStyle.HeaderTemplate>
</GroupStyle>

到

<GroupStyle>
    <GroupStyle.ContainerStyle>
        <Style TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="EditButtonColumn" />
                        <ColumnDefinition SharedSizeGroup="IDColumn"  />
                        <ColumnDefinition SharedSizeGroup="NameColumn" />
                        <ColumnDefinition SharedSizeGroup="PresenterColumn" Width="*" />
                    </Grid.ColumnDefinitions>
                    <Button Grid.Column="0" BorderThickness="0" Content="Edit" Margin="3"
                CommandParameter="{Binding Path=Items[0]}" />
                    <TextBlock Grid.Column="1" Text="{Binding Path=Items[0].ID}" />
                    <TextBlock Grid.Column="2" Text="{Binding Path=Items[0].Name}" />

                    <ItemsPresenter Grid.Column="3" />
                </Grid>
                </ControlTemplate>
            </Setter.Value>
            </Setter>
        </Style>
    </GroupStyle.ContainerStyle>
</GroupStyle>

更改模板以满足您的需要