Visual Studio 2010とWPFでデータをタイル表示するアプリケーションを作成しよう

xamTilesControlによるデータのタイル表示

xamTilesControlのスタイリング・テンプレート作成

　データをバインドした場合はそれぞれのレコードが [Tile] として作成されます。xamTilesControlにおいて以下のテンプレートを定義することで [Tile] の外観をカスタマイズ可能です。

　今回はItemTemplate、ItemTemplateMaximized、ItemTemplateMinimizedExpandedを設定します。

定義するテンプレート一覧

テンプレート名	概要
ItemTemplate	通常状態のテンプレート
ItemTemplateMaximized	最大化状態のテンプレート
ItemTemplateMinimized	最小化状態のテンプレート
ItemTemplateMinimizedExpanded	最小化時に展開ボタンが押された場合のテンプレート
ItemHeaderTemplate	TilesPanelのヘッダーテンプレート

テンプレートの設定

　今回はPhoto、Nameを通常時に表示するようにするため、XamTilesControl.ItemTemplateを次のように設定します。

<igTiles:XamTilesControl.ItemTemplate>
    <!-通常のテンプレート -->
    <DataTemplate >
        <StackPanel Width="120" Height="100">
            <Image Height="80" Width="80" Source="{Binding Photo}"/>
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Name}" />
        </StackPanel>
    </DataTemplate>
</igTiles:XamTilesControl.ItemTemplate>

図8　通常状態のテンプレート

　次に最大化表示させる場合のテンプレートは前回の記事のものをコピーし、xamTilesControl.ItemTemplateMaximizedを設定します。

<igTiles:XamTilesControl.ItemTemplateMaximized>
    <!--最大化時のテンプレート-->
    <DataTemplate >
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="120"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Image Source="{Binding Photo}"/>
            <TextBlock VerticalAlignment="Center" Text="名前"  Grid.Row="1" />
            <TextBlock VerticalAlignment="Center" Text="住所"  Grid.Row="2" />
            <TextBlock VerticalAlignment="Center" Text="会社名"  Grid.Row="3" />
            <TextBlock VerticalAlignment="Center" Text="E-mail"  Grid.Row="4" />
            <TextBlock VerticalAlignment="Center" Text="電話番号"  Grid.Row="5" />
            <TextBlock VerticalAlignment="Center" Text="{Binding Name}" Grid.Row="1" Grid.Column="1" />
            <TextBlock VerticalAlignment="Center" Text="{Binding Address}"  Grid.Row="2" Grid.Column="1" />
            <TextBlock VerticalAlignment="Center" Text="{Binding CompanyName}" Grid.Row="3" Grid.Column="1" />
            <TextBlock VerticalAlignment="Center" Text="{Binding Email}" Grid.Row="4" Grid.Column="1" />
            <TextBlock VerticalAlignment="Center" Text="{Binding PhoneNumber}"  Grid.Row="5" Grid.Column="1" />
        </Grid>
    </DataTemplate>
</igTiles:XamTilesControl.ItemTemplateMaximized>

　実行結果は図9のようになります。

図9　最大化時の表示

　現在、最小化時にタイルを展開できる機能が有効になっており、ここに電話番号並びに、E-mailアドレスを表示させるため、XamTilesControl.ItemTemplateMinimizedExpandedを定義します。

<igTiles:XamTilesControl.ItemTemplateMinimizedExpanded>
    <!-- 最小化かつ展開されている場合のテンプレート -->
    <DataTemplate>
        <StackPanel>
            <TextBlock Text="電話番号" />
            <TextBlock Text="{Binding Path=PhoneNumber}" />
            <TextBlock Text="Eメールアドレス" />
            <TextBlock Text="{Binding Path=Email}" />
        </StackPanel>
    </DataTemplate>
</igTiles:XamTilesControl.ItemTemplateMinimizedExpanded>

図10　最小化時の展開表示が変更されている

　最後に状態を問わず、名前を表示するためテンプレートではなく、XamTilesControl.HeaderPathを定義します。

<igTiles:XamTilesControl x:Name="xamTilesControl1" 
                         DataContext="{StaticResource SampleDataSource}"
                         ItemsSource="{Binding Path=Collection}"
                         HeaderPath="Name">