ExpanderView
昨日に引き続き、本日は 24 日目に紹介した Toolkit のコントロールから ExpanderView の利用方法をご紹介します。
ExpanderView はリストの内容を非表示化する事が出来るコントロールです。
OS 標準ではメーラで利用されています。
# 標準のメーラのグルーピングの仕様はイマイチよくわからないところがありますが。。。
階層構造のリスト自体はあまりメトロらしいレイアウトとは言えない気もしますが、必要な場合は ExpanderView を利用すると良いと思います。
ExpanderView の利用方法
<phone:PhoneApplicationPage.Resources> <!-- ListBox のアイテムとして ExpanderView を設定 --> <DataTemplate x:Key="ExpanderViewSampleListItemTemplate"> <tools:ExpanderView ItemsSource="{Binding Children}" Expander="{Binding ChildCount}" Header="{Binding ParentTitle}" ItemTemplate="{StaticResource ExpanderViewChildItemTemplate}" FontSize="{StaticResource PhoneFontSizeLarge}" ExpanderTemplate="{StaticResource ExpanderViewExpanderTemplate}" Margin="0,0,0,10" /> </DataTemplate> <!-- ExpanderView のアイテムテンプレート --> <DataTemplate x:Key="ExpanderViewChildItemTemplate"> <TextBlock TextWrapping="Wrap" Text="{Binding ChildTitle}" FontStyle="Italic" Foreground="{StaticResource PhoneAccentBrush}"/> </DataTemplate> <!-- ExpanderView の Expander テンプレート --> <DataTemplate x:Key="ExpanderViewExpanderTemplate"> <TextBlock TextWrapping="Wrap" Text="{Binding}" FontSize="{StaticResource PhoneFontSizeMedium}" Foreground="{StaticResource PhoneSubtleBrush}"/> </DataTemplate> <Style x:Key="ExpanderViewListItemContainerStyle" TargetType="ListBoxItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> </Style> </phone:PhoneApplicationPage.Resources> <ListBox ItemTemplate="{StaticResource ExpanderViewSampleListItemTemplate}" ItemsSource="{Binding Items}" ItemContainerStyle="{StaticResource ExpanderViewListItemContainerStyle}" />
- Header プロパティ
- コントロールのヘッダを指定します。
- HeaderTemplate プロパティ
- コントロールのヘッダのテンプレートを指定します。
- Expander プロパティ
- Expander ブロックの内容を指定します。
- ExpanderTemplate プロパティ
- Expander ブロックのテンプレートを指定します。
- ItemTemplate プロパティ
- リストアイテムのテンプレートを指定します。
- IsNonExpandable
- このプロパティに True を設定すると、タップしてもリスト内容は展開されなくなります。
- NonExpandableHeader
- IsNonExpandable が True の際のコントロールのヘッダを指定します。
- NonExpandableHeaderTemplate プロパティ
- IsNonExpandable が True の際のコントロールのヘッダのテンプレートを指定します。
- IsExpanded
- リストの内容が表示されているかどうかを示します。
- HasItems
- リストアイテムが 1 件以上あるかどうかを示します。