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



  • 14
    点赞
  • 63
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
WPF中,可以使用DataTrigger来绑定ListBox中每个Item的Index属性,并根据其值来设置Trigger的行为。 以下是一个示例,演示如何在Trigger中获取ListBox中每个Item的Index: ```xml <ListBox x:Name="MyListBox"> <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="Background" Value="White"/> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=(ItemsControl.AlternationIndex)}" Value="0"> <Setter Property="Background" Value="LightBlue"/> </DataTrigger> <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=(ItemsControl.AlternationIndex)}" Value="1"> <Setter Property="Background" Value="LightGray"/> </DataTrigger> </Style.Triggers> </Style> </ListBox.ItemContainerStyle> <ListBoxItem Content="Item 1"/> <ListBoxItem Content="Item 2"/> <ListBoxItem Content="Item 3"/> <ListBoxItem Content="Item 4"/> <ListBoxItem Content="Item 5"/> </ListBox> ``` 在上面的示例中,使用了ListBox的AlternationIndex属性来获取每个Item的Index。 AlternationIndex是WPF中的一个内置属性,它为ListBox中的每个Item提供了一个唯一的整数值,可以用于在Trigger中设置行为。 在上面的示例中,如果Index为偶数,则将该Item的背景色设置为LightGray,如果为奇数,则将其背景色设置为LightBlue。 注意:在使用AlternationIndex属性时,需要将ListBox的AlternationCount属性设置为一个大于1的值,以便为每个Item分配一个唯一的Index。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值