为什么当我的触发器触发时我的故事板动作被跳过

Question

我有一个 Tabcontrol，我正在尝试添加基于触发器的操作。

使用路由事件，我可以触发我的故事板，并且我的操作按预期响应。现在，如果选择了特定的选项卡标题，我正在尝试阻止我的情节提要操作触发该标题。

这迫使我远离路由事件，因为我无法使用属性条件和路由事件来确定我的故事板是否会执行。

快进，现在我终于可以让 IsMouseOver 像我希望的那样响应鼠标了。 （当鼠标进入和离开 tabitem 标题时，我的背景属性会发生变化和变回。我想我快到了，但只要我添加与我的代码决定变得懒惰并出于某种原因跳过它之前完全相同的故事板。背景设置器仍在被触发，但情节提要保持沉默。

我尝试删除设置器，但情节提要仍然没有触发。

一天结束：我希望为 Is Mouse Over 和 Is Selected 的所有可能组合设置能够在彼此之间很好地过渡的样式。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Tenant_Tool_Analytics_Module.Resources.Components"
                    xmlns:controls="clr-namespace:Tenant_Tool_Analytics_Module.Resources.Components">
    <Style TargetType="{x:Type controls:NavigationElement}">
        <Setter Property="Template">


            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:NavigationElement}">
                    <Border BorderBrush="Black" BorderThickness=".7"  x:Name="Bd">
                        <Grid Width="150" Height="50" Opacity="0.75" x:Name="NavigationElementGrid">


                            <Grid.Background >
                                <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="2.0">
                                    <GradientStop Color="#006A4D" Offset="1.0"/>
                                    <GradientStop Color="#56be88" Offset=".2"/>
                                </RadialGradientBrush >
                            </Grid.Background>
                            <ContentControl Grid.Column="0" Content="{TemplateBinding Icon}"/>
                            <TextBlock x:Name="NavigationElementText" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{TemplateBinding LabelText}" FontFamily="Futura XBlkIt BT" FontSize="12"/>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50" />
                            </Grid.RowDefinitions>
                        </Grid>
                    </Border>
                    <!--
                    Trigger related to when the mouse is over the header
                        I would like it to Execute the doubleanimations 
                    -->
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <!-- Missing condition: If selected = false -->
                            </MultiTrigger.Conditions>
                            <!-- Start BUG the bellow code does not execute -->
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>

                                        <DoubleAnimation Storyboard.TargetName="NavigationElementGrid" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3"/>
                                        <DoubleAnimation Storyboard.TargetName="NavigationElementText" Storyboard.TargetProperty="FontSize" To="14" Duration="0:0:0.3"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <!-- End BUG -->
                            <!-- The triggers are fireing becuase this is being set. -->
                            <Setter Property="Background" TargetName="Bd" Value="Blue"/>
                        </MultiTrigger>

                        <!-- 
                        When the mouse leaves I want it to return to it's original 
                        state. 


                        -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="False"/>
                                <!-- Missing condition: If selected = false -->
                            </MultiTrigger.Conditions>
                            <!-- Start BUG the bellow code does not execute -->
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="NavigationElementGrid" Storyboard.TargetProperty="Opacity" To=".75" Duration="0:0:0.3"/>
                                        <DoubleAnimation Storyboard.TargetName="NavigationElementText" Storyboard.TargetProperty="FontSize" To="12" Duration="0:0:0.3"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <!-- End BUG -->
                            <!-- The triggers are fireing becuase this is being set. -->
                            <Setter Property="Background" TargetName="Bd" Value="Red"/>
                        </MultiTrigger>

                        <!-- Missing two more MultiTriggers (very similar to above) for the cases of if the tab is selected.-->
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

后面的代码

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Tenant_Tool_Analytics_Module.Resources.Components
{
    public class NavigationElement : Control
    {
        public string LabelText
        {
            get
            {
                return (string)GetValue(LabelTextProperty);
            }
            set
            {
                SetValue(LabelTextProperty, value);
            }
        }

        public static readonly DependencyProperty LabelTextProperty =
            DependencyProperty.Register("LabelText", typeof(string), typeof(NavigationElement), new PropertyMetadata(string.Empty));

        public object Icon
        {
            get
            {
                return (object)GetValue(IconProperty);
            }
            set
            {
                SetValue(IconProperty, value);
            }
        }

        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(object), typeof(NavigationElement), new PropertyMetadata(string.Empty));


        public System.Windows.Media.Brush BackgroundColour
        {
            get
            {
                return (System.Windows.Media.Brush)GetValue(BackgroundColourProperty);
            }
            set
            {
                SetValue(BackgroundColourProperty, value);
            }
        }

        public static readonly DependencyProperty BackgroundColourProperty =
            DependencyProperty.Register("BackgroundColour", typeof(System.Windows.Media.Brush), typeof(NavigationElement), new PropertyMetadata(Brushes.Black));

    }
}

