前言
触发器用五种
- Triggers
- MultiTriggers
- EventTrigger
- DataTrigger
- MultiDataTrigger
Triggers
根据组件属性的值变化触发
1
2
3
4
5
| <Style.Triggers>
<Trigger Property="Control.IsFocused" Value="True">
<Setter Property="Control.Foreground" Value="DarkRed" />
</Trigger>
</Style.Triggers>
|
MultiTriggers
满足多个条件触发
1
2
3
4
5
6
7
8
9
10
| <Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True"></Condition>
<Condition Property="Content" Value="{x:Null}"></Condition>
</MultiTrigger.Conditions>
<Setter Property="ToolTip" Value="content is null!"></Setter>
</MultiTrigger>
</Style.Triggers>
|
EventTrigger
根据事件触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <Style TargetType="ListBoxItem">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="MaxHeight" Value="75" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter Property="Opacity" Value="1.0" />
</Trigger.Setters>
</Trigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0.2"
Storyboard.TargetProperty="MaxHeight"
To="90" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:1"
Storyboard.TargetProperty="MaxHeight" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
|
DataTrigger
绑定的值变化时触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <Image x:Name="topimage" HorizontalAlignment="Center" Width="21">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding IsRight}" Value="true">
<Setter Property="Source" Value="Images/ToolBar/toobar_0.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsRight}" Value="false">
<Setter Property="Source" Value="Images/ToolBar/toobar_8.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
|
简单示例
主要实现了 按钮选中和非选中状态下图标，文字样式的改变，以及使用模板取消Button原有的鼠标悬浮样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <Button x:Name="toolbar_item" Width="60" BorderThickness="0" Cursor="Hand" Height="60" Click="menu_item_Click">
<Button.Content>
<StackPanel Width="Auto" Background="Transparent">
<Image HorizontalAlignment="Center" Width="23" Source="{Binding Pic}"/>
<TextBlock x:Name="menu_name" HorizontalAlignment="Center" Margin="0 2 0 0" Text="{Binding Name}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="#3C525B"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Selected}" Value="true">
<Setter Property="Foreground" Value="#ffffff"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Button.Content>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#eee" />
</Trigger>
<DataTrigger Binding="{Binding Selected}" Value="true">
<Setter Property="Background" Value="#136efb"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
|