テンプレートの選択

Metro Style App

　GridView や ListView 等に項目を表示する時にどのように表示するかテンプレートで指定する事ができます（ItemTemplate）。
　一般的にはコントロールに対して一つのテンプレートを指定しますが、何らかの情報を元にテンプレートを切り替えて適用させる事ができます。
　切り替え動作を確認するために、新しいプロジェクトとして"分割アプリケーション"を作成して、このプロジェクトを変更して動作を見てみます。

　テンプレートを切り替えるためには DataTemplateSelector から派生したクラスを用意します。
　項目毎にテンプレートを決定するために SelectTemplateCore メソッドが呼び出されますので、条件に応じて使用する DataTemplate を返します。

　"分割アプリケーション"の初期状態では GridView に、SampleDataGroup のコレクションが渡されますので、SampleDataGroup の UniqueId をチェックして、UniqueId に '2' が含まれている場合だけ別のテンプレートを使用するようなクラスを作成しました。

public class CustomDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate StandardTemplate { get; set; }
    public DataTemplate CustomTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        var group = item as SampleDataGroup;
        if (group != null)
        {
            if (group.UniqueId.IndexOf('2') != -1)
            {
                return CustomTemplate;
            }
            else
            {
                return StandardTemplate;
            }
        }
        else
        {
            return base.SelectTemplateCore(item, container);
        }
    }
}

　このテンプレートを xaml で使用するように指定します。

　まず、 に通常の ItemTemplate と切り分けるための独自テンプレートを用意します。用意したのは、Standard250x250ItemTemplate の一部を変更しただけの物です（StackPanel の VerticalAlignment を Bottom から Top に変更しました）。
　さらに、作成した CustomDataTemplateSelector を定義し、プロパティにそれぞれ使用するテンプレートを設定します。

<DataTemplate x:Key="Custom250x250ItemTemplate">
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border Background="{StaticResource ListViewItemPlaceholderRectBrush}">
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
        </Border>
        <StackPanel VerticalAlignment="Top" Background="{StaticResource ListViewItemOverlayBackgroundBrush}">
            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
            <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryTextBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
        </StackPanel>
    </Grid>
</DataTemplate>

<local:CustomDataTemplateSelector
    x:Key="customSelector"
    StandardTemplate="{StaticResource Standard250x250ItemTemplate}"
    CustomTemplate="{StaticResource Custom250x250ItemTemplate}" />

　最後に、GridView に TemplateSelector を指定します（ItemTemplate の指定を削除して、ItemTemplateSelector の指定を追加します）。

ItemTemplateSelector="{StaticResource customSelector}"

　全て変更した後で実行すると、以下のように Group-2 だけ違うテンプレートが適用されます。