实现代码

<Window x:Class="Tenant_Tool_Analytics_Module.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Tenant_Tool_Analytics_Module"
        xmlns:views="clr-namespace:Tenant_Tool_Analytics_Module.Views"
        xmlns:controls="clr-namespace:Tenant_Tool_Analytics_Module.Resources.Components"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel LastChildFill="True">
        <views:HeaderView x:Name="HeaderView" DockPanel.Dock="Top"/>
        <TabControl DockPanel.Dock="Left" TabStripPlacement="Left" Margin="0, 0, 0, 10">
            <TabItem Padding="0">
                <TabItem.Header>
                    <controls:NavigationElement LabelText="Stacking Plan" Icon="{StaticResource StackPlanIcon}"/>
                </TabItem.Header>
                <Button Content="HI"/>
            </TabItem>
            <TabItem Padding="0">
                <TabItem.Header>
                    <controls:NavigationElement LabelText="Tenant Profile" Icon="{StaticResource TenantProfileIcon}"/>
                </TabItem.Header>
                <Button Content="HI"/>
            </TabItem>
            <TabItem Padding="0">
                <TabItem.Header>
                    <controls:NavigationElement LabelText="Submarket" Icon="{StaticResource SubmarketIcon}"/>
                </TabItem.Header>
                <Button Content="HI"/>
            </TabItem>
            <TabItem Padding="0">
                <TabItem.Header>
                    <controls:NavigationElement LabelText="Industry" Icon="{StaticResource IndustryIcon}"/>
                </TabItem.Header>
                <Button Content="HI"/>
            </TabItem>
        </TabControl>
    </DockPanel>
</Window>

Answer 1

我想你没有意识到MultiDataTrigger 对象同时具有EnterActions 和ExitActions 的事实。您可以只使用一个MultiDataTrigger 触发true 并同时使用@987654332，而不是让一个MultiDataTrigger 触发true 并仅触发EnterActions 和另一个MultiDataTrigger 触发false 并仅触发EnterActions @（将对象更改为异常状态）和ExitActions 将其转换回正常状态。

Triggers 集合现在按预期工作，并且作为奖励变得更易于阅读：

<ControlTemplate.Triggers>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsMouseOver" Value="True"/>
            <!-- Missing condition: If selected = false -->
        </MultiTrigger.Conditions>
        <MultiTrigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="NavigationElementGrid"
                                     Storyboard.TargetProperty="Opacity"
                                     To="1"
                                     Duration="0:0:0.3"/>
                    <DoubleAnimation Storyboard.TargetName="NavigationElementText"
                                     Storyboard.TargetProperty="FontSize"
                                     To="14" Duration="0:0:0.3"/>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="BorderBackgroundBrush"
                                                  Storyboard.TargetProperty="Color">
                        <DiscreteColorKeyFrame KeyTime="0" Value="Blue"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </MultiTrigger.EnterActions>
        <MultiTrigger.ExitActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="NavigationElementGrid"
                                     Storyboard.TargetProperty="Opacity"
                                     To=".75"
                                     Duration="0:0:0.3"/>
                    <DoubleAnimation Storyboard.TargetName="NavigationElementText"
                                     Storyboard.TargetProperty="FontSize"
                                     To="12"
                                     Duration="0:0:0.3"/>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="BorderBackgroundBrush"
                                                  Storyboard.TargetProperty="Color">
                        <DiscreteColorKeyFrame KeyTime="0" Value="Red"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </MultiTrigger.ExitActions>
    </MultiTrigger>
    <!-- Missing two more MultiTriggers (very similar to above) for the cases of if the tab is selected.-->
</ControlTemplate.Triggers>

还要注意我如何使用ColorAnimationUsingKeyFrames 来更改Border.Background 属性，而无需在另一个Trigger 中使用Setter。这样，所有更改都在同一个Storyboard 中执行。为此，您只需将命名为 SolidColorBrush 分配给您的 "Bd" Border：

<Border.Background>
    <SolidColorBrush x:Name="BorderBackgroundBrush" Color="Red"></SolidColorBrush>
</Border.Background>

如果选择了祖先TabItem，为了防止Storyboard播放，我建议你在NavigationElement中添加一个布尔值IsSelectedDependencyProperty，这样你就可以将此属性绑定到它的TabItem通过在 Style 中添加 Setter 来创建祖先，如下所示：

<Setter Property="IsSelected" Value="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>

您只需在MultiDataTrigger 中添加条件（但您已经知道了）：

    <Condition Property="IsMouseOver" Value="True"/>
    <Condition Property="IsSelected" Value="False"/>

旁注：我建议您对 XAML 属性进行换行和缩进，以避免需要滚动的长 XAML 行。除了提高可读性之外，将每个 XAML 属性放在一个新行上对版本控制更友好，因为一个属性更改只会影响一行。