前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >WPF中触发器Trigger、MultiTrigger、DataTrigger、MultiDataTrigger

WPF中触发器Trigger、MultiTrigger、DataTrigger、MultiDataTrigger

作者头像
zls365
发布2021-01-28 20:22:13
发布2021-01-28 20:22:13
3.4K00
代码可运行
举报
文章被收录于专栏:CSharp编程大全CSharp编程大全
运行总次数:0
代码可运行

WPF中有种叫做触发器的东西(记住不是数据库的trigger哦)。它的主要作用是根据trigger的不同条件来自动更改外观属性,或者执行动画等操作。

WPFtrigger的主要类型有:Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger几种。从字面意思上我们想大家已经知道个大概,接下来我将还会用实例代码逐一进行介绍。trigger主要运用的场景在Style、ControlTemplate、DataTemplate三个地方。在这些地方可以使用trigger,具体视情况而定。

1.在Style中使用各种trigger

在style中使用的trigger主要是属性的触发器,当属性的值发生改变是将会引发触发器。

a.普通属性trigger 当鼠标滑过时字体变成红色

代码语言:javascript
代码运行次数:0
运行
复制
<span>  </span><CheckBox Content="Style Trigger MouseOver Red"> 
            <CheckBox.Resources> 
                <Style TargetType="{x:Type CheckBox}"> 
                    <Setter Property="Foreground" Value="SkyBlue"/> 
                    <Style.Triggers> 
                        <!--鼠标滑过时字体为红色--> 
                        <Trigger Property="IsMouseOver" Value="True"> 
                            <Setter Property="Foreground" Value="Red"/> 
                        </Trigger> 
                    </Style.Triggers> 
</Style> 
            </CheckBox.Resources> 
        </CheckBox>

b.普通属性MultiTrigger 当checkbox勾选并且鼠标滑过时字体变成绿色

代码语言:javascript
代码运行次数:0
运行
复制
<span>  </span><CheckBox Content="Style MultiTrigger Checked and MouseOver Green "> 
            <CheckBox.Resources> 
                <Style TargetType="{x:Type CheckBox}"> 
                    <Setter Property="Foreground" Value="SkyBlue"/> 
                    <Style.Triggers> 
                        <MultiTrigger> 
                            <MultiTrigger.Conditions> 
                                <Condition Property="IsChecked" Value="True" /> 
                                <Condition Property="IsMouseOver" Value="True" /> 
                            </MultiTrigger.Conditions> 
                            <Setter Property="Foreground" Value="Green"/> 
                        </MultiTrigger> 
                    </Style.Triggers> 
</Style> 
            </CheckBox.Resources> 
        </CheckBox>

c.EventTrigger 鼠标划入长度变长 鼠标移出 长度变短

代码语言:javascript
代码运行次数:0
运行
复制
<CheckBox Content="Style EventTrigger " Width="70" HorizontalAlignment="Left"> 
           <CheckBox.Resources> 
               <Style TargetType="{x:Type CheckBox}"> 
                   <Setter Property="Foreground" Value="SkyBlue"/> 
                   <Style.Triggers> 
                       <EventTrigger RoutedEvent="Mouse.MouseEnter"> 
                           <EventTrigger.Actions> 
                               <BeginStoryboard> 
                                   <Storyboard> 
                                       <DoubleAnimation 
                                         Duration="0:0:0.2" 
                                         Storyboard.TargetProperty="Width" 
                                         To="150"  /> 
                                   </Storyboard> 
                               </BeginStoryboard> 
                           </EventTrigger.Actions> 
                       </EventTrigger> 
                       <EventTrigger RoutedEvent="Mouse.MouseLeave"> 
                           <EventTrigger.Actions> 
                               <BeginStoryboard> 
                                   <Storyboard> 
                                       <DoubleAnimation 
                                         Duration="0:0:0.2" 
                                         Storyboard.TargetProperty="Width" 
                                         To="70"  /> 
                                   </Storyboard> 
                               </BeginStoryboard> 
                           </EventTrigger.Actions> 
                       </EventTrigger> 
                   </Style.Triggers> 
</Style> 
           </CheckBox.Resources> 
       </CheckBox>

2.在ControlTemplate中使用trigger

在ControlTemplate中使用的trigger主要是在controltemplate中的元素的触发器,当属性的值发生改变是将会引发触发器。

属性为“Border” 的鼠标滑过时背景变色,其他的trigger同上面的style一样 这里就不多举例了

代码语言:javascript
代码运行次数:0
运行
复制
<Button Content="ControlTemplate" Width="120" Height="30"> 
            <Button.Resources> 
                <Style TargetType="{x:Type Button}"> 
                    <Setter Property="Background" Value="Gray"/> 
                    <Setter Property="BorderBrush" Value="Black"/> 
                    <Setter Property="Cursor" Value="Hand"/> 
                    <Setter Property="Template"> 
                        <Setter.Value> 
                            <ControlTemplate TargetType="{x:Type Button}"> 
                                <StackPanel> 
                                    <Border Height="10" Background="Red"></Border> 
                                    <Border x:Name="Border" CornerRadius="0" BorderThickness="1"  Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"> 
                                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/> 
                                    </Border> 
                                </StackPanel> 
                                 
                                <ControlTemplate.Triggers> 
                                    <Trigger Property="IsMouseOver" Value="True"> 
                                        <Setter TargetName="Border" Property="Background" Value="#FFC2E0FF"/> 
                                        <Setter TargetName="Border" Property="BorderBrush" Value="#FF3399FF"/> 
                                    </Trigger> 
                                </ControlTemplate.Triggers> 
                            </ControlTemplate> 
                        </Setter.Value> 
                    </Setter> 
