Trigger animations

Một trong những điều trở nên RẤT dễ dàng với WPF, so với trước đây như WinForms, là animation. Triggers có hỗ trợ trực tiếp cho việc sử dụng hình ảnh động để đáp ứng với trigger được kích hoạt, thay vì chỉ chuyển đổi giữa hai giá trị tĩnh.

Đối với điều này, chúng tôi sử dụng các thuộc tính EnterActions và ExitActions, có trong tất cả các loại trigger đã được thảo luận (ngoại trừ EventTrigger), cả đơn và nhiều. Đây là một ví dụ:

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

Trong ví dụ này, chúng ta có một hình vuông màu xanh lá cây. Nó có một trigger kích hoạt một khi chuột kết thúc, trong trường hợp đó, nó kích hoạt một số hình ảnh động, tất cả được xác định trong phần EnterActions của trigger. Trong đó, chúng tôi làm động độ dày của đường viền từ 0 mặc định của nó thành độ dày 3 và sau đó chúng tôi làm động chiều rộng và chiều cao từ 100 đến 125. Tất cả điều này xảy ra đồng thời, vì chúng là một phần của cùng StoryBoard và thậm chí ở tốc độ hơi khác nhau, vì chúng tôi có toàn quyền kiểm soát thời gian mỗi animation sẽ chạy.

Chúng tôi sử dụng ExitActions để đảo ngược các thay đổi chúng tôi đã thực hiện, với các animations quay trở lại các giá trị mặc định. Chúng tôi chạy các animations đảo ngược nhanh hơn một chút, bởi vì chúng tôi có thể và bởi vì nó trông rất tuyệt.

Hai trạng thái được thể hiện trên hai ảnh chụp màn hình, nhưng để đánh giá đầy đủ hiệu ứng, bạn nên thử chạy ví dụ trên máy của chính mình, sử dụng code ở trên.

Tổng kết

Sử dụng animations với style triggers rất dễ dàng và trong khi chúng tôi chưa khám phá hết tất cả những gì bạn có thể làm với WPF animations, ví dụ được sử dụng ở trên sẽ cho bạn ý tưởng về mức độ linh hoạt của cả animations và styles.