• WPF触发器(Trigger、DataTrigger、EventTrigger)


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

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

      1.在Style中使用各种trigger

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

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

    <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勾选并且鼠标滑过时字体变成绿色

    <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 鼠标划入长度变长 鼠标移出 长度变短

     <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一样 这里就不多举例了

    <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可以根据绑定的数据不同显示不同的内容。

    <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是一个目录(文件夹)或者是一个文件,看是不是很简单呢

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

      本文来自lhx527099095的博客,原文地址:http://blog.csdn.net/lhx527099095/article/details/8029207

  • 相关阅读:
    51nod 2080 最长上升子序列
    common js
    es Module
    git关于分支的常用操作
    react实现浏览器的返回、前进、刷新,关闭拦截
    Blob,ArrayBuffer,FileReader,FormData,Buffer的理解
    memo、useCallback、useMemo三者的区别
    npm 和 yarn的全局安装位置
    react中单行文本溢出省略号
    react中基于styled-components组件的一像素边框问题
  • 原文地址:https://www.cnblogs.com/zhcw/p/2857433.html
Copyright © 2020-2023  润新知