チェックマークにイメージを使用する

チェックマークにイメージを使用するには、CheckBox コントロールのControlTempleate を変更します。

WPF  と Silverlight では、書き方が異なります。

最初に WPF の方を説明します。

WPF では BulletDecorator 要素で チェックマークのイメージを指定します。また、ContentPresenter 要素を入れることで、チェックマークの隣に表示されるコンテント部分を作成します。

BulletDecoreatorで設定したイメージは、チェック状態オフの時のイメージになります。

チェック状態がオンおよび未確定のイメージは、ControlTemplate.Triggers 要素の Trigger要素で設定します。

Trigger はアクションに対応するプロパティ値を設定するためのもので、チェック状態が変更された(IsChecked が True やNullになったとき)というアクションに対するイメージを設定します。

以上を踏まえて、チェックマークにイメージを設定した例を下記に示します。

オンのときは○、オフの時は×、未確定の時は△のイメージを表示します。

チェックマークにイメージを使用する例

XAMLの例

<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 FontSize="14" Width="114" Height="23" HorizontalAlignment="Left" IsThreeState="True" Margin="12,12,0,0" Name="CheckBox1" VerticalAlignment="Top" 
              Content="CheckBox1" IsChecked="True" />
    <CheckBox FontSize="14" Width="114" Height="23" HorizontalAlignment="Left" IsThreeState="True" Margin="12,41,0,0" Name="CheckBox2" VerticalAlignment="Top" 
              Content="CheckBox2" IsChecked="False" />
    <CheckBox FontSize="14" Width="114" Height="23" HorizontalAlignment="Left" IsThreeState="True" Margin="12,68,0,0" Name="CheckBox3" VerticalAlignment="Top" 
              Content="CheckBox3" IsChecked="{x:Null}" />
</Grid>

次に Silverlight の説明をします。

Silverlight も CheckeBox コントロールの ControlTemplateを変更します。

ただし、こちらは VisualStateManager 要素を使用します。

最初に、ControlTemplate 内にGridを配置して、チェックマーク部分とコンテント部分とに分かれるように列を2つ作ります。

次に、VisualStateManager.VisualStateGropups 要素と Storyboard 要素でコントロールの外観がどのように変化するのかを設定します。

ここでは、チェックの状態がオン/オフ/未確定のときのそれぞれのイメージ不透明度が変わるように設定しています。これにより 各チェック状態の時にイメージが切り替わるようにしています。

下記に SilverlightでのXAML例を示します。

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" FlowDirection="LeftToRight" Margin="1,1,0,1.5" Opacity="0" Stretch="Fill" Height="15" Width="15" />
                            <Image x:Name="UncheckIcon" Source="../Images/Christcross.png" FlowDirection="LeftToRight" Margin="1,1,0,1.5" Opacity="0" Stretch="Fill" Height="15" Width="15" />
                            <Image x:Name="IndeterminateIcon" Source="../Images/Triangle.png" FlowDirection="LeftToRight" Margin="1,1,0,1.5" Opacity="0" Stretch="Fill"  Height="15" Width="15" />
                        </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 Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="Label1" VerticalAlignment="Top" Width="616" Content="06.チェックマークにイメージを使用する" FontSize="16" />
<CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left" Margin="37,46,0,0" Name="CheckBox1" VerticalAlignment="Top" Style="{StaticResource CheckBoxStyle}" IsThreeState="True">
    <CheckBox.RenderTransform>
        <ScaleTransform CenterX=".5" CenterY=".5" ScaleX="1.5" ScaleY="1.5"/>
    </CheckBox.RenderTransform>
</CheckBox>

コメントを残す

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