WPF 触发器

原文链接:http://blog.csdn.net/pan_junbiao/article/details/50987932
Trigger类是最基本的触发器。类似于Setter,Trigger也有Property和Value这两个属性,Property是Trigger关注的属性名称,Value是触发条件。Trigger类还有一个Setters属性,此属性值是一组Setter,一旦触发条件被满足,这组Setter的“属性一值”就会被应用,触发条件不在满足后,各属性值会被还原。
1、属性触发器(Property Trigger)
下面这个例子中包含一个针对CheckBox的Style,当CheckBox的IsChecked属性为true的时候前景色和字体会改变。XAML代码如下:

<Window.Resources>
    <Style TargetType="CheckBox">
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="true">
                <Setter Property="FontSize" Value="20"/>
                <Setter Property="Foreground" Value="Orange"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>
    <CheckBox Content="悄悄的我走了" Margin="5"/>
    <CheckBox Content="正如我悄悄的来" Margin="5,0"/>
    <CheckBox Content="我挥一挥衣袖" Margin="5"/>
    <CheckBox Content="不带走一片云彩" Margin="5,0"/>
</StackPanel>

效果如下图:
这里写图片描述

MultiTrigger
MultiTrigger是个容易让人误解的名字,会让人以为是多个Trigger集成在一起,实际上叫MultiConditionTrigger更合适,因为必须多个条件同时成立时才会触发。MultiTrigger比Trigger多了一个Conditions属性,需要同时成立的条件就储存在这个集合中。
让我们稍微改动一下上面的例子,要求同时满足CheckBox被选中且Content为“正如我悄悄的来”时才会被触发。XAML代码如下:

<Window.Resources>
    <Style TargetType="CheckBox">
        <Style.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsChecked" Value="true"/>
                    <Condition Property="Content" Value="正如我悄悄的来"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.Setters>
                    <Setter Property="FontSize" Value="20"/>
                    <Setter Property="Foreground" Value="Orange"/>
                </MultiTrigger.Setters>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>
    <CheckBox Content="悄悄的我走了" Margin="5"/>
    <CheckBox Content="正如我悄悄的来" Margin="5,0"/>
    <CheckBox Content="我挥一挥衣袖" Margin="5"/>
    <CheckBox Content="不带走一片云彩" Margin="5,0"/>
</StackPanel>

效果如下图:
这里写图片描述

2、数据触发器(Data Trigger)
程序中经常会遇到基于数据执行某些判断情况,遇到这种情况时我们可以考虑使用DataTrigger。DataTrigger对象的Binding属性会把数据源不断送过来,一旦送了的值与Value属性一致,DataTrigger即被触发。

下面例子中,当TextBox的Text长度小于7个字符时其Border会保持红色。XAML代码如下:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication2"  
        Title="WPF样式的使用" Height="500" Width="800" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <local:L2BConverter x:Key="cvtr" />
        <Style TargetType="TextBox">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Text.Length,Converter={StaticResource cvtr}}" Value="false">
                    <Setter Property="BorderBrush" Value="Red"/>
                    <Setter Property="BorderThickness" Value="1"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <TextBox Margin="5"/>
        <TextBox Margin="5,0"/>
        <TextBox Margin="5"/>
    </StackPanel>
</Window>  

这里用到了Converter,我们创建如下的Converter:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;

namespace WpfApplication2
{
    public class L2BConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            int textLength = (int)value;
            return textLength > 6 ? true : false;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}  

经Converter转换后,长度值会转换成bool类型值。DataTrigger的Value被设置为false,也就是说当TextBox的文本长度小于7时DataTrigger会使用自己的一组Setter把TextBox的边框设置为红色。
多条件触发的MultiDataTrigger
有时候我们会遇到要求多个数据条件同时满足时才能触发变化的需求,此时可以考虑使用MultiDataTrigger。比如有这样一个需求:用户界面使用ListBox显示了一列Student数据,当Student对象同时满足ID为2、Name为Tom的时候,条目就高亮显示,XAML代码如下:

<Window x:Class="WpfApplication1.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:local="clr-namespace:WpfApplication1"  
        Title="WPF样式的使用" Height="500" Width="800" WindowStartupLocation="CenterScreen">  
    <Window.Resources>  
        <Style TargetType="ListBoxItem">  
            <!--使用Style设置DataTemplate-->  
            <Setter Property="ContentTemplate">  
                <Setter.Value>  
                    <DataTemplate>  
                        <StackPanel Orientation="Horizontal">  
                            <TextBlock Text="{Binding ID}" Width="60"/>  
                            <TextBlock Text="{Binding Name}" Width="120"/>  
                            <TextBlock Text="{Binding Age}" Width="60"/>  
                        </StackPanel>  
                    </DataTemplate>  
                </Setter.Value>  
            </Setter>  
            <!--MultiDataTrigger-->  
            <Style.Triggers>  
                <MultiDataTrigger>  
                    <MultiDataTrigger.Conditions>  
                        <Condition Binding="{Binding Path=ID}" Value="2"/>  
                        <Condition Binding="{Binding Path=Name}" Value="Tom"/>  
                    </MultiDataTrigger.Conditions>  
                    <MultiDataTrigger.Setters>  
                        <Setter Property="Background" Value="Orange"/>  
                    </MultiDataTrigger.Setters>  
                </MultiDataTrigger>  
            </Style.Triggers>  
        </Style>  
    </Window.Resources>  

    <StackPanel>  
        <ListBox x:Name="listBoxStudent" Margin="5"/>  
    </StackPanel>  
</Window>  

后台代码:

/// <summary>  
/// MainWindow.xaml 的交互逻辑  
/// </summary>  
public partial class MainWindow : Window  
{  
    public MainWindow()  
    {  
        InitializeComponent();  

        List<Student> stuList = new List<Student>(){  
            new Student(){ID="1",Name="Peter",Age=25},  
            new Student(){ID="2",Name="Tom",Age=27},  
            new Student(){ID="3",Name="Ben",Age=20}  
        };  

        this.listBoxStudent.ItemsSource = stuList;  
    }  

}  

/// <summary>  
/// 学生类  
/// </summary>  
public class Student{  
    public string ID{get;set;}  
    public string Name { get; set; }  
    public int Age { get; set; }  
}  

3、由事件触发的 (Event Trigger)
EventTrigger是触发器中最特殊的一个。首先,它不是由属性值或数据的变化来触发而是由事件来触发;其次,被触发后它并非应用一组Setter,而是执行一段动画。因此,UI层的动画效果往往与EventTrigger相关联。

在下面这个例子中创建了一个针对Button的Style,这个Style包含两个EventTrigger,一个由MouseEnter事件触发,另一个由MouseLeave事件触发。XAML代码如下:

<Window.Resources>  
    <Style TargetType="Button">  
        <Style.Triggers>  
            <!--鼠标进入-->  
            <EventTrigger RoutedEvent="MouseEnter">  
                <BeginStoryboard>  
                    <Storyboard>  
                        <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>  
                        <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>  
                    </Storyboard>  
                </BeginStoryboard>  
            </EventTrigger>  
            <!--鼠标离开-->  
            <EventTrigger RoutedEvent="MouseLeave">  
                <BeginStoryboard>  
                    <Storyboard>  
                        <DoubleAnimation  Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>  
                        <DoubleAnimation  Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>  
                    </Storyboard>  
                </BeginStoryboard>  
            </EventTrigger>  
        </Style.Triggers>  
    </Style>  
</Window.Resources>  

<Canvas>  
    <Button Width="40" Height="40" Content="OK"/>  
</Canvas>  
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值