동일한 클릭 이벤트에서 두 개의 다른 애니메이션을 호출합니다

Question

나는 현재 버튼이 탭 될 때 두 개의 다른 애니메이션을 호출 해야하는 표면 응용 프로그램에서 작업하고 있습니다.

정확히 어떻게해야합니까? 가능하다면 선언적으로하고 싶습니다. 이것에 대해 멀티 트리거를 사용해야합니까?

미리 감사드립니다!

Answer 1

이벤트 트리거 로이 작업을 수행 할 수 있습니다.

버튼과 애니메이션 대상의 컨테이너의 속성을 트리거 트리거에서 트리거를 정의 할 수 있습니다.

    <StackPanel
        Orientation="Horizontal">

        <StackPanel.Triggers>

            <EventTrigger
                SourceName="TheButton"
                RoutedEvent="Button.Click">

                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetName="LimeRect"
                            Storyboard.TargetProperty="Fill.Color"
                            To="Red" />
                        <ColorAnimation
                            Storyboard.TargetName="RedRect"
                            Storyboard.TargetProperty="Fill.Color"
                            To="Lime" />
                    </Storyboard>
                </BeginStoryboard>

            </EventTrigger>

        </StackPanel.Triggers>


        <Button
            x:Name="TheButton"
            Content="Play" />

        <Rectangle
            x:Name="LimeRect"
            Fill="Lime"
            Width="50"
            Height="50" />

        <Rectangle
            x:Name="RedRect"
            Fill="Red"
            Width="50"
            Height="50" />

    </StackPanel>

목표에 대한 상대 경로가있는 경우 사용할 수 있습니다. Storyboard.Target="{Binding PathToTarget}" 대신에 Storyboard.TargetName="TargetName".

편집 : (의견 참조)

버튼 자체를 애니메이션하는 경우 트리거를 버튼에 바로 넣을 수 있으며 대상 이름이 필요하지 않습니다.

예 - 토글 부트 턴의 크기를 애니메이션 :

    <ToggleButton
        Content="Toggle"
        Width="50"
        Height="50">

        <ToggleButton.Triggers>

            <EventTrigger
                RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Duration="00:00:00.2"
                            Storyboard.TargetProperty="Width"
                            To="100" />
                        <DoubleAnimation
                            Duration="00:00:00.2"
                            Storyboard.TargetProperty="Height"
                            To="100" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger
                RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Duration="00:00:00.2"
                            Storyboard.TargetProperty="Width"
                            To="50" />
                        <DoubleAnimation
                            Duration="00:00:00.2"
                            Storyboard.TargetProperty="Height"
                            To="50" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

        </ToggleButton.Triggers>

    </ToggleButton>