为什么触发触发器时跳过故事板动作

时间:2019-10-19 20:39:29

标签: c# wpf triggers storyboard

我有一个Tabcontrol,我试图根据触发器添加操作。

使用路由事件,我可以触发我的情节提要,我的动作将按预期进行响应。现在,如果试图选择特定的选项卡标题,我将尝试防止情节提要动作触发。

由于我不能使用属性条件和路由事件来确定我的情节提要板是否将执行,这迫使我远离路由事件。

快进,现在我终于可以让IsMouseOver响应鼠标了。 (我的背景属性会随着鼠标进入和离开tabitem标头而变化并变回。我想我几乎到了那里,但是一旦我添加了与之前我的代码完全相同的情节提要,我的代码就决定由于某些原因而变得懒惰并跳过它。后台设置程序仍在触发,但情节提要板保持沉默。

我尝试删除设置器,但情节提要板仍未触发。

一天结束:我希望为“鼠标悬停”和“选定”的所有可能组合设置一种可以在彼此之间完美过渡的样式。

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

1 个答案:

答案 0 :(得分:1)

我认为您没有意识到MultiDataTrigger对象同时具有EnterActionsExitActions的事实。与仅使用MultiDataTriggertrue上触发一个EnterActions和仅使用MultiDataTriggerfalse上触发另一个EnterActions MultiDataTriggertrue上触发,同时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属性,而无需在另一个Setter中使用Trigger。这样,所有更改都在同一Storyboard中执行。为此,您只需要为SolidColorBrush "Bd"分配一个命名的Border

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

为防止在选择祖先Storyboard的情况下播放TabItem,建议您在IsSelected上添加一个布尔值DependencyProperty NavigationElement,以便您可以通过在TabItem中添加Setter将此属性绑定到其Style的祖先:

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

相关问题