时间戳

首页 > 解决方案 > 为什么当我的触发器触发时我的故事板动作被跳过

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

问题描述

我有一个 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>

标签： c#wpftriggersstoryboard

解决方案

我认为您没有意识到MultiDataTrigger对象同时具有EnterActions和的事实ExitActions。您可以只使用一个同时触发（将对象更改为异常状态）并将其转换回正常状态，而不是让一个MultiDataTrigger触发 on trueonlyEnterActions和另一个MultiDataTrigger触发falsewith only 。EnterActionsMultiDataTriggertrueEnterActionsExitActions

该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>

还要注意我是如何使用 aColorAnimationUsingKeyFrames来更改Border.Background属性而不需要 aSetter在 another 中的Trigger。这样，所有更改都在同一个Storyboard. 为此，您只需为SolidColorBrush您的"Bd" Border：

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

为了防止在选择Storyboard祖先时播放TabItem，我建议您在您的 中添加一个布尔值，以便您可以通过在您的中添加一个来将此属性绑定到IsSelected DependencyProperty它的祖先：NavigationElementTabItemSetterStyle

<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 属性放在一个新行上对版本控制更加友好，因为一个属性更改只会影响一行。

推荐阅读