0

私のコードでは、ラベルとキャンバスの 2 つのトリガーを定義しました。私の問題の説明：

カーソルがラベルを横切ると、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

依存関係プロパティの値ソースの優先順位に達しています。これの一般的なケースは、要素にローカル値を直接設定すると、スタイルに設定された値がオーバーライドされることです。この場合、アニメーションをプロパティに適用しています。これは、Style で設定されたもの (またはローカル値) よりも優先されます。

スタイルが再び引き継がれるようにするには、アニメーションがラベルに適用されないようにする必要があります。プロパティ トリガーのように、最初のアニメーションを明示的に削除すると、元の状態にリセットされます。

<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 に答える