雑記 - otherwise

最近はDQ10しかやっていないダメ技術者がちまちまと綴る雑記帳

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 件以上あるかどうかを示します。