</Style> 
            </Button.Resources> 
        </Button>

3.在DataTemplate中使用trigger

在DataTemplate中使用trigger可以根据绑定的数据不同显示不同的内容。

代码语言:javascript
代码运行次数:0
运行
复制
<TreeView Name="_tree" Margin="0" BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" ItemsSource="{Binding Children}" > 
                <TreeView.ItemTemplate> 
                    <HierarchicalDataTemplate ItemsSource="{Binding Children}"> 
                        <Border CornerRadius="0" Margin="1"  x:Name="back" MinWidth="70" 
                                Background="Transparent" DataContext="{Binding}" PreviewMouseMove="TreeItem_PreviewMouseMove"> 
                            <StackPanel Orientation="Horizontal" Margin="2"> 
                                <Image x:Name="BGimage" Source="/Vdc3D.Coms.DModelEditor;component/Images/item.png" Height="15" Width="15" /> 
                                <TextBlock Text="{Binding ShowText}" Margin="2 0"/> 
                            </StackPanel> 
                            <Border.ContextMenu> 
                                <ContextMenu x:Name="menu" > 
                                    <MenuItem Header="Add Directory" x:Name="menu_addDir" Click="AddDir_Click" DataContext="{Binding}"/> 
                                    <MenuItem Header="Add Property" x:Name="menu_addChild"  Click="AddChild_Click" DataContext="{Binding}"/> 
                                    <MenuItem Header="Edit" Click="Modify_Click" DataContext="{Binding}"/> 
                                    <MenuItem Header="Delete" Click="Delete_Click" DataContext="{Binding}"/> 
                                </ContextMenu> 
                            </Border.ContextMenu> 
                        </Border> 
                        <HierarchicalDataTemplate.Triggers> 
                            <MultiDataTrigger> 
                                <MultiDataTrigger.Conditions> 
                                    <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TreeViewItem}},Path=IsExpanded}"  Value="False"/> 
                                    <Condition Binding="{Binding IsDir}" Value="True"/> 
                                </MultiDataTrigger.Conditions> 
                                <MultiDataTrigger.Setters> 
                                    <Setter TargetName="BGimage" Property="Source" Value="/Vdc3D.Coms.DModelEditor;component/Images/dir.png" /> 
                                </MultiDataTrigger.Setters> 
                            </MultiDataTrigger> 
                            <MultiDataTrigger> 
                                <MultiDataTrigger.Conditions> 
                                    <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TreeViewItem}},Path=IsExpanded}"  Value="True"/> 
                                    <Condition Binding="{Binding IsDir}" Value="True"/> 
                                </MultiDataTrigger.Conditions> 
                                <MultiDataTrigger.Setters> 
                                    <Setter TargetName="BGimage" Property="Source" Value="/Vdc3D.Coms.DModelEditor;component/Images/dir_open.png" /> 
                                </MultiDataTrigger.Setters> 
                            </MultiDataTrigger> 
                            <DataTrigger Binding="{Binding IsDir}" Value="True"> 
                                <Setter TargetName="menu_addDir"  Property="Visibility" Value="Visible"/> 
                                <Setter TargetName="menu_addChild"  Property="Visibility" Value="Visible"/> 
                            </DataTrigger> 
                            <DataTrigger Binding="{Binding IsDir}" Value="False"> 
                                <Setter TargetName="menu_addDir"  Property="Visibility" Value="Collapsed"/> 
                                <Setter TargetName="menu_addChild"  Property="Visibility" Value="Collapsed"/> 
                            </DataTrigger> 
                        </HierarchicalDataTemplate.Triggers> 
                    </HierarchicalDataTemplate> 
                </TreeView.ItemTemplate> 
            </TreeView>

这是一个treeview控件 根据绑定的isdir值不同 可以显示icon是一个目录(文件夹)或者是一个文件,看是不是很简单呢

补充,button控件从资源样式中使用MultiTrigger

代码语言:javascript
代码运行次数:0
运行
复制
<Window x:Class="WpfApp9.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp9"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="baseButtonStyle"  TargetType="Button">
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="Foreground" Value="Blue"/>
            <Setter Property="Background" Value="Gray"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="#FFFF7300"/>
                        <GradientStop Offset="1" Color="#03FF0000"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <!--<Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="FontSize" Value="20"/>
                </Trigger>-->
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="true"/>
                        <Condition Property="IsFocused" Value="true"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="FontSize" Value="20"/>
                </MultiTrigger>
            </Style.Triggers>
</Style>
        <Style x:Key="baseButtonStyle1"  TargetType="Button" BasedOn="{StaticResource baseButtonStyle}">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="40"/>
</Style>
        <Style x:Key="baseButtonStyle2"  TargetType="Button" BasedOn="{StaticResource baseButtonStyle1}">
            <Setter Property="Width" Value="120"/>
            <Setter Property="Height" Value="50"/>
</Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Style="{StaticResource baseButtonStyle}" Content="hello"/>
            <Button Style="{StaticResource baseButtonStyle1}" Content="hello"/>
            <Button Style="{StaticResource baseButtonStyle2}" Content="hello"/>
        </StackPanel>
    </Grid>
</Window>

以上只是简单的介绍了trigger的一些用法,具体的功能大家可以自由发挥,这也是wpf的强大之处

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-01-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CSharp编程大全 微信公众号,前往查看

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档