XAML-トリガー

基本的に、トリガーを使用すると、プロパティ値を変更したり、プロパティの値に基づいてアクションを実行したりできます。したがって、新しいコントロールを作成することなく、コントロールの外観や動作を動的に変更できます。

トリガーは、特定の条件が満たされたときに、特定のプロパティの値を変更するために使用されます。トリガーは通常、特定のコントロールに適用されるスタイルまたはドキュメントのルートで定義されます。トリガーには3つのタイプがあります-

プロパティトリガー
データトリガー
イベントトリガー

プロパティトリガー

プロパティトリガーでは、あるプロパティで変更が発生すると、別のプロパティで即時またはアニメーションの変更が行われます。たとえば、マウスがボタン上にあるときにボタンの外観を変更する場合は、プロパティトリガーを使用できます。

例

次の例は、マウスが領域に入ったときにボタンの前景色を変更する方法を示しています。

<Window x:Class = "XAMLPropertyTriggers.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604">

   <Window.Resources>
      <Style x:Key = "TriggerStyle" TargetType = "Button">
         <Setter Property = "Foreground" Value = "Blue"/>
         <Style.Triggers>
            <Trigger Property = "IsMouseOver" Value = "True">
               <Setter Property = "Foreground" Value = "Green"/>
            </Trigger>
         </Style.Triggers>
      </Style>
   </Window.Resources>

   <Grid>
      <Button Width = "100" Height = "70" Style = "{StaticResource TriggerStyle}"
         Content = "Trigger"/>
   </Grid>

</Window>

上記のコードをコンパイルして実行すると、次の出力が生成されます-

トリガー

マウスがボタンの領域に入ると、前景色が緑色に変わります。

トリガー色

データトリガー

データトリガーは、バインドされたデータが条件を満たしたときに何らかのアクションを実行します。チェックボックスとテキストブロックがいくつかのプロパティとともに作成される次のXAMLコードを見てみましょう。チェックボックスがチェックされると、前景色が赤に変わります。

<Window x:Class = "XAMLDataTrigger.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "Data Trigger" Height = "350" Width = "604">

   <StackPanel HorizontalAlignment = "Center">
      <CheckBox x:Name = "redColorCheckBox" Content = "Set red as foreground color" Margin = "20"/>

      <TextBlock Name = "txtblock" VerticalAlignment = "Center"
         Text = "Event Trigger" FontSize = "24" Margin = "20">
         <TextBlock.Style>
            <Style>
               <Style.Triggers>
                  <DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}"
                     Value = "true">
                     <Setter Property = "TextBlock.Foreground" Value = "Red"/>
                     <Setter Property = "TextBlock.Cursor" Value = "Hand"/>
                  </DataTrigger>
               </Style.Triggers>
            </Style>
         </TextBlock.Style>
      </TextBlock>
   </StackPanel>

</Window>

上記のコードをコンパイルして実行すると、次の出力が生成されます-

イベントトリガー

チェックボックスをオンにすると、テキストブロックの前景色が赤に変わります。

トリガーの前景色

イベントトリガー

イベントトリガーは、特定のイベントが発生したときに何らかのアクションを実行します。通常、DoubleAnimation、ColorAnimationなどのアニメーションを実行するために使用されます。次のコードブロックは、単純なボタンを作成します。クリックイベントが発生すると、ボタンの幅と高さが拡張されます。

<Window x:Class = "XAMLEventTrigger.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604">

   <Grid>
      <Button Content = "Click Me" Width = "60" Height = "30">
         <Button.Triggers>
            <EventTrigger RoutedEvent = "Button.Click">
               <EventTrigger.Actions>
                  <BeginStoryboard>
                     <Storyboard>

                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Width" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "300" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "30" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "40" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "80" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "150" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>

                     </Storyboard>
                  </BeginStoryboard>
               </EventTrigger.Actions>
            </EventTrigger>
         </Button.Triggers>
      </Button>
   </Grid>
</Window>

上記のコードをコンパイルして実行すると、次の出力が生成されます-

イベントトリガー

ここで、ボタンをクリックすると、両方の次元で拡張が開始されることがわかります。

イベントトリガー1

Xaml-triggers

XAML-トリガー

プロパティトリガー

例

データトリガー

イベントトリガー

目次