Question

我需要使用数据网格，我的数据如下所示： firstName，lastName，street，zip，city，country，image

在我的数据网格中，我只会显示firstName，lastName和image，但必须在city之后进行分组。

更新下面的代码显示了分组项目，但我想要显示的三个项目（firstName，lastName，image）后面跟着每行的所有项目（firstName，lastName，street，zip，city，country，image）。我想我必须更换<ItemsPresenter />，但这只是猜测..

任何人都可以帮助我，我无法自己管理......

<Grid>
    <DataGrid ItemsSource="{Binding GroupedMovables}">
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="Preview" Width="SizeToCells" IsReadOnly="True">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Name="Preview" Height="20" Source="{Binding Image}" HorizontalAlignment="Center" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTextColumn Header="first name" Binding="{Binding FirstName}" />
            <DataGridTextColumn Header="last name" Binding="{Binding LastName}" />
        </DataGrid.Columns>
        <DataGrid.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Path=City}" FontWeight="Bold" Padding="3"/>
                        </StackPanel>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Expander>
                                        <Expander.Header>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Path=Name}" />
                                                <TextBlock Text="{Binding Path=ItemCount}" Margin="8,0,4,0"/>
                                                <TextBlock Text="Element(s)"/>
                                            </StackPanel>
                                        </Expander.Header>
                                        <ItemsPresenter />
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </DataGrid.GroupStyle>
    </DataGrid>
</Grid>

Answer 1

分组的正确方法是使用CollectionView（有关详情：How to Navigate, Group, Sort and Filter Data in WPF）。以下是我为您创建的一个简单的概念证明应用程序，向您展示如何使用CollectionView对数据进行分组：

此类表示DataGrid中的一行：

public class Employee
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Street { get; set; }
    public string ZipCode { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Image { get; set; }
}

MaindWindow代码背后：

    /// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // Create some test data
        var employees =
            new ObservableCollection<Employee>
                {
                    new Employee {FirstName = "Mohammed", LastName = "Fadil", Street = "A B C", ZipCode = "123", City = "London", Country = "UK", Image = "/Images/globe.png"},
                    new Employee {FirstName = "Siraj", LastName = "Hussam", Street = "A B C", ZipCode = "123", City = "London", Country = "UK", Image = "/Images/globe.png"},
                    new Employee {FirstName = "Ayman", LastName = "Tariq", Street = "A B C", ZipCode = "123", City = "London", Country = "UK", Image = "/Images/globe.png"},
                    new Employee {FirstName = "Khalid", LastName = "Sheik", Street = "X Y Z", ZipCode = "234", City = "Paris", Country = "France", Image = "/Images/monitor.png"},
                    new Employee {FirstName = "Hassan", LastName = "Ali", Street = "Q W E R", ZipCode = "544", City = "NY", Country = "USA", Image = "/Images/star.png"},
                    new Employee {FirstName = "Ehsan", LastName = "Mahmoud", Street = "A B C", ZipCode = "123", City = "London", Country = "UK", Image = "/Images/globe.png"},
                    new Employee {FirstName = "Idris", LastName = "Sheik", Street = "X Y Z", ZipCode = "234", City = "Paris", Country = "France", Image = "/Images/monitor.png"},
                    new Employee {FirstName = "Khalil", LastName = "Ali", Street = "Q W E R", ZipCode = "544", City = "NY", Country = "USA", Image = "/Images/star.png"}
                };

        ICollectionView employeesView =
            CollectionViewSource.GetDefaultView(employees);

        // Set the grouping by city proprty
        employeesView.GroupDescriptions.Add(new PropertyGroupDescription("City"));

        // Set the view as the DataContext for the DataGrid
        EmployeesDataGrid.DataContext = employeesView;
    }
}

DataGrid XAML代码：

    <DataGrid Name="EmployeesDataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding FirstName}" Header="First Name"/>
            <DataGridTextColumn Binding="{Binding LastName}" Header="Last Name"/>
            <DataGridTemplateColumn Header="Image">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Image}"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>

        <DataGrid.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Path=City}" FontWeight="Bold" Padding="3"/>
                        </StackPanel>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Expander>
                                        <Expander.Header>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Path=Name}" />
                                                <TextBlock Text="{Binding Path=ItemCount}" Margin="8,0,4,0"/>
                                                <TextBlock Text="Element(s)"/>
                                            </StackPanel>
                                        </Expander.Header>
                                        <ItemsPresenter />
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </DataGrid.GroupStyle>

    </DataGrid>

结果是：

Result

有关设置DataGrid组样式的详细信息，请查看以下帖子：WPF DataGrid Control > Grouping

手动对DataGrid项目进行分组

1 个答案: