【发布时间】:2011-01-15 10:34:28
【问题描述】:
WPF 中有哪些不同的触发器?它们有什么不同,我应该什么时候使用它们?
我见过以下触发器:
- 触发器
- 数据触发器
- 多触发器
- 多数据触发器
- 事件触发器
【问题讨论】:
WPF 中有哪些不同的触发器?它们有什么不同,我应该什么时候使用它们?
我见过以下触发器:
【问题讨论】:
触发器通常用于 Style 或 ControlTemplate。它触发被模板化的事物的属性,并设置控件(或特定模板元素)的其他属性。例如,您可以在 IsMouseOver 上使用 Trigger 来响应鼠标悬停在控件上,而 setter 可能会更新画笔以显示“热”效果。
DataTrigger 在数据绑定而不是控件属性上触发。它通常用于 DataTemplate。例如,如果 AlertLevel 属性等于 ZomgWereAllGoingToDie,您可以使用 DataTrigger 更改 DataTemplate 中元素的颜色。如果您想在“转换的”控件属性上触发(即在触发器测试中使用 IValueConverter),DataTriggers 在控件模板中也很有用。例如,如果 Text 属性(被视为数字)为负数,您可以使用 DataTrigger 将 TextBox 的前景变为红色,方法是使用具有合适的 IValueConverter 和 Self 或 TemplatedParent 的 RelativeSource。
MultiTrigger 和 MultiDataTrigger 是相同的,只是它们允许您指定多个条件(分别为属性或绑定),并且只有在满足所有条件时才生效。
最后,EventTrigger 用于触发响应事件的操作(而不是更改一个状态以响应另一个状态)。例如,您可以使用 EventTrigger 来响应 MouseEnter 事件。 EventTriggers 通常用于执行情节提要,例如在事件发生时执行动画。
【讨论】:
Trigger 通常用于Style 或ControlTemplate。它触发任何被模板化的属性,并设置控件(或特定模板元素)的其他属性。例如,您可以在IsMouseOver 上使用触发器来响应鼠标悬停在控件上,而setters 可能会更新画笔以显示“热”效果。
为什么要使用触发器?
触发器用于样式中,以在属性值更改或事件触发时执行操作。触发器在控件上创建视觉效果。通过使用触发器,我们可以改变框架元素的外观。
WPF 中有多少种触发器?
WPF 支持五种类型的触发器;他们是:
属性触发器
触发器的最简单形式是属性触发器;它监视依赖属性是否具有特定值。例如,如果我们想在用户将鼠标移到按钮上时点亮一个黄色按钮,我们可以通过观察 IsMouseOver 属性的值为“True”来实现。
Property Trigger 在 UIElements 属性值更改时执行 Setter 集合。
要在任何控件上创建属性触发器,您必须在控件的样式中设置触发器。
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
在上面的代码中,Trigger 是在 Button 上创建的。当按钮的IsPressed 属性更改时,它会将Opacity 设置为0.5。您可以在控件的任何依赖属性上设置触发器。
例如
<Style x:Key="NormalStyle">
<Setter Property="Control.FontSize" Value="20"></Setter>
<Setter Property="Control.HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Control.Margin" Value="10"></Setter>
<Setter Property="Control.Foreground" Value="Black"></Setter>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="true">
<Setter Property="Control.FontStyle" Value="Italic"></Setter>
<Setter Property="Control.Foreground" Value="Red"></Setter>
<Setter Property="Control.Background" Value="Yellow"></Setter>
</Trigger>
<Trigger Property="Button.IsPressed" Value="true">
<Setter Property="Control.Foreground" Value="Green"></Setter>
<Setter Property="Control.Background" Value="Blue"></Setter>
</Trigger>
</Style.Triggers>
</Style>
多触发器
MultiTrigger 用于设置对多个属性更改的操作。它会在MulitTrigger.Condition 中的所有条件都满足时执行。
<Style x:Key="MulitTriggerButtonStyle" TargetType="Button">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="True" />
<Condition Property="Background" Value="BlanchedAlmond" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="BorderBrush" Value="Blue" />
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
事件触发器
Event Trigger 用于在 FrameworkElement 的RoutedEvent 引发时执行操作。Event Trigger 通常用于在控件上执行一些动画(如 colorAnimation、使用 KeyFrame 的 doubleAnumation 等)
我们先了解Storyboard和Animation。
Animations:
动画可以提供更有吸引力的外观和感觉的用户界面。我们还可以在控件上创建视觉效果,Animation 可以是任何类型,例如:
更改控件的背景颜色 将屏幕旋转 90 度角 将对象从一个位置移动到另一个位置 更改圆的不透明度(淡入/淡出)。
动画与 UIElement 的属性一起使用。 WPF 提供了与属性一起使用的不同类型的动画,例如:
ColorAnimation :
用于在特定 Duration 内对 UIElement 的颜色属性(SolidColorBrush、LinearGradientBrush)进行动画处理/更改。它有两个属性:
从(源)和到(目标)
<Border Name="border1" Width="100" Height="30"
BorderBrush="Black" BorderThickness="1">
<Border.Background>
<SolidColorBrush x:Name="MyBorder" Color="LightBlue" />
</Border.Background>
<Border.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:1"
Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="Color" To="Gray" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
示例 2:
<TextBlock Visibility="Collapsed" Style="{StaticResource CDCStandardTextBlockStyle}" Name="TxtBlockTerminatingHeading" Text="{Binding NotifyOnTargetUpdated=True}" Foreground="Red" TextWrapping="Wrap" Margin="10,10,10,0">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00" RepeatBehavior="Forever"
Storyboard.TargetName="TxtBlockTerminatingHeading"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
<ColorAnimation From="Red" To="#f0f0f0"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
示例 3:
<ListBox Name="employeeListBox" ItemsSource="{Binding
empList}" Grid.Row="0" SelectedItem="{Binding SelectedIndex}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding MyCommand}" CommandParameter="{Binding
ElementName=employeeListBox, Path=SelectedValue}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
数据触发器
DataTriggers 是监视绑定值而不是 Dependency Property 的触发器。它们允许您查看绑定的表达式,并在该绑定的计算结果等于您的值时做出反应。顾名思义,DataTrigger 应用属性值对绑定到 UIElement 的数据执行操作。
DataTrigger 允许在绑定数据匹配指定条件时设置属性值。例如:
<DataTemplate>
<Grid Margin="0 5 0 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="viewImage"
Grid.Row="0" Width="100"
Height="60" HorizontalAlignment="Center"
Source="{Binding Picture}" Stretch="Fill" />
<TextBlock x:Name="viewText"
Grid.Row="1" Margin="0 5 0 0"
HorizontalAlignment="Center"
FontWeight="Black" Foreground="Green"
Text="{Binding Title}" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Picture}" Value="{x:Null}">
<Setter TargetName="viewImage" Property="Source" Value="/Images/noImage.png" />
<Setter TargetName="viewText" Property="Text" Value="No Image Available" />
<Setter TargetName="viewText" Property="Foreground" Value="Red" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=textBox1, Path=Text.Length}"
Value="0">
<Setter Property="IsEnabled" Value="False"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
多数据触发器
MultiTrigger和MultiDataTrigger是一样的,只是它们允许你指定多个条件(分别是属性或绑定)并且只有在所有条件都满足时才生效。
<DataTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=Picture}" Value="{x:Null}" />
<Condition Binding="{Binding Path=Title}" Value="Waterfall" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter TargetName="viewImage" Property="Source" Value="/Images/noImage.png"/>
<Setter TargetName="viewImage" Property="Opacity" Value="0.5" />
<Setter TargetName="viewText" Property="Background" Value="Brown" />
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</DataTemplate.Triggers>
【讨论】: