Вызов двух разных анимаций из одного клика - PullRequest
3 голосов
/ 16 марта 2010

В настоящее время я работаю над приложением Surface, где мне нужно вызывать две разные анимации при нажатии кнопки.

Как именно я должен это делать? Я хотел бы сделать это декларативно, если это возможно. Должен ли я использовать MultiTriggers для этого, или?

Заранее спасибо!

1 Ответ

2 голосов
/ 16 марта 2010

Вы можете сделать это с помощью EventTrigger.

Вы можете определить триггер в свойстве FrameworkElement.Triggers любого контейнера как для кнопки, так и для целей анимации.

    <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:

    <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>
...