C1Tileコントロールの概要
C1Tile、C1SlideTileコントロールの概要については、前回の記事「コンテンツをスライド表示するWPFアプリケーションの作成」を参照してください。
今回は前回と同じテクニックを用いて、ContentTemplate/BackContentTemplateプロパティ内にImageコントロールを配置し画像を表示します。
さらに、画像をクリックすると別ウィンドウで拡大表示する機能を追加します。
GUIの作成
では、さっそくアプリケーションを作成していきます。
今回作成するアプリケーションは、C1TileコントロールとC1SlideTileコントロールを1つずつ使用し、画像を入れ替える表示を行うために、Imageコントロールを使用します。
使用するコントロールは、C1Tile、C1SlideTile、Image、TextBlockの4種類のコントロールです。
C1Tileコントロールの作成
最初に、C1Tileコントロールの配置を行います。
まずは、記事冒頭で紹介しているように、C1.WPF.4/C1.WPF.Tile.4への参照を設定してください。
① ツールボックスからC1Tileコントロールをウィンドウにドラッグ＆ドロップします。
② XAMLの画面に移り、XAMLを修正します。まず、Contentプロパティの値が「"{x:Null}"」と設定されていますので、これをContent="この文字"に変更します。
また、次のプロパティを設定します。
| プロパティ | 設定値 |
|---|---|
| HorizontalContentAlignment | Stretch |
| VerticalContentAlignment | Stretch |
| Padding | 0 |
<Grid Height="190" Width="880">
<c1:C1Tile c1:C1TileService.PointerDownAnimation="True" Content="この文字" Height="150" HorizontalAlignment="Left"
Margin="12,12,0,0" Name="c1Tile1" VerticalAlignment="Top" Width="230"
FontSize="16" Background="White" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Padding="0">
</c1:C1Tile>
</Grid>
③ ContentTemplate/BackContentTemplateプロパティを作成し、TextBlockコントロールで文字列が切り替わるアニメーションを作成します。
<c1:C1Tile.ContentTemplate>
<DataTemplate>
<Border Background="BurlyWood" >
<TextBlock Text="フォトギャラリー" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</c1:C1Tile.ContentTemplate>
<c1:C1Tile.BackContentTemplate>
<DataTemplate>
<Border Background="DarkSeaGreen" >
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="画像をクリックすると" Foreground="White" HorizontalAlignment="Center"/>
<TextBlock Text="拡大表示します" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>
</Border>
</DataTemplate>
</c1:C1Tile.BackContentTemplate>
C1SlideTileコントロールの作成
次に、C1SlideTileコントロールを作成します。このコントロールには、ContentTemplate/BackContentTemplateプロパティ内にグリッドを用いて、Imageコントロールを3つずつ配置します。
① ツールボックスからC1SlideTileコントロールをグリッド内にドラッグ＆ドロップします。
ここでも、Contentプロパティは「"{x:Null}"」とnullになっていますので、プロパティ値を「"イメージギャラリー"」に変更します。
この値を設定しておかないと、アニメーションは正常に動作しません。
Content="イメージギャラリー"
また、C1Tileコントロールと同様に次のプロパティを設定します。
| プロパティ | 設定値 |
|---|---|
| HorizontalContentAlignment | Stretch |
| VerticalContentAlignment | Stretch |
| Padding | 0 |
<c1:C1SlideTile c1:C1TileService.PointerDownAnimation="True" Content="イメージギャラリー" Height="150" HorizontalAlignment="Left"
Margin="252,12,0,0" Name="c1SlideTile1" VerticalAlignment="Top" Width="600" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" Padding="0" >
</c1:C1SlideTile>
