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

转载于:https://www.cnblogs.com/zhcw/archive/2013/01/12/2857433.html

你可能感兴趣的:(WPF触发器(Trigger、DataTrigger、EventTrigger))