チェックマークにイメージを使用するには、RadioButton コントロールのControlTempleate を変更します。
WPF と Silverlight では、書き方が異なります。
最初に WPF の方を説明します。
WPF では BulletDecorator 要素で チェックマークのイメージを指定します。また、ContentPresenter 要素を入れることで、チェックマークの隣に表示されるコンテント部分を作成します。
BulletDecoreatorで設定したイメージは、チェック状態オンの時のイメージになります。
チェック状態がオフのイメージは、ControlTemplate.Triggers 要素の Trigger要素で設定します。
Trigger はアクションに対応するプロパティ値を設定するためのもので、チェック状態が変更された(IsChecked が True やFalseになったとき)というアクションに対するイメージを設定します。
以上を踏まえて、チェックマークにイメージを設定した例を下記に示します。
オンのときは星マーク、オフの時はVisibility属性をFalseに設定してイメージを隠しています。
XAMLの例(WPF)
<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 BorderBrush="Silver" BorderThickness="2" CornerRadius="3">
<StackPanel>
<TextBlock Height="26">好きな果物を1つ選んでください。</TextBlock>
<RadioButton Content="リンゴ" Height="23" Name="RadioButton1" Width="181" />
<RadioButton Content="バナナ" Height="23" Name="RadioButton2" Width="181" />
<RadioButton Content="ミカン" Height="23" Name="RadioButton3" Width="181" />
</StackPanel>
</Border>
</Grid>
次に Silverlight の説明をします。
Silverlight も RadioButton コントロールの ControlTemplateを変更します。
ただし、こちらは VisualStateManager 要素を使用します。
最初に、ControlTemplate 内にGridを配置して、チェックマーク部分とコンテント部分とに分かれるように列を2つ作ります。
次に、VisualStateManager.VisualStateGropups 要素と Storyboard 要素でコントロールの外観がどのように変化するのかを設定します。
ここでは、チェックの状態がオン/オフのときのそれぞれのイメージ不透明度が変わるように設定しています。オンの時には星形のイメージを、オフの時には透明な図形を表示してイメージが切り替わるようにしています。
下記に SilverlightでのXAML例を示します。
XAMLの例(Silverlight)
<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 Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="Label1" VerticalAlignment="Top" Width="616" Content="06.チェックマークにイメージを使用する" FontSize="16" />
<RadioButton Content="リンゴ" Name="RadioButton1" Style="{StaticResource RadioButtonStyle1}" />
<RadioButton Content="バナナ" Name="RadioButton2" Style="{StaticResource RadioButtonStyle1}" />
<RadioButton Content="ミカン" Name="RadioButton3" Style="{StaticResource RadioButtonStyle1}" />
</Grid>
