zoukankan      html  css  js  c++  java
  • WPF中触发器Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger几种

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

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

    1.在Style中使用各种trigger

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

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

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

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

    <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的强大之处

     
  • 相关阅读:
    几种跨平台解决方案:React Native、Kotlin、Flutter、Swift
    vue组件化
    flutter学习笔记(合集)
    sessionStorage获取用户行为
    什么是深度学习?
    javascript原生dom的那些事儿
    对象的创建
    初识requirejs
    使用vue-cli3快速构建项目
    python16_day40【数据结构】
  • 原文地址:https://www.cnblogs.com/Im-Victor/p/10680594.html
Copyright © 2011-2022 走看看