首页 > 代码库 > WPF触发器
WPF触发器
WPF中有五种触发器。Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger。最近做WPF的项目，需要学习下。参考了好多人的文章。
1、Trigger 单一触发器
1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Title="StyleTrigger" Height="300" Width="300">
5: <Window.Resources> 6: <!--单一条件触发器-->7: <Style TargetType="TextBlock" x:Key="TextBlockStyle">
8: <!--基本属性设置-->9: <Setter Property="Foreground" Value=http://www.mamicode.com/"Red"/>
10: <Setter Property="FontSize" Value=http://www.mamicode.com/"30" />
11: <Setter Property="FontWeight" Value=http://www.mamicode.com/"ExtraBold"/>
12: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化--> 13: <Style.Triggers >14: <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true">
15: <Setter Property="Foreground" Value=http://www.mamicode.com/"Yellow"/>
16: <Setter Property="FontSize" Value=http://www.mamicode.com/"50"/>
17: </Trigger> 18: </Style.Triggers> 19: </Style> 20: </Window.Resources> 21: <StackPanel>22: <TextBlock Style="{StaticResource TextBlockStyle}">第一个例子</TextBlock>
23: <TextBlock Style="{StaticResource TextBlockStyle}">单一触发器</TextBlock>
24: </StackPanel> 25: </Window>
注：鼠标离开的时候，它会自动返回原来的样式。
2、MultiTrigger 多条件的触发器
1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Title="StyleTrigger" Height="402.632" Width="470.301">
5: <Window.Resources> 6: <!--例子1 Trigger 单一条件触发器-->7: <Style TargetType="TextBlock" x:Key="TriggerTextBlockStyle">
8: <!--基本属性设置-->9: <Setter Property="Foreground" Value=http://www.mamicode.com/"Red"/>
10: <Setter Property="FontSize" Value=http://www.mamicode.com/"30" />
11: <Setter Property="FontWeight" Value=http://www.mamicode.com/"ExtraBold"/>
12: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化--> 13: <Style.Triggers >14: <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true">
15: <Setter Property="Foreground" Value=http://www.mamicode.com/"Yellow"/>
16: <Setter Property="FontSize" Value=http://www.mamicode.com/"50"/>
17: </Trigger> 18: </Style.Triggers> 19: </Style> 20: 21: <!--例子2 MultiTrigger 多条件触发器-->22: <Style TargetType="Button" x:Key="MultiTriggerButtonStyle">
23: <!--基本属性设置-->24: <Setter Property="Foreground" Value=http://www.mamicode.com/"Red"/>
25: <Setter Property="FontSize" Value=http://www.mamicode.com/"30"/>
26: <Setter Property="FontWeight" Value=http://www.mamicode.com/"Bold"/>
27: <!--2 多条件触发器 当鼠标经过并且按下的时候触发--> 28: <Style.Triggers> 29: <!--1 单一触发器-->30: <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true">
31: <Setter Property="FontSize" Value=http://www.mamicode.com/"40"></Setter>
32: </Trigger> 33: <!--2 多条件触发器--> 34: <MultiTrigger> 35: <!--触发条件--> 36: <MultiTrigger.Conditions>37: <Condition Property="IsMouseOver" Value=http://www.mamicode.com/"true"/>
38: <!--条件1-->39: <Condition Property="IsPressed" Value=http://www.mamicode.com/"true" />
40: <!--条件2--> 41: </MultiTrigger.Conditions>42: <Setter Property="Background" Value=http://www.mamicode.com/"Green"/>
43: <Setter Property="Foreground" Value=http://www.mamicode.com/"Aqua" />
44: <Setter Property="FontStyle" Value=http://www.mamicode.com/"Italic" />
45: <Setter Property="FontSize" Value=http://www.mamicode.com/"70"/>
46: </MultiTrigger> 47: </Style.Triggers> 48: </Style> 49: 50: </Window.Resources> 51: <StackPanel>52: <TextBlock Style="{StaticResource TriggerTextBlockStyle}">第一个例子</TextBlock>
53: <TextBlock Style="{StaticResource TriggerTextBlockStyle}">单一触发器</TextBlock>
54: <Button Content="第二个例子" Style="{StaticResource MultiTriggerButtonStyle}"></Button>
55: </StackPanel> 56: </Window>
注：在这个里面加了个单一触发器，用于两者的比较。
3、DataTrigger 数据触发器
DataTrigger和MultiTrigger这一对触发器和Trigger及MultiTrigger非常类似。但是DataTrigger多了一个Binding属性。语法如下：
<DataTrigger Binding="{Binding Elementname=控件名,Path=控件中的相应属性" value="http://www.mamicode.com/相关属性的值">
如：
1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Title="StyleTrigger" Height="402.632" Width="470.301">
5: <Window.Resources> 6: <!--例子1 Trigger 单一条件触发器-->7: <Style TargetType="TextBlock" x:Key="TriggerTextBlockStyle">
8: <!--基本属性设置-->9: <Setter Property="Foreground" Value=http://www.mamicode.com/"Red"/>
10: <Setter Property="FontSize" Value=http://www.mamicode.com/"30" />
11: <Setter Property="FontWeight" Value=http://www.mamicode.com/"ExtraBold"/>
12: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化--> 13: <Style.Triggers >14: <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true">
15: <Setter Property="Foreground" Value=http://www.mamicode.com/"Yellow"/>
16: <Setter Property="FontSize" Value=http://www.mamicode.com/"50"/>
17: </Trigger> 18: </Style.Triggers> 19: </Style> 20: 21: <!--例子2 MultiTrigger 多条件触发器-->22: <Style TargetType="Button" x:Key="MultiTriggerButtonStyle">
23: <!--基本属性设置-->24: <Setter Property="Foreground" Value=http://www.mamicode.com/"Red"/>
25: <Setter Property="FontSize" Value=http://www.mamicode.com/"30"/>
26: <Setter Property="FontWeight" Value=http://www.mamicode.com/"Bold"/>
27: <!--2 多条件触发器 当鼠标经过并且按下的时候触发--> 28: <Style.Triggers> 29: <!--1 单一触发器-->30: <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true">
31: <Setter Property="FontSize" Value=http://www.mamicode.com/"40"></Setter>
32: </Trigger> 33: <!--2 多条件触发器--> 34: <MultiTrigger> 35: <!--触发条件--> 36: <MultiTrigger.Conditions>37: <Condition Property="IsMouseOver" Value=http://www.mamicode.com/"true"/>
38: <!--条件1-->39: <Condition Property="IsPressed" Value=http://www.mamicode.com/"true" />
40: <!--条件2--> 41: </MultiTrigger.Conditions>42: <Setter Property="Background" Value=http://www.mamicode.com/"Green"/>
43: <Setter Property="Foreground" Value=http://www.mamicode.com/"Aqua" />
44: <Setter Property="FontStyle" Value=http://www.mamicode.com/"Italic" />
45: <Setter Property="FontSize" Value=http://www.mamicode.com/"70"/>
46: </MultiTrigger> 47: </Style.Triggers> 48: </Style> 49: 50: <!--例子3 DataTrigger 数据触发器-->51: <Style TargetType="Button" x:Key="DataTriggerButtonStyle">
52: <Setter Property="Foreground" Value=http://www.mamicode.com/"Black"/>
53: <Setter Property="FontSize" Value=http://www.mamicode.com/"60"/>
54: <Setter Property="FontWeight" Value=http://www.mamicode.com/"Regular"/>
55: <Style.Triggers>56: <DataTrigger Binding ="{Binding ElementName=btnDataTrigger,Path=IsPressed}" Value=http://www.mamicode.com/"true">
57: <Setter Property="Background" Value=http://www.mamicode.com/"Violet"/>
58: <Setter Property="FontSize" Value=http://www.mamicode.com/"30"/>
59: <Setter Property="FontWeight" Value=http://www.mamicode.com/"SemiBold"/>
60: </DataTrigger> 61: </Style.Triggers> 62: </Style> 63: </Window.Resources> 64: <StackPanel>65: <TextBlock Style="{StaticResource TriggerTextBlockStyle}">第一个例子Trigger</TextBlock>
66: <TextBlock Style="{StaticResource TriggerTextBlockStyle}">单一触发器Trigger</TextBlock>
67: <Button Content="第二个例子MultiTrigger" Style="{StaticResource MultiTriggerButtonStyle}"></Button>
68: <Button Name="btnDataTrigger" Content="第三个例子DataTrigger" Style="{StaticResource DataTriggerButtonStyle}"></Button>
69: </StackPanel> 70: </Window>按钮事件
1: /// <summary>
2: /// 第三个 DataTrigger测试
3: /// </summary>
4: private void Button_Click_1(object sender, RoutedEventArgs e)
5: {6: btnDataTrigger.Content = "DataTrigger";
7: }
4、MultiDatatrigger 多条件数据触发器
1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Title="StyleTrigger" Height="402.632" Width="470.301">
5: <Window.Resources> 6: <!--例子1 Trigger 单一条件触发器-->7: <Style TargetType="TextBlock" x:Key="TriggerTextBlockStyle">
8: <!--基本属性设置-->9: <Setter Property="Foreground" Value=http://www.mamicode.com/"Red"/>
10: <Setter Property="FontSize" Value=http://www.mamicode.com/"30" />
11: <Setter Property="FontWeight" Value=http://www.mamicode.com/"ExtraBold"/>
12: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化--> 13: <Style.Triggers >14: <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true">
15: <Setter Property="Foreground" Value=http://www.mamicode.com/"Yellow"/>
16: <Setter Property="FontSize" Value=http://www.mamicode.com/"50"/>
17: </Trigger> 18: </Style.Triggers> 19: </Style> 20: 21: <!--例子2 MultiTrigger 多条件触发器-->22: <Style TargetType="Button" x:Key="MultiTriggerButtonStyle">
23: <!--基本属性设置-->24: <Setter Property="Foreground" Value=http://www.mamicode.com/"Red"/>
25: <Setter Property="FontSize" Value=http://www.mamicode.com/"30"/>
26: <Setter Property="FontWeight" Value=http://www.mamicode.com/"Bold"/>
27: <!--2 多条件触发器 当鼠标经过并且按下的时候触发--> 28: <Style.Triggers> 29: <!--1 单一触发器-->30: <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true">
31: <Setter Property="FontSize" Value=http://www.mamicode.com/"40"></Setter>
32: </Trigger> 33: <!--2 多条件触发器--> 34: <MultiTrigger> 35: <!--触发条件--> 36: <MultiTrigger.Conditions>37: <Condition Property="IsMouseOver" Value=http://www.mamicode.com/"true"/>
38: <!--条件1-->39: <Condition Property="IsPressed" Value=http://www.mamicode.com/"true" />
40: <!--条件2--> 41: </MultiTrigger.Conditions>42: <Setter Property="Background" Value=http://www.mamicode.com/"Green"/>
43: <Setter Property="Foreground" Value=http://www.mamicode.com/"Aqua" />
44: <Setter Property="FontStyle" Value=http://www.mamicode.com/"Italic" />
45: <Setter Property="FontSize" Value=http://www.mamicode.com/"70"/>
46: </MultiTrigger> 47: </Style.Triggers> 48: </Style> 49: 50: <!--例子3 DataTrigger 数据触发器-->51: <Style TargetType="Button" x:Key="DataTriggerButtonStyle">
52: <Setter Property="Foreground" Value=http://www.mamicode.com/"Black"/>
53: <Setter Property="FontSize" Value=http://www.mamicode.com/"60"/>
54: <Setter Property="FontWeight" Value=http://www.mamicode.com/"Regular"/>
55: <Style.Triggers>56: <DataTrigger Binding ="{Binding ElementName=btnDataTrigger,Path=IsPressed}" Value=http://www.mamicode.com/"true">
57: <Setter Property="Background" Value=http://www.mamicode.com/"Violet"/>
58: <Setter Property="FontSize" Value=http://www.mamicode.com/"30"/>
59: <Setter Property="FontWeight" Value=http://www.mamicode.com/"SemiBold"/>
60: </DataTrigger> 61: <!--用Click按钮进行点击测试 改变btnDataTrigger的内容，使它的字体变为100-->62: <DataTrigger Binding="{Binding ElementName=btnDataTrigger,Path=Content}" Value=http://www.mamicode.com/"DataTrigger">
63: <Setter Property="FontSize" Value=http://www.mamicode.com/"100"/>
64: </DataTrigger> 65: </Style.Triggers> 66: </Style> 67: 68: <!--例子4 MultiDataTrigger 数据触发器-->69: <Style TargetType="Button" x:Key="MultiDataTriggerButtonStyle">
70: <Style.Triggers> 71: <MultiDataTrigger> 72: <MultiDataTrigger.Conditions>73: <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsCancel}" Value=http://www.mamicode.com/"true"/>
74: <!--条件1-->75: <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsDefault}" Value=http://www.mamicode.com/"true"/>
76: <!--条件2--> 77: </MultiDataTrigger.Conditions>78: <Setter Property="Width" Value=http://www.mamicode.com/"400"/>
79: <Setter Property="Height" Value =http://www.mamicode.com/"200"/>
80: <Setter Property="Foreground" Value=http://www.mamicode.com/"Blue"/>
81: </MultiDataTrigger> 82: </Style.Triggers> 83: </Style> 84: </Window.Resources> 85: <StackPanel>86: <TextBlock Style="{StaticResource TriggerTextBlockStyle}">第一个例子Trigger</TextBlock>
87: <TextBlock Style="{StaticResource TriggerTextBlockStyle}">单一触发器Trigger</TextBlock>
88: <Button Content="第二个例子MultiTrigger" Style="{StaticResource MultiTriggerButtonStyle}"></Button>
89: <Button Name="btnDataTrigger" Content="第三个例子DataTrigger" Style="{StaticResource DataTriggerButtonStyle}"></Button>
90: <Button Name="btnMultiDataTrigger" Content="第四个例子MultiDataTrigger" Style="{StaticResource MultiDataTriggerButtonStyle}"></Button>
91: <Button Width="180" Height="60" Content="例子3 DataTrigger Click" Click="Button_Click_1" ></Button>
92: <Button Width="180" Height="60" Content="例子4 MultiDataTrigger Click" Click="Button_Click_2" ></Button>
93: </StackPanel> 94: </Window>
5、EventTrigger 事件触发器
1: <Window x:Class="WpfApplication1.StyleTrigger.StyleTrigger"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Title="StyleTrigger" Height="402.632" Width="470.301">
5: <Window.Resources> 6: 7: <!--例子1 Trigger 单一条件触发器-->8: <Style TargetType="TextBlock" x:Key="TriggerTextBlockStyle">
9: <!--基本属性设置-->10: <Setter Property="Foreground" Value=http://www.mamicode.com/"Red"/>
11: <Setter Property="FontSize" Value=http://www.mamicode.com/"30" />
12: <Setter Property="FontWeight" Value=http://www.mamicode.com/"ExtraBold"/>
13: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化--> 14: <Style.Triggers >15: <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true">
16: <Setter Property="Foreground" Value=http://www.mamicode.com/"Yellow"/>
17: <Setter Property="FontSize" Value=http://www.mamicode.com/"50"/>
18: </Trigger> 19: </Style.Triggers> 20: </Style> 21: 22: <!--例子2 MultiTrigger 多条件触发器-->23: <Style TargetType="Button" x:Key="MultiTriggerButtonStyle">
24: <!--基本属性设置-->25: <Setter Property="Foreground" Value=http://www.mamicode.com/"Red"/>
26: <Setter Property="FontSize" Value=http://www.mamicode.com/"30"/>
27: <Setter Property="FontWeight" Value=http://www.mamicode.com/"Bold"/>
28: <!--2 多条件触发器 当鼠标经过并且按下的时候触发--> 29: <Style.Triggers> 30: <!--1 单一触发器-->31: <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true">
32: <Setter Property="FontSize" Value=http://www.mamicode.com/"40"></Setter>
33: </Trigger> 34: <!--2 多条件触发器--> 35: <MultiTrigger> 36: <!--触发条件--> 37: <MultiTrigger.Conditions>38: <Condition Property="IsMouseOver" Value=http://www.mamicode.com/"true"/>
39: <!--条件1-->40: <Condition Property="IsPressed" Value=http://www.mamicode.com/"true" />
41: <!--条件2--> 42: </MultiTrigger.Conditions>43: <Setter Property="Background" Value=http://www.mamicode.com/"Green"/>
44: <Setter Property="Foreground" Value=http://www.mamicode.com/"Aqua" />
45: <Setter Property="FontStyle" Value=http://www.mamicode.com/"Italic" />
46: <Setter Property="FontSize" Value=http://www.mamicode.com/"70"/>
47: </MultiTrigger> 48: </Style.Triggers> 49: </Style> 50: 51: <!--例子3 DataTrigger 数据触发器-->52: <Style TargetType="Button" x:Key="DataTriggerButtonStyle">
53: <Setter Property="Foreground" Value=http://www.mamicode.com/"Black"/>
54: <Setter Property="FontSize" Value=http://www.mamicode.com/"60"/>
55: <Setter Property="FontWeight" Value=http://www.mamicode.com/"Regular"/>
56: <Style.Triggers>57: <DataTrigger Binding ="{Binding ElementName=btnDataTrigger,Path=IsPressed}" Value=http://www.mamicode.com/"true">
58: <Setter Property="Background" Value=http://www.mamicode.com/"Violet"/>
59: <Setter Property="FontSize" Value=http://www.mamicode.com/"30"/>
60: <Setter Property="FontWeight" Value=http://www.mamicode.com/"SemiBold"/>
61: </DataTrigger> 62: <!--用Click按钮进行点击测试 改变btnDataTrigger的内容，使它的字体变为100-->63: <DataTrigger Binding="{Binding ElementName=btnDataTrigger,Path=Content}" Value=http://www.mamicode.com/"DataTrigger">
64: <Setter Property="FontSize" Value=http://www.mamicode.com/"100"/>
65: </DataTrigger> 66: </Style.Triggers> 67: </Style> 68: 69: <!--例子4 MultiDataTrigger 数据触发器-->70: <Style TargetType="Button" x:Key="MultiDataTriggerButtonStyle">
71: <Style.Triggers> 72: <MultiDataTrigger> 73: <MultiDataTrigger.Conditions>74: <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsCancel}" Value=http://www.mamicode.com/"true"/>
75: <!--条件1-->76: <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsDefault}" Value=http://www.mamicode.com/"true"/>
77: <!--条件2--> 78: </MultiDataTrigger.Conditions>79: <Setter Property="Width" Value=http://www.mamicode.com/"400"/>
80: <Setter Property="Height" Value =http://www.mamicode.com/"200"/>
81: <Setter Property="Foreground" Value=http://www.mamicode.com/"Blue"/>
82: </MultiDataTrigger> 83: </Style.Triggers> 84: </Style> 85: 86: <!--例子5 EventTrigger 事件触发器-->87: <Style x:Key="EventTrigger" >
88: <Style.Triggers>89: <EventTrigger RoutedEvent="Mouse.MouseEnter">
90: <!--鼠标进入--> 91: <EventTrigger.Actions>92: <BeginStoryboard Name="ExpendWidth">
93: <Storyboard>94: <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="Width" To="300"></DoubleAnimation>
95: <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="Height" To="200"></DoubleAnimation>
96: <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="FontSize" To="30" ></DoubleAnimation>
97: </Storyboard> 98: </BeginStoryboard> 99: </EventTrigger.Actions> 100: </EventTrigger>101: <EventTrigger RoutedEvent="Mouse.MouseLeave">
102: <!--鼠标离开--> 103: <EventTrigger.Actions> 104: <BeginStoryboard > 105: <Storyboard>106: <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="Width" To="30"></DoubleAnimation>
107: <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="Height" To="20"></DoubleAnimation>
108: <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="FontSize" To="12"></DoubleAnimation>
109: </Storyboard> 110: </BeginStoryboard> 111: </EventTrigger.Actions> 112: </EventTrigger> 113: </Style.Triggers> 114: </Style> 115: 116: </Window.Resources> 117: 118: <StackPanel>119: <TextBlock Style="{StaticResource TriggerTextBlockStyle}">第一个例子Trigger</TextBlock>
120: <TextBlock Style="{StaticResource TriggerTextBlockStyle}">单一触发器Trigger</TextBlock>
121: <Button Content="第二个例子MultiTrigger" Style="{StaticResource MultiTriggerButtonStyle}"></Button>
122: <Button Name="btnDataTrigger" Content="第三个例子DataTrigger" Style="{StaticResource DataTriggerButtonStyle}"></Button>
123: <Button Name="btnMultiDataTrigger" Content="第四个例子MultiDataTrigger" Style="{StaticResource MultiDataTriggerButtonStyle}"></Button>
124: <Label Height="40" Name="label4" Margin="0,0,0,10" Width="120" Style="{StaticResource EventTrigger}" VerticalContentAlignment="Center" HorizontalContentAlignment="Center">第五个例子EventTrigger</Label>
125: <Button Width="180" Height="60" Content="例子3 DataTrigger Click" Click="Button_Click_1" ></Button>
126: <Button Width="180" Height="60" Content="例子4 MultiDataTrigger Click" Click="Button_Click_2" ></Button>
127: </StackPanel> 128: 129: </Window>正常样式：
鼠标进入：
label ‘第五个例子EventTrigger’渐渐变大
鼠标离开：
label ‘第五个例子EventTrigger’渐渐变小。
界面不是太漂亮，只是学学了解下这些触发器。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。