5. コンテントにイメージを使用する
コンテントはチェックマークの右側に表示されれる部分です。通常テキストが表示されますがイメージを表示することもできます。
下記はテキストの代わりにイメージを設定する例です。CheckBoxの要素にImage要素を入れてイメージを表示しています。
<StackPanel Orientation="Vertical">
<TextBlock Text="好きな果物を選択してください" FontSize="14" />
<StackPanel Orientation="Horizontal">
<CheckBox Name="CheckBox1" VerticalAlignment="Top" Margin="10,0,0,0"
Height="Auto" Width="Auto">
<Image Source="/Images/Apple.png" Width="100" Height="100" Stretch="Fill" />
</CheckBox>
<CheckBox Name="CheckBox2" VerticalAlignment="Top"
Height="Auto" Width="Auto">
<Image Source="/Images/Banana.png" Width="100" Height="100" Stretch="Fill" />
</CheckBox>
<CheckBox Name="CheckBox3" VerticalAlignment="Top"
Height="Auto" Width="Auto">
<Image Source="/Images/Orange.png" Width="100" Height="100" Stretch="Fill" />
</CheckBox>
</StackPanel>
</StackPanel>
コンテントにイメージを表示するにはCheckBox要素にImage要素を使用する。
6. チェックマークにイメージを使用する
チェックマークにイメージを使用するには、CheckBoxコントロールのControlTempleateを変更します。
WPFとSilverlightでは書き方が異なります。最初にWPFの方を説明します。
WPFではBulletDecorator要素でチェックマークのイメージを指定します。また、ContentPresenter要素を入れることで、チェックマークの隣に表示されるコンテント部分を作成します。BulletDecoratorで設定したイメージはチェック状態オフの時のイメージになります。
チェック状態がオンおよび未確定のイメージは、ControlTemplate.Triggers要素のTrigger要素で設定します。
Triggerはアクションに対応するプロパティ値を設定するためのもので、チェック状態が変更された（IsCheckedがTrueやNullになったとき）というアクションに対するイメージを設定します。
以上を踏まえて、チェックマークにイメージを設定した例を下記に示します。オンのときは○、オフのときは×、未確定のときは△のイメージを表示します。
<Window.Resources>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<BulletDecorator>
<BulletDecorator.Bullet>
<!--オフ状態のイメージ-->
<Image Name="TickImage" Source="Images\Christcross.png" Grid.Column="0"/>
</BulletDecorator.Bullet>
<ContentPresenter VerticalAlignment="Center" Grid.Column="1"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<!--オン状態のイメージ-->
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="TickImage" Property="Source" Value="Images\Circle.png" />
</Trigger>
<!--未確定状態のイメージ-->
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter TargetName="TickImage" Property="Source" Value="Images\Triangle.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<CheckBox IsThreeState="True" Name="CheckBox1" VerticalAlignment="Top"
Content="CheckBox1" IsChecked="True" />
<CheckBox IsThreeState="True" Name="CheckBox2" VerticalAlignment="Top"
Content="CheckBox2" IsChecked="False" />
<CheckBox IsThreeState="True" Name="CheckBox3" VerticalAlignment="Top"
Content="CheckBox3" IsChecked="{x:Null}" />
</Grid>
次にSilverlightの説明をします。
SilverlightもCheckBoxコントロールのControlTemplateを変更します。ただし、こちらはVisualStateManager要素を使用します。
最初に、ControlTemplate内にGridを配置して、チェックマーク部分とコンテント部分とに分かれるように列を2つ作ります。
次に、VisualStateManager.VisualStateGropups要素とStoryboard要素でコントロールの外観がどのように変化するのかを設定します。
ここでは、チェックの状態がオン/オフ/未確定のときのそれぞれのイメージ不透明度が変わるように設定しています。これにより各チェック状態の時にイメージが切り替わるようにしています。
下記にSilverlightでのXAML例を示します。
<Grid.Resources>
<Style x:Key="CheckBoxStyle" TargetType="CheckBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="CheckIcon"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="UncheckIcon"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="IndeterminateIcon"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<Image x:Name="CheckIcon"
Source="../Images/Circle.png" Opacity="0" Stretch="Fill" />
<Image x:Name="UncheckIcon"
Source="../Images/Christcross.png" Opacity="0" Stretch="Fill" />
<Image x:Name="IndeterminateIcon"
Source="../Images/Triangle.png" Opacity="0" Stretch="Fill" />
</Grid>
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Grid.Column="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<sdk:Label Content="06.チェックマークにイメージを使用する" />
<CheckBox Content="CheckBox" Name="CheckBox1" Style="{StaticResource CheckBoxStyle}" IsThreeState="True">
<CheckBox.RenderTransform>
<ScaleTransform CenterX=".5" CenterY=".5" ScaleX="1.5" ScaleY="1.5"/>
</CheckBox.RenderTransform>
</CheckBox>
WPFでチェックマークにイメージを使用する場合はBulletDecorator要素とTrigger要素を使用する。
SilverlightはVisualStateManagerとStoryBoard要素を使用する。
