Trigger-анимация

Одной из функциональностей, которая стала НАМНОГО проще с WPF, по сравнения с предыдущими фреймворками, (например WinForms) является анимация. Триггеры могут напрямую поддерживать анимацию, отвечая на срабатывание (вместо того, чтобы просто переключаться между двумя статическими значениями).

Для этого мы будем использовать свойства EnterActions и ExitActions, которые представлены во всех видах обыкновенных Триггеров и Мультитриггеров, которые мы обсуждали до этого (кроме Триггера событий). Вот пример:

<Window x:Class="WpfTutorialSamples.Styles.StyleTriggerEnterExitActions"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleTriggerEnterExitActions" Height="200" Width="200" UseLayoutRounding="True">
    <Grid>
        <Border Background="LightGreen" Width="100" Height="100" BorderBrush="Green">
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.400" To="3" Storyboard.TargetProperty="BorderThickness" />
                                        <DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Height" />
                                        <DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Width" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />
                                        <DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Height" />
                                        <DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Width" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </Grid>
</Window>

В этом примере у нас был зеленый квадрат, подключенный к Триггеру, который срабатывал при наведении курсора, запуская несколько анимаций, определенных в EnterActions части Триггера. Там, мы анимировали толщину рамки от стандартной 0 до 3 и ширину с высотой от 100 до 125. Это происходило одновременно, потому что две эти анимации являлись частью одного StoryBoard. Даже скорости анимирования были разными, так как мы имеем в этом случае полный контроль над ними.

Мы использовали ExitActions для отката сделанных изменений, с анимацией, возвращающей элемент к исходному состоянию. Обратную анимацию мы сделали более быстрой, так как это выглядит намного привлекательнее.

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

Итог

Использование анимации с Триггерами стилей - это очень просто, и, хотя мы изучили еще далеко не всю информацию об анимациях в WPF, данный пример показывает, насколько гибким здесь является использование анимации и стилей.