در این مقاله خواهیم آموخت چگونه می توان در WPF برای رویداد Button انیمیشن یا حرکتی را قرار داد . مرحله به مرحله پیش خواهیم رفت و بعضی اصطلاحات را در WPF توضیح خواهیم داد.

در این مقاله خواهیم آموخت چگونه می توان در WPF برای رویداد Button  انیمیشن یا حرکتی را قرار داد . مرحله به مرحله پیش خواهیم رفت  و بعضی اصطلاحات را در  WPF توضیح خواهیم داد.

قبل از شروع به کار لازم است تا بعضی کلمات کلیدی را در  WPF بشناسیم .

Setter : مقادیر را برای ویژگی ها تنظیم خواهد کرد.

EventTrigger  :همانطور که از نامش پیداست بعضی رویدادها را در هر زمانی اجرا خواهد کرد.

Storyboard : جایی که اطلاعات انیمیشن ذخیره خواهد شد.

برای شروع به کار یک برنامه از نوع WPF ایجاد میکنیم.

کدهای زیر را در MainWindow وارد کنید. 

        <StackPanel.Resources>
            <Style TargetType="{x:Type Button}">
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="Margin" Value="12" />
                <Setter Property="RenderTransformOrigin" Value="0.5 0.5" />
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <RotateTransform />
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard TargetProperty="RenderTransform.Angle">
                                <DoubleAnimation 
                                From="0" To="180" Duration="0:0:1.05" 
                                AutoReverse="True"
                                FillBehavior="Stop" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Button.MouseEnter">
                        <BeginStoryboard>
                            <Storyboard TargetProperty="RenderTransform.Angle">
                                <DoubleAnimation 
                                From="0" To="90" Duration="0:0:1.05" 
                                AutoReverse="True"
                                FillBehavior="Stop" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Resources>

        <Button >کلیک کنید</Button>
        
    </StackPanel>

در اینجا ابتدا یک  <StackPanel>  ایجاد کردیم که همه عناصر UI را در Window  نگهداری خواهد کرد. سپس منابع را برای  StackPanel  ایجاد خواهیم کرد<StackPanel.Resources>.  این  StackPanel ، پنل اصلی ماست، به این معنا که منابع آن در سراسر  Window  قابل دسترسی خواهند بود . پس از آن  Trigger ها را تنظیم خواهیم کرد که رویدادها را راه اندازی خواهد کرد. در اینجا از  Rotate Transform استفاده خواهیم کرد که عنصر پیوست شده را خواهد چرخاند. این انیمیشن بعضی ویژگیها دارد مانند From که مشخص میکند عنصر مورد نظر از چه زاویه ای تا چه زاویه ای چرخانده شود و duration  زمانی را برای آن مشخص میکند .  AutoReverse نیز برگشتن به حالت اول را مشخص میکند. به سادگی  Button  را در StackPanel  اصلی قرار می دهیم.

خروجی به صورت زیر خواهد بود :