画像をスライド表示するWPFアプリケーションの作成

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

　④ ContentTemplate/BackContentTemplateプロパティを作成し、その中にグリッドを作成します。グリッドは列を3つ作成しておきます。

<c1:C1SlideTile.ContentTemplate>
     <DataTemplate>
        <Border>
            <Grid HorizontalAlignment="Left" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="200"  />
                    <ColumnDefinition  Width="200" />
                    <ColumnDefinition  Width="200" />
                </Grid.ColumnDefinitions>
            </Grid>
        </Border>
    </DataTemplate>
</c1:C1SlideTile.ContentTemplate>

<c1:C1Tile.BackContentTemplate>
    <DataTemplate>
        <Border>
            <Grid HorizontalAlignment="Left" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="200"  />
                    <ColumnDefinition  Width="200" />
                    <ColumnDefinition  Width="200" />
                </Grid.ColumnDefinitions>
            </Grid>
        </Border>
    </DataTemplate>
</c1:C1Tile.BackContentTemplate>

　⑤ Imageコントロールを配置し、C1SlideTileコントロール内に収まる形にします。そして、サンプル画像「flower-1.jpg」を設定します。プロジェクト内に「Images」フォルダが作成されそこに画像が格納されると共に、ImageコントロールのSourceプロパティにも設定されます。

<Image Height="150" HorizontalAlignment="Left" Margin="252,12,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" 
               Width="200" Source="/Tile_img_WPF_cs;component/Images/flower-1.jpg" />

　⑥ このImage要素をContentTemplateプロパティの<Grid>要素内に移動します。そして、グリッドの最初の列を指定します。

Grid.Column="0"

　⑦ イベントハンドラ「MouseDown」を作成し、名称を「Image_MouseDown」にします。このイベントハンドラはすべてのImageコントロールに共通して設定し、Imageコントロール上でマウスボタンを押した時点で呼び出され、その画像を別ウィンドウで表示する処理を実行します。

MouseDown="Image_MouseDown"

<Image Height="150" Grid.Column="0" HorizontalAlignment="Left" Name="Image1" Stretch="Fill" VerticalAlignment="Top" 
       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-1.jpg" MouseDown="Image_MouseDown" />

　⑧ 同様の方法で、あと2つImageコントロールを作成しグリッド内に移動します。

<c1:C1SlideTile.ContentTemplate>
    <DataTemplate>
        <Border>
            <Grid HorizontalAlignment="Left" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="200"  />
                    <ColumnDefinition  Width="200" />
                    <ColumnDefinition  Width="200" />
                </Grid.ColumnDefinitions>
                <Image Height="150" Grid.Column="0" HorizontalAlignment="Left" Name="Image1" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-1.jpg" MouseDown="Image_MouseDown" />
                <Image Height="150" Grid.Column="1" HorizontalAlignment="Left" Name="Image2" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-2.jpg" MouseDown="Image_MouseDown" />
                <Image Height="150" Grid.Column="2" HorizontalAlignment="Left" Name="Image3" Stretch="Fill" VerticalAlignment="Top"
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-3.jpg" MouseDown="Image_MouseDown" />
            </Grid>
        </Border>
    </DataTemplate>
</c1:C1SlideTile.ContentTemplate>

　⑨ 続いて、同様の方法でBackContentTemplateプロパティにもグリッドを設定し、その中にImageコントロールを追加します。

　Imageコントロールは、グリッドの列位置を指定しMouseDownイベントハンドラを作成しておきます。

<c1:C1Tile.BackContentTemplate>
    <DataTemplate>
        <Border>
            <Grid HorizontalAlignment="Left" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="200"  />
                    <ColumnDefinition  Width="200" />
                    <ColumnDefinition  Width="200" />
                </Grid.ColumnDefinitions>
                <Image Height="150" Grid.Column="0" HorizontalAlignment="Left" Name="Image4" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-4.jpg" MouseDown="Image_MouseDown" />
                <Image Height="150" Grid.Column="1" HorizontalAlignment="Left" Name="Image5" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-5.jpg" MouseDown="Image_MouseDown" />
                <Image Height="150" Grid.Column="2" HorizontalAlignment="Left" Name="Image6" Stretch="Fill" VerticalAlignment="Top" 
                       Width="200" Source="/Tile_img_WPF_vb;component/Images/flower-6.jpg" MouseDown="Image_MouseDown" />
            </Grid>
        </Border>
    </DataTemplate>
</c1:C1Tile.BackContentTemplate>

　⑩ コードウィンドウを表示し、MouseDownイベントハンドラを作成します。この時点ではまだ中身はありませんが、このイベントハンドラを作成しておかないとアプリケーションの動作確認ができませんので、中身は空のままイベントハンドラだけ作成しておきます。

Visual Basic

Private Sub Image_MouseDown(sender As Image, e As System.Windows.Input.MouseButtonEventArgs)
End Sub

C#

private void Image_MouseDown(object sender, MouseButtonEventArgs e)
{
}

　⑪ ここで一度アプリケーションを実行し、タイルのアニメーションが動作することを確認します。