IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发测试 -> WPF 基础 - Trigger -> 正文阅读

[开发测试]WPF 基础 - Trigger

1.1 由属性值触发的 Trigger

最基本的触发器,Property 是关注的属性名称,value 是触发条件,一旦触发条件满足,就会应用 Trigger 的 Setters,触发条件不再满足时,各属性值会被还原。

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="CheckBox" >
            <Setter Property="Height" Value="25"/>
            <Setter Property="Margin" Value="5 0"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="FontSize" Value="15"/>
                    <Setter Property="Foreground" Value="LightSkyBlue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>
    <CheckBox Content="篮球" />
    <CheckBox Content="香蕉" />
    <CheckBox Content="单车" />
    <CheckBox Content="自驾" />
</StackPanel>

1.2 MultiTrigger

MultiTrigger 指多个条件下同时成立时触发,MultiTrigger 比 Trigger 多了一个 Conditions 属性,需要同时成立的条件就在这个集合里。

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="CheckBox" >
            <Setter Property="Height" Value="25"/>
            <Setter Property="Margin" Value="5 0"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="FontSize" Value="15"/>
                    <Setter Property="Foreground" Value="LightSkyBlue"/>
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsChecked" Value="True"/>
                        <Condition Property="Content" Value="香蕉"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="FontSize" Value="17"/>
                    <Setter Property="Foreground" Value="Red"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>
    <CheckBox Content="篮球" />
    <CheckBox Content="香蕉" />
    <CheckBox Content="单车" />
    <CheckBox Content="自驾" />
</StackPanel>

多个 Trigger 或 MultiTrigger 时,会按代码的顺序触发,比如点击香蕉,FontSize 最终是 17,如果把 MultiTrigger 实例写在 Trigger 实例前面,点击香蕉后,FontSize 的值是 Trigger 的 15 。

1.3 由数据触发的 DataTrigger

<StackPanel>
    <local:LongToBoolConverter x:Key="cvtltb"/>
    <StackPanel.Resources>
        <Style TargetType="TextBox">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self},
                                               Path=Text.Length,
                                               Converter={StaticResource cvtltb}}"
                             Value="True">
                    <Setter Property="Foreground" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>
    <TextBox />
</StackPanel>
public class LongToBoolConverter : System.Windows.Data.IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (int)value > 6 ? true : false;
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

1.4 MultiDataTrigger

public class Student
{
    public string Id { get; set; }
    public string Name { get; set; }
    public bool LoveBasketball { get; set; }
}
...
<Window.Resources>
    <coll:ArrayList x:Key="stuList">
        <local:Student Id="1" Name="D1" LoveBasketball="True"></local:Student>
        <local:Student Id="2" Name="D2" LoveBasketball="False"></local:Student>
        <local:Student Id="3" Name="D3" LoveBasketball="True"></local:Student>
        <local:Student Id="3" Name="D4" LoveBasketball="False"></local:Student>
        <local:Student Id="5" Name="D5" LoveBasketball="True"></local:Student>
        <local:Student Id="6" Name="D6" LoveBasketball="False"></local:Student>
    </coll:ArrayList>
</Window.Resources>
<StackPanel MenuItem.Click="StackPanel_Click">
    <StackPanel.Resources>
        <Style TargetType="ListBoxItem">
            <Setter Property="ContentTemplate" Value="{StaticResource it}"/>
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Id}" Value="3"/>
                        <Condition Binding="{Binding Name}" Value="D3"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="Red"></Setter>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>
    <ListBox ItemsSource="{StaticResource stuList}"/>
</StackPanel>

1.5 由事件触发的 EventTrigger

EventTrigger 触发后并非应用一组 Setter,而是执行一段动画,因此 UI 的动画效果往往跟 EventTrigger 相关联。

<Button Content="确认">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Width" Value="200"/>
            <Setter Property="Height" Value="30"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="400" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
                                <DoubleAnimation To="60" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
                                <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

微软官方文档中对 Trigger 的介绍很简洁明了:

https://docs.microsoft.com/zh-cn/dotnet/desktop/wpf/fundamentals/styles-templates-overview?view=netdesktop-5.0#triggers

  开发测试 最新文章
pytest系列——allure之生成测试报告(Wind
某大厂软件测试岗一面笔试题+二面问答题面试
iperf 学习笔记
关于Python中使用selenium八大定位方法
【软件测试】为什么提升不了?8年测试总结再
软件测试复习
PHP笔记-Smarty模板引擎的使用
C++Test使用入门
【Java】单元测试
Net core 3.x 获取客户端地址
上一篇文章      下一篇文章      查看所有文章
加:2022-05-10 12:13:06  更:2022-05-10 12:13:50 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 3:29:42-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码