zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    How to build Linux system from kernel to UI layer
    Writing USB driver for Android
    Xposed Framework for Android 8.x Oreo is released (in beta)
    Linux Smartphone Operating Systems You Can Install Today
    Librem 5 Leads New Wave of Open Source Mobile Linux Contenders
    GUADEC: porting GNOME to Android
    Librem 5 – A Security and Privacy Focused Phone
    GNOME and KDE Join Librem 5 Linux Smartphone Party
    Purism计划推出安全开源的Linux Librem 5智能手机
    国产系统之殇:你知道的这些系统都是国外的
  • 原文地址:https://www.cnblogs.com/sjqq/p/7768552.html
Copyright © 2011-2022 走看看