4

データ グリッドを使用する必要があり、データは次のようになります: firstName、lastName、street、zip、city、country、image

私のデータグリッドでは、firstName、lastName、および image のみを表示しますが、都市ごとにグループ化する必要があります。

更新 以下のコードはグループ化された項目を示していますが、表示したい 3 つの項目 (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>
4

1 に答える 1

7

グループ化の適切な方法は、を使用することですCollectionView(詳細については、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>

結果は次のとおりです。

結果

DataGrid グループのスタイル設定の詳細については、この投稿を確認してください: WPF DataGrid コントロール > グループ化

于 2012-04-23T16:45:56.757 に答える