WPF触发器与模板

互联网底层民工2024-03-16 9:52

触发器

触发器可以理解为，当达到了触发的条件，那么就执行预期内的响应，可以是样式、数据变化、动画等。触发器通过Style.Triggers集合连接到样式中，每个样式都可以有任意多个触发器，并且每个触发器都是System.Windows.TriggerBase的派生类实例，以下是触发器的类型：

  • Trigger：监测依赖属性的变化、触发器生效
  • MultiTrigger：通过多个条件的设置、达到满足条件、触发器生效
  • DataTrigger：通过数据的变化、触发器生效
  • MultiDataTrigger：多个数据条件的触发器
  • EventTrigger：事件触发器，触发了某类事件时，触发器生效

属性触发器

Trigger：监测依赖属性的变化、触发器生效

xaml 复制代码 
<Window x:Class="EventLearn.UseStyle"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:EventLearn"
        mc:Ignorable="d"
        Title="UseStyle" Height="450" Width="800">

    <Window.Resources>
        <Style x:Key="BaseStyle" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Foreground" Value="Red"/>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Blue"/>
                    <Setter Property="FontSize" Value="20"/>
                </Trigger>
                
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="FontSize" Value="15"/>
                </Trigger>                
            </Style.Triggers>
        </Style>
        
        <Style x:Key="style1" TargetType="Button" BasedOn="{StaticResource BaseStyle}">
            <Setter Property="Content" Value="Hello"/>
        </Style>
        
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Style="{StaticResource style1}" />
            <Button Style="{StaticResource style1}"/>
            <Button Style="{StaticResource style1}"/>
        </StackPanel>
    </Grid>
</Window>

Trigger类定义的属性

Tirgger属性 说明
Property Value 使用属性触发器，Property和Value属性用于指定触发器的激活时间。例如，Property = "IsMouseOver" ,Value = "True"
Setters 一旦激活触发器，就可以使用Setters定义一个Setter元素集合，来改变属性值。Setter类定义Property、TargetName和Value属性，已修改对象属性。
EnterActions ExitActions 除了定义 settm之 外,还可以定义 EnterActions 和 ExitActions。使用这两个属性,可以定义一个TriggerAction元素集合。EnterActions在启动触发器时激活(此时通过属性触发器应用Property/Value组合）。ExitActions在触发器结束之前激活（此时不再应用Property/Value组合）

多触发器

MultiTrigger：通过多个条件的设置、达到满足条件、触发器生效

MultiTrigger有一个Conditions属性，可以在其中设置属性的有效值。还有一个Setters属性，可以在其中指定需要设置的属性

xaml 复制代码 
<Window
    x:Class="EventLearn.UseStyle"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:EventLearn"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="UseStyle"
    Width="800"
    Height="450"
    mc:Ignorable="d">

    <Window.Resources>
        <Style x:Key="BaseStyle" TargetType="TextBox">
            <Setter Property="Width" Value="100" />
            <Setter Property="Height" Value="40" />
            <Setter Property="Foreground" Value="Red" />

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Blue" />
                    <Setter Property="FontSize" Value="20" />
                </Trigger>

                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Foreground" Value="Red" />
                    <Setter Property="FontSize" Value="15" />
                </Trigger>

                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="true"/>
                        <Condition Property="IsFocused" Value="true"/>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Background" Value="Pink"/>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="style1" TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseStyle}">
            
        </Style>

    </Window.Resources>
    <Grid>
        <StackPanel>
            <TextBox Style="{StaticResource style1}" />
            <TextBox Style="{StaticResource style1}" />
            <TextBox Style="{StaticResource style1}" />
        </StackPanel>
    </Grid>
</Window>

数据触发器

DataTrigger：通过数据的变化、触发器生效

xaml 复制代码 
<Window
    x:Class="EventLearn.UseStyle"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:EventLearn"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="UseStyle"
    Width="800"
    Height="450"
    mc:Ignorable="d">

    <Window.Resources>
        <Style x:Key="BaseStyle" TargetType="TextBox">
            <Setter Property="Width" Value="100" />
            <Setter Property="Height" Value="40" />
            <Setter Property="Foreground" Value="Red" />

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Blue" />
                    <Setter Property="FontSize" Value="20" />
                </Trigger>

                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Foreground" Value="Red" />
                    <Setter Property="FontSize" Value="15" />
                </Trigger>

                <!--  当在TextBox中写入123时，背景颜色变绿  -->
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Text}" Value="123">
                    <Setter Property="Background" Value="SeaGreen" />
                </DataTrigger>
                
            </Style.Triggers>
        </Style>

        <Style
            x:Key="style1"
            BasedOn="{StaticResource BaseStyle}"
            TargetType="{x:Type TextBox}" />

    </Window.Resources>
    <Grid>
        <StackPanel>
            <TextBox Style="{StaticResource style1}" />
            <TextBox Style="{StaticResource style1}" />
            <TextBox Style="{StaticResource style1}" />
        </StackPanel>
    </Grid>
