チェックマークにイメージを表示する

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.