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は終わりです。