</Window>

模板

控件的外观及其功能在WPF中是完全分离的。虽然按钮有默认的外观，但可以用模板完全定制其外观。

WPF提供了几个模板类型，它们派生自基类FrameworkTemplate。

模板类型 说明
ControlTemplate 使用ControlTemplate可以指定控件的可视化结构，重新设计其外观
ItemsPanelTemplate 对于ItemsControl，可以赋予一个ItemsPanelTemplate，以指定其项的布局。每个ItemsControl都有一个默认的ItemsPanelTemplate。MenuItem使用WrapPanel，StatusBar使用DockPanel，ListBox使用VirtualizingStackPanel。
DataTemplate DataTemplates非常适用于对象的图形表示。给列表框指定样式，默认情况下，列表框中的项根据ToString()方法的输出来显示。应用DataTemplate，可以重写其操作，定义项的自定义表示
HierarchicalDataTemplate HierarchicalDataTemplate用于排列对象的树形结构。这个控件支持HierarchicalControls，如TreeViewItem和MenuItem

ControlTemplate

控件模板用来定义控件的外观、样式，还可通过控件模板的触发器（ControlTemplate.Triggers）修改控件的行为、响应动画等。

  • 对于WPF当中，每个控件都是无外观的，这意味着我们可以完全自定义其可视化的外观，但是不能修改其内部的行为，因为空间的行为已经被固定在控件的具体类中。
  • 在Winform当中，控件的外观与行为都被固定在空间的具体类中，当我们想要修改按钮的边框弧度或者修改控件身一些细节的时候，我们需要修改外观的同时，把原来具备的所有行为重写一遍，我们大多数称之为自定义控件。

ContentPresenter是控件内容的占位符，并定义了放置这些内容的位置。ContentPresenter的Content属性定义了内容的外观。

DataTemplate

xaml 复制代码 
<Window
    x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <ListBox ItemsSource="{Binding ElementName=com, Path=ItemsSource}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" />
                        <TextBlock Text="---" />
                        <TextBlock Text="{Binding Sex}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <ComboBox
            x:Name="com"
            Width="100"
            Height="20">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" />
                        <TextBlock Text="---" />
                        <TextBlock Text="{Binding Sex}" />
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</Window>
相关推荐
晚安苏州5 小时前
WPF DataTemplate 数据模板
wpf
甜甜不吃芥末1 天前
WPF依赖属性详解
wpf
Hat_man_1 天前
WPF制作图片闪烁的自定义控件
wpf
晚安苏州2 天前
WPF Binding 绑定
wpf·wpf binding·wpf 绑定
wangnaisheng2 天前
【WPF】RenderTargetBitmap的使用
wpf
dotent·3 天前
WPF 完美解决改变指示灯的颜色
wpf
orangapple5 天前
WPF 用Vlc.DotNet.Wpf实现视频播放、停止、暂停功能
wpf·音视频
ysdysyn5 天前
wpf mvvm 数据绑定数据（按钮文字表头都可以），根据长度进行换行，并把换行的文字居中
c#·wpf·mvvm
orangapple5 天前
WPF 使用LibVLCSharp.WPF实现视频播放、停止、暂停功能
wpf
晚安苏州5 天前
WPF ControlTemplate 控件模板
wpf
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）