0

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

当光标直接穿过标签时，Style.Trigger 被激活并且背景颜色改变（变为橙色）。当光标穿过画布区域时，Grid.Trigger 被激活并更改背景颜色（变为紫色）。到目前为止，一切都很好。光标现在是否在标签区域上运行（在 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>

有人可以解释这种行为吗？

4

1 回答 1

3

您遇到了依赖属性值源的优先顺序。这种情况的一个常见情况是，当您直接在元素上设置本地值时，样式中设置的值会被覆盖。在这种情况下，您将动画应用到属性，它优先于样式中设置的任何内容（甚至是本地值）。

要让样式再次接管，您需要使动画不再应用于标签。您可以通过显式删除初始动画来做到这一点，它将重置回原始状态，就像属性触发器一样：

<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 告诉 Storyboard 在完成后停止应用自身：

<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>
于 2013-03-22T13:44:03.093 回答