1.1 由属性值触发的 Trigger
最基本的触发器,Property 是关注的属性名称,value 是触发条件,一旦触发条件满足,就会应用 Trigger 的 Setters,触发条件不再满足时,各属性值会被还原。
<StackPanel>
<StackPanel.Resources>
<Style TargetType="CheckBox" >
<Setter Property="Height" Value="25"/>
<Setter Property="Margin" Value="5 0"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="FontSize" Value="15"/>
<Setter Property="Foreground" Value="LightSkyBlue"/>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<CheckBox Content="篮球" />
<CheckBox Content="香蕉" />
<CheckBox Content="单车" />
<CheckBox Content="自驾" />
</StackPanel>
1.2 MultiTrigger
MultiTrigger 指多个条件下同时成立时触发,MultiTrigger 比 Trigger 多了一个 Conditions 属性,需要同时成立的条件就在这个集合里。
<StackPanel>
<StackPanel.Resources>
<Style TargetType="CheckBox" >
<Setter Property="Height" Value="25"/>
<Setter Property="Margin" Value="5 0"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="FontSize" Value="15"/>
<Setter Property="Foreground" Value="LightSkyBlue"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True"/>
<Condition Property="Content" Value="香蕉"/>
</MultiTrigger.Conditions>
<Setter Property="FontSize" Value="17"/>
<Setter Property="Foreground" Value="Red"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<CheckBox Content="篮球" />
<CheckBox Content="香蕉" />
<CheckBox Content="单车" />
<CheckBox Content="自驾" />
</StackPanel>
多个 Trigger 或 MultiTrigger 时,会按代码的顺序触发,比如点击香蕉,FontSize 最终是 17,如果把 MultiTrigger 实例写在 Trigger 实例前面,点击香蕉后,FontSize 的值是 Trigger 的 15 。
1.3 由数据触发的 DataTrigger
<StackPanel>
<local:LongToBoolConverter x:Key="cvtltb"/>
<StackPanel.Resources>
<Style TargetType="TextBox">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self},
Path=Text.Length,
Converter={StaticResource cvtltb}}"
Value="True">
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<TextBox />
</StackPanel>
public class LongToBoolConverter : System.Windows.Data.IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (int)value > 6 ? true : false;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
1.4 MultiDataTrigger
public class Student
{
public string Id { get; set; }
public string Name { get; set; }
public bool LoveBasketball { get; set; }
}
...
<Window.Resources>
<coll:ArrayList x:Key="stuList">
<local:Student Id="1" Name="D1" LoveBasketball="True"></local:Student>
<local:Student Id="2" Name="D2" LoveBasketball="False"></local:Student>
<local:Student Id="3" Name="D3" LoveBasketball="True"></local:Student>
<local:Student Id="3" Name="D4" LoveBasketball="False"></local:Student>
<local:Student Id="5" Name="D5" LoveBasketball="True"></local:Student>
<local:Student Id="6" Name="D6" LoveBasketball="False"></local:Student>
</coll:ArrayList>
</Window.Resources>
<StackPanel MenuItem.Click="StackPanel_Click">
<StackPanel.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="ContentTemplate" Value="{StaticResource it}"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Id}" Value="3"/>
<Condition Binding="{Binding Name}" Value="D3"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="Red"></Setter>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<ListBox ItemsSource="{StaticResource stuList}"/>
</StackPanel>
1.5 由事件触发的 EventTrigger
EventTrigger 触发后并非应用一组 Setter,而是执行一段动画,因此 UI 的动画效果往往跟 EventTrigger 相关联。
<Button Content="确认">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="30"/>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="400" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
<DoubleAnimation To="60" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
微软官方文档中对 Trigger 的介绍很简洁明了:
https://docs.microsoft.com/zh-cn/dotnet/desktop/wpf/fundamentals/styles-templates-overview?view=netdesktop-5.0#triggers
|