WPF DataGrid GroupStyle

时间:2014-03-27 11:25:32

标签: c# wpf xaml grouping wpfdatagrid

我在WPF中有以下DataGrid两个组 第一组是bool标志,表示一个人是否处于活动/不活动状态 第二组(或子组)是每个人的ID。 每个人都可以拥有多个城市,因此可以对ID进行分组,因为每个人在DataGrid中都会显示多个。 Table persons-cities

这是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>

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

Table persons-cities

对于每个子组,我希望编辑按钮和ID每人只出现一次。 我该怎么做?是否可以仅在XAML中使用,还是应该删除代码隐藏中的reduntant内容?

修改
这里有一些测试数据:

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"));
        }
    } 

1 个答案:

答案 0 :(得分:5)

高度建议将数据结构更改为:

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>

更改模板以满足您的需求