Sample4 / トリガーによるデザインの変化

About

このTemplateおよびStyleの入門資料はButtonを対象としています。これまでに背景色を変更したりしましたが、標準的なButtonとは動作が異なる点があることに気が付いているかと思います。Buttonはそのまま背景色を変更してしまうと、ポインタ(マウスカーソル)がButtonの上にあっても、そのままButtonを押したとしても、その背景色が変化することはありません。標準的なボタンであれば、例えば押したときに、凹んだように色が変わることが確認できます。

そこでSample4では、ポインタがButton上に乗っている場合に、その背景色が変化するようなサンプルについて解説します。Sample4は解説を読むよりもXAMLを見たほうが理解が進むと思います。

HowTo

UI上で起こりうる様々な条件とその変化は、Trigger(トリガー)によって定義されます。Sample4のControlTemplateをみると、新たにControlTemplate.Triggersが定義されていることが分かります。さらにその下の層にTriggerが定義されていることを確認してください。

Triggerは先の通り条件を示し、Triggersはその条件をまとめたものです。ここでは"マウスがコントロール上にある(ない)"という条件と、その場合に"適用されるの変更"について解説します。

ControlTemplate.Triggersに定義される最初のTriggerにProperty="IsMouseOver"が設定されていることを確認してください。これは文字通り、マウスが上にあったら、このTriggerに定義された変更が適用されることを意味しています。さらに後に続いてValue=Trueが設定されていますが、この値は察しの通り、IsMouseOverの条件が真である場合を指しています。後に続いて定義される2つ目のTriggerでは、Value=Falseとなっています。つまり先に定義されたTriggerは、マウスが上にある時、後に定義されたTriggerはマウスが上にない時、を指すことになります。

Triggerの下にSetterが定義されていることを確認してください。これがTriggerの条件を満たす場合に適用される変更です。Setterは、変更する対象(TargetName)、その対象の変更するプロパティ(Property)、そのプロパティの値(Value)、から構成されます。つまり、先に定義されたTrigger内のSetterは"マウスが上にある時に適用される変更"、後に続くTrigger内のSetterは"マウスが上にない時に適用される変更"となります。

    <UserControl.Resources>     
        <ControlTemplate TargetType="Button" x:Key="ButtonTemplate">         
            
            <Border Name="border"
                    Background="{TemplateBinding Background}"
                    CornerRadius="10"
                    Padding="10">
                <TextBlock Text="Hello Template"
                           Foreground="White"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Left"/>
            </Border>

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="Background" Value="Blue" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter TargetName="border" Property="Background" Value="Crimson" />
                </Trigger>
            </ControlTemplate.Triggers>         
        </ControlTemplate> 
    </UserControl.Resources>
    
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">     
        <Button Content="Button" Height="50" Width="200" 
                Background="Crimson"
                Template="{StaticResource ButtonTemplate}" />
    </StackPanel>

Setterの設定項目の内、TargetNameについて注目します。ここではTargetNameには"boder"が設定されています。これは、ControlTemplateに定義されるBorderのパラメータNameのborderを指しています。このNameはSample4で新たに追加されたものです。

          <Border Name="border"
                    Background="{TemplateBinding Background}"

SetterによってControlTemplateの特定の要素を指定する場合には、その対象となる要素に対してあらかじめNameを設定しておきます。このNameはControlTemplateに設定したx:Keyのように、ControlTemplate内で一意に定義される必要があります。またNameを参照するSetterよりも上に記述されている必要があります。つまりSetterよりも下の位置に、ControlTemplate.Borderが定義されている場合にはエラーが出るということです。

Setterの残りの項目に関しては、見た通りなので細かいことは説明しません。Propertyには対象となる要素の変更したいプロパティ名を、Valueには変更後の値を指定します。これでSample4は終わりです。