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

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

xamTilesControlのパネル設定について

　xamTilesControlのパネル表示の設定については以下のプロパティを使用します。

パネル表示のプロパティ設定

プロパティ名	概要
NormalModeSettings	通常状態のタイルの設定
MaximizedModeSettings	最大化状態のタイルの設定

　例として、通常のタイル表示を3列に固定する場合は下記のようになります。

<!-- 通常状態のタイル設定 -->
<igTiles:XamTilesControl.NormalModeSettings>
    <igTiles:NormalModeSettings MaxColumns="3" /> 
</igTiles:XamTilesControl.NormalModeSettings>

図11　カスタマイズを行ったxamTilesControl

　全てのXAMLは下記のようになります。

<Window
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:igTiles=http://infragistics.com/Tiles
    x:Class="NAXamTilesControls_CS.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Grid x:Name="LayoutRoot" >
        <igTiles:XamTilesControl x:Name="xamTilesControl1" 
                                 DataContext="{StaticResource SampleDataSource}"
                                 ItemsSource="{Binding Path=Collection}"
                                 HeaderPath="Name"
                                 MaximizedTileLimit="3">
            <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>
            <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="電d話b番O号?" 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>
            <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>
                <!-- 通常状態のタイル設定 -->
                <igTiles:XamTilesControl.NormalModeSettings>
                    <igTiles:NormalModeSettings MaxColumns="3" />
                </igTiles:XamTilesControl.NormalModeSettings>
        </igTiles:XamTilesControl>
    </Grid>
</Window>

まとめ

　今回はVisual Studio 2010 RCとExpression Blend 4 Betaを用いてリッチなレイアウトを持つWPFアプリケーションを作成しました。主にVisual Studio 2010 RCのXAMLコードエディタを使用しましたが、前回同様にExpression Blendを使用して外観を確認しながらテンプレートを作成することも可能です。

　近い将来リリースされるVisual Studio 2010ではWPFをはじめとしたXAMLプラットフォーム開発のサポートが拡充されているのでこれを機に始めてみてはいかがでしょうか。