WPF触发器
-
在 WPF(Windows Presentation Foundation)中,触发器是一种机制,用于在满足特定条件时自动更改控件的属性或执行某些操作。它可以基于属性值的变化、事件的发生等来触发。例如,当鼠标移到按钮上(触发鼠标悬停事件)时,按钮的背景色发生变化,这就可以通过触发器来实现。
-
主要有三种类型的触发器:属性触发器(PropertyTrigger)、事件触发器(EventTrigger)和数据触发器(DataTrigger)。
1. 属性触发器
以一个按钮的 【鼠标移动至按钮上方】触发为例
<Window x:Class="Trigger.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="350" Width="525" >
<StackPanel Margin="20">
<Button Height="25" Content="sssss">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
BorderBrush="Black" BorderThickness="1" CornerRadius="2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Black"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="Yellow"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
</Window>
上述代码中,
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
BorderBrush="Black" BorderThickness="1" CornerRadius="2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
定义了button控件的模板,因为 WPF中的某些控件(如Button
)使用默认的ControlTemplate
,在ControlTemplate
中可能已显式设置了Background
属性,这会导致触发器中指定的Background
属性没有生效。
运行效果
属性触发器
2. 事件触发器
给按钮设置一个透明度改变的动画,在按钮被点击时触发动画
<Window x:Class="Trigger.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="350" Width="525" >
<StackPanel Margin="20">
<Button Name="AnimatedButton" Content="Click Me!" Width="100" Height="50">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Window>
执行效果
事件触发器
3. 数据触发器
假设有一个数据绑定的场景。有一个CheckBox
和一个TextBlock
。当CheckBox
被选中(IsChecked
属性为true
)时,TextBlock
的文字颜色变为LightGreen背景变为Black
3.1 绑定字段
在VM中创建要绑定的字段 ,这里绑定用了Prism框架,需要using Prism.mvvm
using Prism.Mvvm;
namespace Trigger.ViewModels
{
public class MainWindowViewModel : BindableBase
{
private string _title = "PrismApplication";
public string Title
{
get { return _title; }
set { SetProperty(ref _title, value); }
}
private bool _isChecked =false;
public bool IsChecked
{
get { return _isChecked; }
set { SetProperty(ref _isChecked, value); }
}
public MainWindowViewModel()
{
}
}
}
3.2 设定数据触发器 并给触发器绑定数据字段
<Window x:Class="Trigger.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="350" Width="525" >
<StackPanel Margin="20" HorizontalAlignment="Center">
<CheckBox Content="Select Option" IsChecked="{Binding IsChecked}"/>
<TextBlock Text="Some Text">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked}" Value="true">
<Setter Property="Foreground" Value="LightGreen"/>
<Setter Property="Background" Value="Black"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Window>
执行效果
数据触发器