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  当鼠标滑过时字体变成红色

    [csharp] view plaincopyprint?
    1. <span>  </span><CheckBox Content="Style Trigger MouseOver Red"> 
    2.             <CheckBox.Resources> 
    3.                 <Style TargetType="{x:Type CheckBox}"> 
    4.                     <Setter Property="Foreground" Value="SkyBlue"/> 
    5.                     <Style.Triggers> 
    6.                         <!--鼠标滑过时字体为红色--> 
    7.                         <Trigger Property="IsMouseOver" Value="True"> 
    8.                             <Setter Property="Foreground" Value="Red"/> 
    9.                         </Trigger> 
    10.                     </Style.Triggers> 
    11.                 </Style> 
    12.             </CheckBox.Resources> 
    13.         </CheckBox> 

    b.普通属性MultiTrigger  当checkbox勾选并且鼠标滑过时字体变成绿色
    [csharp] view plaincopyprint?
    1. <span>  </span><CheckBox Content="Style MultiTrigger Checked and MouseOver Green "> 
    2.             <CheckBox.Resources> 
    3.                 <Style TargetType="{x:Type CheckBox}"> 
    4.                     <Setter Property="Foreground" Value="SkyBlue"/> 
    5.                     <Style.Triggers> 
    6.                         <MultiTrigger> 
    7.                             <MultiTrigger.Conditions> 
    8.                                 <Condition Property="IsChecked" Value="True" /> 
    9.                                 <Condition Property="IsMouseOver" Value="True" /> 
    10.                             </MultiTrigger.Conditions> 
    11.                             <Setter Property="Foreground" Value="Green"/> 
    12.                         </MultiTrigger> 
    13.                     </Style.Triggers> 
    14.                 </Style> 
    15.             </CheckBox.Resources> 
    16.         </CheckBox> 


    c.EventTrigger 鼠标划入长度变长 鼠标移出 长度变短
    [csharp] view plaincopyprint?
    1. <CheckBox Content="Style EventTrigger " Width="70" HorizontalAlignment="Left"> 
    2.            <CheckBox.Resources> 
    3.                <Style TargetType="{x:Type CheckBox}"> 
    4.                    <Setter Property="Foreground" Value="SkyBlue"/> 
    5.                    <Style.Triggers> 
    6.                        <EventTrigger RoutedEvent="Mouse.MouseEnter"> 
    7.                            <EventTrigger.Actions> 
    8.                                <BeginStoryboard> 
    9.                                    <Storyboard> 
    10.                                        <DoubleAnimation 
    11.                                          Duration="0:0:0.2" 
    12.                                          Storyboard.TargetProperty="Width" 
    13.                                          To="150"  /> 
    14.                                    </Storyboard> 
    15.                                </BeginStoryboard> 
    16.                            </EventTrigger.Actions> 
    17.                        </EventTrigger> 
    18.                        <EventTrigger RoutedEvent="Mouse.MouseLeave"> 
    19.                            <EventTrigger.Actions> 
    20.                                <BeginStoryboard> 
    21.                                    <Storyboard> 
    22.                                        <DoubleAnimation 
    23.                                          Duration="0:0:0.2" 
    24.                                          Storyboard.TargetProperty="Width" 
    25.                                          To="70"  /> 
    26.                                    </Storyboard> 
    27.                                </BeginStoryboard> 
    28.                            </EventTrigger.Actions> 
    29.                        </EventTrigger> 
    30.                    </Style.Triggers> 
    31.                </Style> 
    32.            </CheckBox.Resources> 
    33.        </CheckBox> 

    2.在ControlTemplate中使用trigger

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

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

    [csharp] view plaincopyprint?
    1. <Button Content="ControlTemplate" Width="120" Height="30"> 
    2.             <Button.Resources> 
    3.                 <Style TargetType="{x:Type Button}"> 
    4.                     <Setter Property="Background" Value="Gray"/> 
    5.                     <Setter Property="BorderBrush" Value="Black"/> 
    6.                     <Setter Property="Cursor" Value="Hand"/> 
    7.                     <Setter Property="Template"> 
    8.                         <Setter.Value> 
    9.                             <ControlTemplate TargetType="{x:Type Button}"> 
    10.                                 <StackPanel> 
    11.                                     <Border Height="10" Background="Red"></Border> 
    12.                                     <Border x:Name="Border" CornerRadius="0" BorderThickness="1"  Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"> 
    13.                                         <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/> 
    14.                                     </Border> 
    15.                                 </StackPanel> 
    16.                                  
    17.                                 <ControlTemplate.Triggers> 
    18.                                     <Trigger Property="IsMouseOver" Value="True"> 
    19.                                         <Setter TargetName="Border" Property="Background" Value="#FFC2E0FF"/> 
    20.                                         <Setter TargetName="Border" Property="BorderBrush" Value="#FF3399FF"/> 
    21.                                     </Trigger> 
    22.                                 </ControlTemplate.Triggers> 
    23.                             </ControlTemplate> 
    24.                         </Setter.Value> 
    25.                     </Setter> 
    26.                 </Style> 
    27.             </Button.Resources> 
    28.         </Button> 

    3.在DataTemplate中使用trigger

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

    [csharp] view plaincopyprint?
    1. <TreeView Name="_tree" Margin="0" BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" ItemsSource="{Binding Children}" > 
    2.                 <TreeView.ItemTemplate> 
    3.                     <HierarchicalDataTemplate ItemsSource="{Binding Children}"> 
    4.                         <Border CornerRadius="0" Margin="1"  x:Name="back" MinWidth="70" 
    5.                                 Background="Transparent" DataContext="{Binding}" PreviewMouseMove="TreeItem_PreviewMouseMove"> 
    6.                             <StackPanel Orientation="Horizontal" Margin="2"> 
    7.                                 <Image x:Name="BGimage" Source="/Vdc3D.Coms.DModelEditor;component/Images/item.png" Height="15" Width="15" /> 
    8.                                 <TextBlock Text="{Binding ShowText}" Margin="2 0"/> 
    9.                             </StackPanel> 
    10.                             <Border.ContextMenu> 
    11.                                 <ContextMenu x:Name="menu" > 
    12.                                     <MenuItem Header="Add Directory" x:Name="menu_addDir" Click="AddDir_Click" DataContext="{Binding}"/> 
    13.                                     <MenuItem Header="Add Property" x:Name="menu_addChild"  Click="AddChild_Click" DataContext="{Binding}"/> 
    14.                                     <MenuItem Header="Edit" Click="Modify_Click" DataContext="{Binding}"/> 
    15.                                     <MenuItem Header="Delete" Click="Delete_Click" DataContext="{Binding}"/> 
    16.                                 </ContextMenu> 
    17.                             </Border.ContextMenu> 
    18.                         </Border> 
    19.                         <HierarchicalDataTemplate.Triggers> 
    20.                             <MultiDataTrigger> 
    21.                                 <MultiDataTrigger.Conditions> 
    22.                                     <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TreeViewItem}},Path=IsExpanded}"  Value="False"/> 
    23.                                     <Condition Binding="{Binding IsDir}" Value="True"/> 
    24.                                 </MultiDataTrigger.Conditions> 
    25.                                 <MultiDataTrigger.Setters> 
    26.                                     <Setter TargetName="BGimage" Property="Source" Value="/Vdc3D.Coms.DModelEditor;component/Images/dir.png" /> 
    27.                                 </MultiDataTrigger.Setters> 
    28.                             </MultiDataTrigger> 
    29.                             <MultiDataTrigger> 
    30.                                 <MultiDataTrigger.Conditions> 
    31.                                     <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TreeViewItem}},Path=IsExpanded}"  Value="True"/> 
    32.                                     <Condition Binding="{Binding IsDir}" Value="True"/> 
    33.                                 </MultiDataTrigger.Conditions> 
    34.                                 <MultiDataTrigger.Setters> 
    35.                                     <Setter TargetName="BGimage" Property="Source" Value="/Vdc3D.Coms.DModelEditor;component/Images/dir_open.png" /> 
    36.                                 </MultiDataTrigger.Setters> 
    37.                             </MultiDataTrigger> 
    38.                             <DataTrigger Binding="{Binding IsDir}" Value="True"> 
    39.                                 <Setter TargetName="menu_addDir"  Property="Visibility" Value="Visible"/> 
    40.                                 <Setter TargetName="menu_addChild"  Property="Visibility" Value="Visible"/> 
    41.                             </DataTrigger> 
    42.                             <DataTrigger Binding="{Binding IsDir}" Value="False"> 
    43.                                 <Setter TargetName="menu_addDir"  Property="Visibility" Value="Collapsed"/> 
    44.                                 <Setter TargetName="menu_addChild"  Property="Visibility" Value="Collapsed"/> 
    45.                             </DataTrigger> 
    46.                         </HierarchicalDataTemplate.Triggers> 
    47.                     </HierarchicalDataTemplate> 
    48.                 </TreeView.ItemTemplate> 
    49.             </TreeView> 

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

    以上只是简单的介绍了trigger的一些用法，具体的功能大家可以自由发挥，这也是wpf的强大之处
  • 相关阅读:
    Swift # Apple Pay集成
    GitHub Top 100 简介
    一些常用算法
    CocoaPods 建立私有仓库
    安装 CocoaPods & Alcatraz
    iOS程序 # 启动过程
    Apache & WebDav 配置（二）
    SVN & Git （二）
    SVN & Git （一）
    poj 3169 Layout （差分约束）
  • 原文地址：https://www.cnblogs.com/fx2008/p/2755232.html
Copyright © 2011-2022 走看看