2013年01月15日

[C# WPF]アイコンリストをグループ表示する

前回アイコンリストを作りましたが、
今回はこのアイコンリストをグループ表示してみます。

サンプルです。

[xaml]

<Window.Resources>
<x:Array x:Key="ListItems" Type="local:ListItem">
<local:ListItem Name="Item1" GroupName="Group1"/>
<local:ListItem Name="Item2" GroupName="Group1"/>
<local:ListItem Name="Item3" GroupName="Group1"/>
<local:ListItem Name="Item4" GroupName="Group2"/>
<local:ListItem Name="Item5" GroupName="Group2"/>
</x:Array>
<CollectionViewSource x:Key="GroupItems" Source="{StaticResource ListItems}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="GroupName"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<GridSplitter Width="3" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
<ListView Grid.Column="1" ItemsSource="{Binding Source={StaticResource GroupItems}}">
<ListView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}" Width="50" Height="50" Margin="5"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ListView}}"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<Expander Header="{Binding}">
<Expander.Content>
<ItemsPresenter/>
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</Grid>


[ソース]

public class ListItem
{
public string GroupName { get; set; }
public string Name { get; set; }

public ListItem()
{
}
}


ソースでは前回のサンプルのListItemクラスにGroupNameを追加しています。

xamlではListViewのItemsSourceをCollectionViewSourceにしています。
CollectionViewSourceはSourceのCollectionをグループ分けする事ができます。
グループ化の為のキーをPropertyGroupDescriptionのPropertyNameに指定します。

ListViewではGroupStyleを設定しています。
グループ化したCollectionを表示するのにExpanderを指定しています。

実行結果は以下のようになります。
2.jpg

展開すると以下のようになります。
1.jpg


posted by cw at 22:00| Comment(0) | TrackBack(0) | Tips | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。