5. コンテントにイメージを使用する
コンテントはチェックマークの右側に表示されれる部分です。 通常テキストが表示されますがイメージを表示することもできます。
下記はテキストの代わりにイメージを設定する例です。RadioButtonの要素にImage要素を入れてイメージを表示しています。
<StackPanel Orientation="Vertical">
<TextBlock Text="好きな果物を選択してください" FontSize="14" />
<StackPanel Orientation="Horizontal">
<RadioButton Height="100" Name="RadioButton1">
<Image Source="/Images/Apple.png" Width="100" Height="100" Stretch="Fill" />
</RadioButton>
<RadioButton Height="100" Name="RadioButton2">
<Image Source="/Images/Orange.png" Width="100" Height="100" Stretch="Fill" />
</RadioButton>
<RadioButton Height="100" Name="RadioButton3">
<Image Source="/Images/Banana.png" Width="100"Height="100" Stretch="Fill" />
</RadioButton>
</StackPanel>
</StackPanel>
コンテントにイメージを表示するにはRadioButton要素にImage要素を使用する。
6. チェックマークにイメージを表示する
チェックマークにイメージを使用するには、RadioButtonコントロールのControlTempleateを変更します。
WPFとSilverlightでは書き方が異なります。最初にWPFの方を説明します。
WPFではBulletDecorator要素で チェックマークのイメージを指定します。また、ContentPresenter要素を入れることで、チェックマークの隣に表示されるコンテント部分を作成します。
BulletDecoreatorで設定したイメージは、チェック状態オンの時のイメージになります。
チェック状態がオフのイメージは、ControlTemplate.Triggers要素のTrigger要素で設定します。Triggerはアクションに対応するプロパティ値を設定するためのもので、チェック状態が変更された（IsCheckedがTrueやFalseになったとき）というアクションに対するイメージを設定します。
以上を踏まえて、チェックマークにイメージを設定した例を下記に示します。オンのときは星マーク、オフのときはVisibility属性をHIddenに設定してイメージを隠しています。
<Window.Resources>
<Style TargetType="{x:Type RadioButton}" >
<Setter Property="Background" Value="Blue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<BulletDecorator Background="Transparent">
<!-- オン状態のイメージ -->
<BulletDecorator.Bullet>
<Image Source="Images/Star.png"
x:Name="CheckMark" Grid.Column="0"/>
</BulletDecorator.Bullet>
<ContentPresenter Grid.Column="1"
VerticalAlignment="Center" Margin="5,0,0,0"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<!-- オフ状態のイメージ VisibilityをHiddenにしてイメージを隠す-->
<Trigger Property="IsChecked" Value="false">
<Setter TargetName="CheckMark"
Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Border>
<StackPanel>
<TextBlock>好きな果物を1つ選んでください。</TextBlock>
<RadioButton Content="リンゴ" Name="RadioButton1" />
<RadioButton Content="バナナ" Name="RadioButton2" />
<RadioButton Content="ミカン" Name="RadioButton3" />
</StackPanel>
</Border>
</Grid>
次にSilverlightの説明をします。
SilverlightもRadioButtonコントロールのControlTemplateを変更します。ただし、こちらはVisualStateManager要素を使用します。
最初に、ControlTemplate内にGridを配置して、チェックマーク部分とコンテント部分とに分かれるように列を2つ作ります。
次に、VisualStateManager.VisualStateGropups要素とStoryboard要素でコントロールの外観がどのように変化するのかを設定します。
ここでは、チェックの状態がオン/オフのときのそれぞれのイメージ不透明度が変わるように設定しています。オンの時には星形のイメージを、オフの時には透明な図形を表示してイメージが切り替わるようにしています。
下記にSilverlightでのXAML例を示します。
<Grid x:Name="LayoutRoot">
<Grid.Resources>
<Style x:Key="RadioButtonStyle1" TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16"/>
<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>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
<!-- Checked のときは星形のイメージを表示 -->
<Image x:Name="CheckIcon" Source="../Images/Star.png" />
<!-- Uncheckedのときは透明な円を表示 -->
<Ellipse x:Name="UncheckIcon" Fill="Transparent" Height="4" Opacity="0" Width="4"/>
</Grid>
<ContentPresenter x:Name="contentPresenter" Grid.Column="1"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<sdk:Label Content="06.チェックマークにイメージを使用する" />
<RadioButton Content="リンゴ" Name="RadioButton1"
Style="{StaticResource RadioButtonStyle1}" />
<RadioButton Content="バナナ" Name="RadioButton2"
Style="{StaticResource RadioButtonStyle1}" />
<RadioButton Content="ミカン" Name="RadioButton3"
Style="{StaticResource RadioButtonStyle1}" />
</Grid>
WPFでチェックマークにイメージを使用する場合はBulletDecorator要素とTrigger要素を使用する。
SilverlightはVisualStateManagerとStoryBoard要素を使用する。
まとめ
今回は、CheckBoxコントロールとRadioButtonコントロールについて取り上げました。カスタマイズの仕方によって、もっと魅力のあるデザインにすることも可能です。ぜひチャレンジしてみてください。
最後に、CheckBoxコントロールとRadioButtonコントロールのMSDNリンクを下記に記しておきます。
