WPFのComboBoxでは、グループ毎にヘッダーを付けてリストを表示させる機能がある。
こんな感じ↓
ヘッダーの表示をカスタマイズする為ComboBox.GroupStyleを定義する。
GroupStyle.HeaderTemplateへ表示したいコントロールを配置する。
<ComboBox x:Name="comboBox">
<ComboBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" Background="Aqua"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ComboBox.GroupStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding Title}"/>
</WrapPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
※HeaderTemplateでバインドするフィールドはNameになる
※ComboBoxのItemsSourceにはListCollectionViewクラスをセットするが、ヘッダー欄はListCollectionViewのGroupsプロパティが参照される
※GroupsプロパティはCollectionViewGroup型のリストでCollectionViewGroupのNameプロパティをバインドするという意味になる
バインドするデータは以下のように、ListCollectionViewとして作成し、
GroupDescriptionsプロパティへグループ化したい項目をセットしている。
public partial class MainWindow : Window
{
public class ComboItem
{
public string Title { get; set; }
public string Category { get; set; }
}
public MainWindow()
{
InitializeComponent();
List<ComboItem> items = new List<ComboItem>();
items.Add(new ComboItem() { Title = "ichiro", Category = "CategoryA" });
items.Add(new ComboItem() { Title = "jiro", Category = "CategoryA" });
items.Add(new ComboItem() { Title = "saburo", Category = "CategoryA" });
items.Add(new ComboItem() { Title = "momotaro", Category = "CategoryB" });
items.Add(new ComboItem() { Title = "kintaro", Category = "CategoryB" });
ListCollectionView view = new ListCollectionView(items);
view.GroupDescriptions.Add(new PropertyGroupDescription("Category"));
this.comboBox.ItemsSource = view;
}
}


コメント
コメントを投稿