0

Rectangle色付きのスライドアウトで現在の State を表示したい ListBox があります。

アイテムがある場合、Selected または 拡張する必要がある場合、それ以外MouseOverの場合は縮小する必要があります。Recangle

<ControlTemplate.Resources>
    <Storyboard x:Key="MoveOutStoryboard">
        <DoubleAnimation To="175"
                    Storyboard.TargetProperty="Width"
                    Storyboard.TargetName="AnimatingGrid">
            <DoubleAnimation.EasingFunction>
                <QuinticEase EasingMode="EaseOut" />
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <ColorAnimation Storyboard.TargetName="ContentPresenter"
                Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"
                To="White" />
    </Storyboard>

    <Storyboard x:Key="MoveInStoryboard">
        <DoubleAnimation To="16"
                    Storyboard.TargetProperty="Width"
                    Storyboard.TargetName="AnimatingGrid">
            <DoubleAnimation.EasingFunction>
                <QuinticEase EasingMode="EaseOut" />
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <ColorAnimation Storyboard.TargetName="ContentPresenter"
                Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"
                To="Black" />
    </Storyboard>
</ControlTemplate.Resources>

「または」マルチトリガーがないため、次のトリガーを見つけました。

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Trigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource MoveOutStoryboard}" />
        </Trigger.EnterActions>
    </Trigger>

    <Trigger Property="IsSelected" Value="True">
        <Trigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource MoveOutStoryboard}" />
        </Trigger.EnterActions>
    </Trigger>

    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsMouseOver" Value="False" />
            <Condition Property="IsSelected" Value="False" />
        </MultiTrigger.Conditions>

        <MultiTrigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource MoveInStoryboard}" />
        </MultiTrigger.EnterActions>
    </MultiTrigger>
</ControlTemplate.Triggers>

しかし、どういうわけかMoveOutStoryboard、最後のMultiTriggerセットがあるときに が呼び出されることはありませんが、その理由がわかりません。

助けてくれてありがとう。

4

2 に答える 2

1

同じトリガーによって開始されない限り、別のアニメーションはプロパティを制御できないため、これを試してみてください

            <Trigger Property="IsMouseOver"
                     Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource MoveOutStoryboard}" />
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource MoveInStoryboard}" />
                </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsSelected"
                     Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource MoveOutStoryboard}" />
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource MoveInStoryboard}" />
                </Trigger.ExitActions>
            </Trigger>

マウスオーバーと IsSelected で問題が発生した場合は、これを使用してください

            <Trigger Property="IsMouseOver"
                     Value="True">
                <Trigger.EnterActions>
                    <RemoveStoryboard BeginStoryboardName="moveIn2" />
                    <RemoveStoryboard BeginStoryboardName="moveOut2" />
                    <BeginStoryboard x:Name="moveOut1"
                                     Storyboard="{StaticResource MoveOutStoryboard}" />
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <RemoveStoryboard BeginStoryboardName="moveIn2" />
                    <RemoveStoryboard BeginStoryboardName="moveOut2" />
                    <BeginStoryboard x:Name="moveIn1"
                                     Storyboard="{StaticResource MoveInStoryboard}" />
                </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsSelected"
                     Value="True">
                <Trigger.EnterActions>
                    <RemoveStoryboard BeginStoryboardName="moveIn1" />
                    <RemoveStoryboard BeginStoryboardName="moveOut1" />
                    <BeginStoryboard x:Name="moveOut2"
                                     Storyboard="{StaticResource MoveOutStoryboard}" />
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <RemoveStoryboard BeginStoryboardName="moveIn1" />
                    <RemoveStoryboard BeginStoryboardName="moveOut1" />
                    <BeginStoryboard x:Name="moveIn2"
                                     Storyboard="{StaticResource MoveInStoryboard}" />
                </Trigger.ExitActions>
            </Trigger>

また、必要のないマルチトリガーを削除するか、ストーリーボードの削除アプローチをアプローチと組み合わせることができます。これも機能するはずです。


