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="Red"/>
10: <Setter Property="FontSize" Value="30" />
11: <Setter Property="FontWeight" Value="ExtraBold"/>
12: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化-->
13: <Style.Triggers >
14: <Trigger Property="IsMouseOver" Value="true">
15: <Setter Property="Foreground" Value="Yellow"/>
16: <Setter Property="FontSize" Value="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="Red"/>
10: <Setter Property="FontSize" Value="30" />
11: <Setter Property="FontWeight" Value="ExtraBold"/>
12: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化-->
13: <Style.Triggers >
14: <Trigger Property="IsMouseOver" Value="true">
15: <Setter Property="Foreground" Value="Yellow"/>
16: <Setter Property="FontSize" Value="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="Red"/>
25: <Setter Property="FontSize" Value="30"/>
26: <Setter Property="FontWeight" Value="Bold"/>
27: <!--2 多条件触发器 当鼠标经过并且按下的时候触发-->
28: <Style.Triggers>
29: <!--1 单一触发器-->
30: <Trigger Property="IsMouseOver" Value="true">
31: <Setter Property="FontSize" Value="40"></Setter>
32: </Trigger>
33: <!--2 多条件触发器-->
34: <MultiTrigger>
35: <!--触发条件-->
36: <MultiTrigger.Conditions>
37: <Condition Property="IsMouseOver" Value="true"/>
38: <!--条件1-->
39: <Condition Property="IsPressed" Value="true" />
40: <!--条件2-->
41: </MultiTrigger.Conditions>
42: <Setter Property="Background" Value="Green"/>
43: <Setter Property="Foreground" Value="Aqua" />
44: <Setter Property="FontStyle" Value="Italic" />
45: <Setter Property="FontSize" Value="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="相关属性的值">
如：
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="Red"/>
10: <Setter Property="FontSize" Value="30" />
11: <Setter Property="FontWeight" Value="ExtraBold"/>
12: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化-->
13: <Style.Triggers >
14: <Trigger Property="IsMouseOver" Value="true">
15: <Setter Property="Foreground" Value="Yellow"/>
16: <Setter Property="FontSize" Value="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="Red"/>
25: <Setter Property="FontSize" Value="30"/>
26: <Setter Property="FontWeight" Value="Bold"/>
27: <!--2 多条件触发器 当鼠标经过并且按下的时候触发-->
28: <Style.Triggers>
29: <!--1 单一触发器-->
30: <Trigger Property="IsMouseOver" Value="true">
31: <Setter Property="FontSize" Value="40"></Setter>
32: </Trigger>
33: <!--2 多条件触发器-->
34: <MultiTrigger>
35: <!--触发条件-->
36: <MultiTrigger.Conditions>
37: <Condition Property="IsMouseOver" Value="true"/>
38: <!--条件1-->
39: <Condition Property="IsPressed" Value="true" />
40: <!--条件2-->
41: </MultiTrigger.Conditions>
42: <Setter Property="Background" Value="Green"/>
43: <Setter Property="Foreground" Value="Aqua" />
44: <Setter Property="FontStyle" Value="Italic" />
45: <Setter Property="FontSize" Value="70"/>
46: </MultiTrigger>
47: </Style.Triggers>
48: </Style>
49:
50: <!--例子3 DataTrigger 数据触发器-->
51: <Style TargetType="Button" x:Key="DataTriggerButtonStyle">
52: <Setter Property="Foreground" Value="Black"/>
53: <Setter Property="FontSize" Value="60"/>
54: <Setter Property="FontWeight" Value="Regular"/>
55: <Style.Triggers>
56: <DataTrigger Binding ="{Binding ElementName=btnDataTrigger,Path=IsPressed}" Value="true">
57: <Setter Property="Background" Value="Violet"/>
58: <Setter Property="FontSize" Value="30"/>
59: <Setter Property="FontWeight" Value="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="Red"/>
10: <Setter Property="FontSize" Value="30" />
11: <Setter Property="FontWeight" Value="ExtraBold"/>
12: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化-->
13: <Style.Triggers >
14: <Trigger Property="IsMouseOver" Value="true">
15: <Setter Property="Foreground" Value="Yellow"/>
16: <Setter Property="FontSize" Value="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="Red"/>
25: <Setter Property="FontSize" Value="30"/>
26: <Setter Property="FontWeight" Value="Bold"/>
27: <!--2 多条件触发器 当鼠标经过并且按下的时候触发-->
28: <Style.Triggers>
29: <!--1 单一触发器-->
30: <Trigger Property="IsMouseOver" Value="true">
31: <Setter Property="FontSize" Value="40"></Setter>
32: </Trigger>
33: <!--2 多条件触发器-->
34: <MultiTrigger>
35: <!--触发条件-->
36: <MultiTrigger.Conditions>
37: <Condition Property="IsMouseOver" Value="true"/>
38: <!--条件1-->
39: <Condition Property="IsPressed" Value="true" />
40: <!--条件2-->
41: </MultiTrigger.Conditions>
42: <Setter Property="Background" Value="Green"/>
43: <Setter Property="Foreground" Value="Aqua" />
44: <Setter Property="FontStyle" Value="Italic" />
45: <Setter Property="FontSize" Value="70"/>
46: </MultiTrigger>
47: </Style.Triggers>
48: </Style>
49:
50: <!--例子3 DataTrigger 数据触发器-->
51: <Style TargetType="Button" x:Key="DataTriggerButtonStyle">
52: <Setter Property="Foreground" Value="Black"/>
53: <Setter Property="FontSize" Value="60"/>
54: <Setter Property="FontWeight" Value="Regular"/>
55: <Style.Triggers>
56: <DataTrigger Binding ="{Binding ElementName=btnDataTrigger,Path=IsPressed}" Value="true">
57: <Setter Property="Background" Value="Violet"/>
58: <Setter Property="FontSize" Value="30"/>
59: <Setter Property="FontWeight" Value="SemiBold"/>
60: </DataTrigger>
61: <!--用Click按钮进行点击测试 改变btnDataTrigger的内容，使它的字体变为100-->
62: <DataTrigger Binding="{Binding ElementName=btnDataTrigger,Path=Content}" Value="DataTrigger">
63: <Setter Property="FontSize" Value="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="true"/>
74: <!--条件1-->
75: <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsDefault}" Value="true"/>
76: <!--条件2-->
77: </MultiDataTrigger.Conditions>
78: <Setter Property="Width" Value="400"/>
79: <Setter Property="Height" Value ="200"/>
80: <Setter Property="Foreground" Value="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="Red"/>
11: <Setter Property="FontSize" Value="30" />
12: <Setter Property="FontWeight" Value="ExtraBold"/>
13: <!--单一触发器 当鼠标移过控件的时候，控件的风格发生变化-->
14: <Style.Triggers >
15: <Trigger Property="IsMouseOver" Value="true">
16: <Setter Property="Foreground" Value="Yellow"/>
17: <Setter Property="FontSize" Value="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="Red"/>
26: <Setter Property="FontSize" Value="30"/>
27: <Setter Property="FontWeight" Value="Bold"/>
28: <!--2 多条件触发器 当鼠标经过并且按下的时候触发-->
29: <Style.Triggers>
30: <!--1 单一触发器-->
31: <Trigger Property="IsMouseOver" Value="true">
32: <Setter Property="FontSize" Value="40"></Setter>
33: </Trigger>
34: <!--2 多条件触发器-->
35: <MultiTrigger>
36: <!--触发条件-->
37: <MultiTrigger.Conditions>
38: <Condition Property="IsMouseOver" Value="true"/>
39: <!--条件1-->
40: <Condition Property="IsPressed" Value="true" />
41: <!--条件2-->
42: </MultiTrigger.Conditions>
43: <Setter Property="Background" Value="Green"/>
44: <Setter Property="Foreground" Value="Aqua" />
45: <Setter Property="FontStyle" Value="Italic" />
46: <Setter Property="FontSize" Value="70"/>
47: </MultiTrigger>
48: </Style.Triggers>
49: </Style>
50:
51: <!--例子3 DataTrigger 数据触发器-->
52: <Style TargetType="Button" x:Key="DataTriggerButtonStyle">
53: <Setter Property="Foreground" Value="Black"/>
54: <Setter Property="FontSize" Value="60"/>
55: <Setter Property="FontWeight" Value="Regular"/>
56: <Style.Triggers>
57: <DataTrigger Binding ="{Binding ElementName=btnDataTrigger,Path=IsPressed}" Value="true">
58: <Setter Property="Background" Value="Violet"/>
59: <Setter Property="FontSize" Value="30"/>
60: <Setter Property="FontWeight" Value="SemiBold"/>
61: </DataTrigger>
62: <!--用Click按钮进行点击测试 改变btnDataTrigger的内容，使它的字体变为100-->
63: <DataTrigger Binding="{Binding ElementName=btnDataTrigger,Path=Content}" Value="DataTrigger">
64: <Setter Property="FontSize" Value="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="true"/>
75: <!--条件1-->
76: <Condition Binding="{Binding ElementName=btnMultiDataTrigger,Path=IsDefault}" Value="true"/>
77: <!--条件2-->
78: </MultiDataTrigger.Conditions>
79: <Setter Property="Width" Value="400"/>
80: <Setter Property="Height" Value ="200"/>
81: <Setter Property="Foreground" Value="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’渐渐变小。
界面不是太漂亮，只是学学了解下这些触发器。
时间： 2024-10-09 07:01:37