wpf - WPF DataGrid は複数のタイプを表示します

Question

WPF データグリッドに複数の種類のデータを表示する最良の方法は何ですか? たとえば、カテゴリと製品の場合:

| | 製品名 | 説明 | 価格 |
------------------------------------------------------
IT - カテゴリ
------------------------------------------------------
  モニター - カテゴリ
------------------------------------------------------
| | モニター 1 | ... | 100 $ |
| | モニター 2 | ... | 99 $ |
| | モニター 3 | ... | 120 $ |
------------------------------------------------------
  HDD - カテゴリ
------------------------------------------------------
| | HDD 1 | ... | 50 $ |
| | HDD 2 | ... | 45 $ |
------------------------------------------------------
エレクトロニクス部門
------------------------------------------------------
 ...

商品欄の上に表示したいのですが、カテゴリのテンプレートを変更したいです。セル テンプレート セレクターがあることは知っていますが、行全体にテンプレート セレクターを指定する方法はありますか? ありがとうございました。

Answer 1

データの を作成すると、コレクションでCollectionViewsource使用して、必要なプロパティですべてのデータをグループ化できます。PropertyGroupDescriptionGroupDescriptions

次に でDataGridを作成してGroupStyleを表示しTextBlockたり、 内のすべてのグループを分離するものを作成したりできますDataGrid。

これは、説明するよりも表示する方が簡単なため、完全に機能するデモです:)

Xaml:

<Window x:Class="WpfApplication20.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="505" Width="525" Name="UI">

    <Window.Resources>

        <!--Create CollectionViewSource and set the property you want to group by-->
        <CollectionViewSource x:Key="MyItems" Source="{Binding Items, ElementName=UI}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Category" />
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
    </Window.Resources>

    <Grid>
        <DataGrid ItemsSource="{Binding Source={StaticResource MyItems}}">
            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <!--Name property is the GroupName created by the CollectionViewSource-->
                                <TextBlock Text="{Binding Path=Name}" Margin="10,0,0,0" FontSize="18" FontWeight="Bold"/>
                            </StackPanel>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </DataGrid.GroupStyle>
        </DataGrid>
    </Grid>
</Window>

コード：

namespace WpfApplication20
{
    public partial class MainWindow : Window
    {
        private ObservableCollection<MyDataObject> _items = new ObservableCollection<MyDataObject>();

        public MainWindow()
        {
            InitializeComponent();
            Items.Add(new MyDataObject { Category = "IT", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "Monitors", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "Monitors", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "Monitors", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "HDD", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
            Items.Add(new MyDataObject { Category = "HDD", ProductName = "Stackoverflow", Description = "Group", Price = "Demo" });
        }

        public ObservableCollection<MyDataObject> Items
        {
            get { return _items; }
            set { _items = value; }
        }
    }

    public class MyDataObject
    {
        public string Category { get; set; }
        public string ProductName { get; set; }
        public string Description { get; set; }
        public string Price { get; set; }
    }
}

結果：

強化

GroupItemのテンプレートをオーバーライドしてDataGrid ContainerStyleを使用することをお勧めしますExpander。これにより、グループを展開して折りたたむことができます。

例：

    <DataGrid ItemsSource="{Binding Source={StaticResource MyItems}}" CanUserAddRows="False">
        <DataGrid.GroupStyle>
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Expander Name="expander">
                                        <Expander.Header>
                                            <StackPanel >
                                                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                                                <TextBlock Text="{Binding ItemCount, StringFormat={}Items: {0}}" FontSize="9" />
                                            </StackPanel>
                                        </Expander.Header>
                                        <ItemsPresenter />
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </DataGrid.GroupStyle>
    </DataGrid>

結果：