WPF桌面端开发4-触发器

发表于 | 分类于
WPF桌面端开发

前言

触发器用五种

  • 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>