チェックマークにイメージを使用するには、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>