Style.Trigger与Grid.Trigger

Question

在我的代码中，我定义了两个触发器，一个标签和一个画布。对我的问题的描述：

当光标直接穿过标签时，Style.Trigger会被激活，背景颜色会改变(变成橙色)。当光标在画布区域上移动时，Grid.Trigger将被激活并更改背景颜色(变为紫色)。到目前为止，现在good.Is光标，运行(在Grid.Trigger激活之后)整个标签区域，背景根本不会改变。在我看来，一旦Grid.Trigger被激活，它就会获得优先级。

<Window x:Class="Sample01.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.Resources>
        <!-- Defined Style starts here -->
        <Style x:Key="{x:Type Label}" TargetType="{x:Type Label}" >
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.Setters>
                    </Trigger.Setters>
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation To="DarkOrange" Duration="0:0:0.5"
                                                Storyboard.TargetProperty="Background.Color"
                                                />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation To="White" Duration="0:0:1"
                                                Storyboard.TargetProperty="Background.Color" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
        <!-- End defined Style-->
    </Grid.Resources>
    <!-- Define Trigger -->
    <Grid.Triggers>
        <EventTrigger RoutedEvent="MouseEnter"
                      SourceName="canvas">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation To="BlueViolet" Duration="0:0:1"
                                    Storyboard.TargetProperty="Background.Color"
                                    Storyboard.TargetName="label" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave"
                      SourceName="canvas">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation To="White" Duration="0:0:1"
                                    Storyboard.TargetProperty="Background.Color"
                                    Storyboard.TargetName="label" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
    <Label x:Name="label" VerticalAlignment="Top" Height="100" BorderBrush="Black" BorderThickness="2" Content="LABEL"/>
    <Canvas x:Name="canvas" Height="100" VerticalAlignment="Bottom"
            IsHitTestVisible="True" 
            Background="AntiqueWhite"
            />
</Grid>

​

有人能解释这种行为吗？

Answer 1

您遇到的是依赖项属性的值源的优先顺序。一种常见的情况是，当您直接在元素上设置局部值时，在样式中设置的值将被覆盖。在本例中，您将一个动画应用于该属性，它优先于样式中设置的任何内容(甚至是一个局部值)。

要允许样式再次接管，您需要使动画不再应用于标签。您可以通过显式删除初始动画来完成此操作，该动画将重置回原始状态，就像属性触发器所做的那样：

<EventTrigger RoutedEvent="FrameworkElement.MouseEnter"
            SourceName="canvas">
    <BeginStoryboard x:Name="GridMouseover">
        <Storyboard>
            <ColorAnimation To="BlueViolet" Duration="0:0:1"
                        Storyboard.TargetProperty="Background.Color"
                        Storyboard.TargetName="label" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.MouseLeave"
            SourceName="canvas">
    <RemoveStoryboard BeginStoryboardName="GridMouseover"/>
</EventTrigger>

这样做的缺点是将平滑动画丢失回白色。对于这类事情，VisualStateManager在很多情况下是更好的选择，因为它会自动为您处理这些问题。

您可以做的另一件事是告诉故事板在完成后通过更改FillBehavior来停止应用自身：

<EventTrigger RoutedEvent="FrameworkElement.MouseEnter"
            SourceName="canvas">
    <BeginStoryboard>
        <Storyboard>
            <ColorAnimation To="BlueViolet" Duration="0:0:1"
                        Storyboard.TargetProperty="Background.Color"
                        Storyboard.TargetName="label" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.MouseLeave"
            SourceName="canvas">
    <BeginStoryboard>
        <Storyboard FillBehavior="Stop">
            <ColorAnimation To="White" Duration="0:0:1"
                        Storyboard.TargetProperty="Background.Color"
                        Storyboard.TargetName="label" />
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>