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

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

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

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

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

回答:

回答№1は4

作成する場合 CollectionViewsource あなたが使用できるあなたのデータのために PropertyGroupDescription コレクションで GroupDescriptions 必要なプロパティですべてのデータをグループ化します。

その後、 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>

結果:

ここに画像の説明を入力