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>
結果: