TOC

This article is currently in the process of being translated into Persian (~93% done).

Styles:

Trigger animations

یک چیزهایی که در WPF نسبت به فریم‌ورک‌های پیشین مثل WinForm به مراتب ساده‌‎تر شده است توانایی ساخت انیمیشن‌هاست. ماشه‌ها استفاده از انیمیشن‌ها را در زمان رها شدن ماشه‌ها _به جای تغییر ناگهانی مقادیر خاصیت‌ها_ به طور مستقیم پشتیبانی می‌کنند.

برای این منظور، از المان‌های EnterActions و ExitActions استفاده می‌کنیم که بجز در مورد EventTrigger برای سایر ماشه‌ها (چه ماشه‌های معمولی و چه ماشه‌های چندگانه) در دسترس هستند. به این مثال توجه کنید:

<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 استفاده می‌کنیم تا انیمیشن‌هایی را تعریف کنیم که مقادیر را به اندازه پیش‌فرضشان برگردانند. معمولاً انیمیشن‌های معکوس را قدری تندتر اجرا می‌کنیم تا جذاب‌تر به نظر برسند.

دو حالت نهایی (قبل و بعد از اجرای انیمیشن‌ها) در تصاویر مربوط به این مثال نشان داده شده‌اند. با این حال، برای درک کامل نحوه‌ی عملکرد انیمیشن‌ها می‌بایست کد فوق را بر روی کامپیوتر خود اجرا نمایید.

خلاصه

ایجاد انیمیشن به کمک ماشه‌های موجود در استایل بسیار ساده است. در حالی که هنوز همه‌ی آنچه می‌توانید با انیمیشن‌ها در WPF بسازید را بررسی نکرده‌ایم، مثال فوق به شما این دید را می‌دهد که انیمیشن‌ها و استایل‌ها تا چه حد توانمند می‌باشند.


This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!