編集

これがRemoveStoryboardを使用したアプローチです。これは機能しています。私もテストしました

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver"
                    Value="True">
            <Trigger.EnterActions>
                <RemoveStoryboard BeginStoryboardName="multi" />
                <RemoveStoryboard BeginStoryboardName="sel" />
                <BeginStoryboard x:Name="over"
                                    Storyboard="{StaticResource MoveOutStoryboard}" />
            </Trigger.EnterActions>
        </Trigger>

        <Trigger Property="IsSelected"
                    Value="True">
            <Trigger.EnterActions>
                <RemoveStoryboard BeginStoryboardName="multi" />
                <RemoveStoryboard BeginStoryboardName="over" />
                <BeginStoryboard x:Name="sel"
                                    Storyboard="{StaticResource MoveOutStoryboard}" />
            </Trigger.EnterActions>
        </Trigger>

        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver"
                            Value="False" />
                <Condition Property="IsSelected"
                            Value="False" />
            </MultiTrigger.Conditions>

            <MultiTrigger.EnterActions>
                <RemoveStoryboard BeginStoryboardName="sel" />
                <RemoveStoryboard BeginStoryboardName="over" />
                <BeginStoryboard x:Name="multi"
                                    Storyboard="{StaticResource MoveInStoryboard}" />
            </MultiTrigger.EnterActions>
        </MultiTrigger>
    </ControlTemplate.Triggers>   



またはこれですが、これはバグがある可能性があり、アニメーションでいくつかのスナップを見ることができます

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver"
                    Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard x:Name="over"
                                    Storyboard="{StaticResource MoveOutStoryboard}" />
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="over" />
            </Trigger.ExitActions>
        </Trigger>

        <Trigger Property="IsSelected"
                    Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard x:Name="sel"
                                    Storyboard="{StaticResource MoveOutStoryboard}" />
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="sel" />
            </Trigger.ExitActions>
        </Trigger>

        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver"
                            Value="False" />
                <Condition Property="IsSelected"
                            Value="False" />
            </MultiTrigger.Conditions>

            <MultiTrigger.EnterActions>
                <BeginStoryboard x:Name="multi"
                                    Storyboard="{StaticResource MoveInStoryboard}" />
            </MultiTrigger.EnterActions>
            <MultiTrigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="multi" />
            </MultiTrigger.ExitActions>
        </MultiTrigger>
    </ControlTemplate.Triggers>
于 2014-08-28T08:52:16.003 に答える
1

そのため、多くの試行錯誤の後、pushpraj の助けを借りて、最終的な解決策を得ました。たぶん、同じ問題を抱えている人に役立つでしょう:

<MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver"
                                       Value="True" />
                                <Condition Property="IsSelected"
                                       Value="False" />
                            </MultiTrigger.Conditions>

                            <MultiTrigger.EnterActions>
                                <RemoveStoryboard BeginStoryboardName="moveIn1" />
                                <RemoveStoryboard BeginStoryboardName="moveOut2" />
                                <BeginStoryboard x:Name="moveOut1"
                                         Storyboard="{StaticResource MoveOutStoryboard}" />
                            </MultiTrigger.EnterActions>
                        </MultiTrigger>

                        <Trigger Property="IsSelected"
                             Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="moveOut2"
                                         Storyboard="{StaticResource MoveOutStoryboard}" />
                            </Trigger.EnterActions>
                        </Trigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver"
                                       Value="False" />
                                <Condition Property="IsSelected"
                                       Value="False" />
                            </MultiTrigger.Conditions>

                            <MultiTrigger.EnterActions>
                                <RemoveStoryboard BeginStoryboardName="moveOut2" />
                                <BeginStoryboard x:Name="moveIn1"
                                         Storyboard="{StaticResource MoveInStoryboard}" />
                            </MultiTrigger.EnterActions>
                        </MultiTrigger>
于 2014-08-28T09:13:50.493 に答える