WPF - 触发器 - 蝴蝶教程

简述

触发器基本上使您能够更改属性值或根据属性值执行操作。因此，它允许您动态更改控件的外观和/或行为，而无需创建新控件。

当满足某些条件时，触发器用于更改任何给定属性的值。触发器通常定义在样式中或应用于特定控件的文档的根中。有三种类型的触发器 -

属性触发器
数据触发器
事件触发器

属性触发器

在属性触发器中，当一个属性发生更改时，它将立即或动画更改另一个属性。例如，当鼠标悬停在按钮上时，您可以使用属性触发器来更改按钮的外观。

以下示例代码显示了当鼠标悬停在按钮上时如何更改按钮的前景色。


<Window x:Class = "WPFPropertyTriggers.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 = "WPFDataTrigger.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 HorizontalMoognment = "Center"> 
      <CheckBox x:Name = "redColorCheckBox" 
         Content = "Set red as foreground color" Margin = "20"/> 
         
      <TextBlock Name = "txtblock" VerticalMoognment = "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>

当上面的代码被编译并执行时，它将产生以下输出 -

当您勾选复选框时，文本块将其前景色更改为红色。

事件触发器

事件触发器在触发特定事件时执行一些操作。它通常用于在控件上完成一些动画，如 DoubleAnumatio、ColorAnimation 等。在下面的示例中，我们将创建一个简单的按钮。当点击事件被触发时，它会扩展按钮的宽度和高度。


<Window x:Class = "WPFEventTrigger.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>

当您编译并执行上述代码时，它将产生以下窗口 -

单击按钮后，您将观察到它将开始在两个维度上扩展。

我们建议您编译并执行上述示例，并将触发器也应用于其他属性。