前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WPF桌面端开发4-触发器

WPF桌面端开发4-触发器

作者头像
码客说
发布2020-05-09 14:57:06
4100
发布2020-05-09 14:57:06
举报
文章被收录于专栏:码客码客

前言

触发器用五种

  • Triggers
  • MultiTriggers
  • EventTrigger
  • DataTrigger
  • MultiDataTrigger

Triggers

根据组件属性的值变化触发

代码语言:javascript
复制
<Style.Triggers>
    <Trigger Property="Control.IsFocused" Value="True">
        <Setter Property="Control.Foreground" Value="DarkRed" />
    </Trigger>
</Style.Triggers>

MultiTriggers

满足多个条件触发

代码语言:javascript
复制
<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

根据事件触发

代码语言:javascript
复制
<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

绑定的值变化时触发

代码语言:javascript
复制
<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原有的鼠标悬浮样式

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-12-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • Triggers
  • MultiTriggers
  • EventTrigger
  • DataTrigger
  • 简单示例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档