آموزش اضافه کردن انیمیشن به ناوبری در WPF – آموزش WPF

wpf navigation animation 9665 تصویر

آموزش اضافه کردن انیمیشن به ناوبری در WPF

در این بخش آموزش اضافه کردن انیمیشن به ناوبری در WPF را برای شما آماده کرده ایم که یک آموزش مناسب برای ساخت کنترل های سفارشی و ایجاد انیمیشن با استفاده از زبان برنامه نویسی سی شارپ و تکنولوژی XAML است. در ادامه می توانید توضیحات، تصاویر و فیلمی از نتیجه نهایی را مشاهده کنید. همچنین سورس کد پروژه نیز به صورت رایگان برای دانلود قرار داده شده است.

توضیحات

در این پروژه ما با توسعه کنترل Frame و ایجاد یک کنترل جدید به نام PageHost قابلیت انیمیشن را به ناوبری اضافه خواهیم کرد. روند کار به این صورت است که ما هندلری برای رویداد Navigating که مربوط به کنترل والد (یعنی همان Frame) است، ثبت میکنیم تا بتوانیم تغییر محتوای فریم را کنترل کنیم. همچنین ما یک متد به نام ChangeView به این کنترل اضافه می کنیم تا با استفاده از این متد هم محتوای فریم را تغییر دهیم و هم انیمیشن مورد نظرمان را تنظیم کنیم. الگوی این متد به شکل زیر است.

ورودی ها

  • view: محتوای فریم
  • oldPageAnimation: انیمیشنی که برای محو کردن محتوای قبلی استفاده می شود
  • newPageAnimation: انیمیشنی که برای ظاهر کردن محتوای جدید استفاده می شود

برای ساخت این پروژه از نرم افزار Visual Studio نسخه ۲۰۱۹ و فریم ورک .Net Core 3.1 استفاده شده است. البته شما می توانید با اعمال تغییرات کوچکی پروژه را در نسخه های پایین تر نیز پیاده سازی کنید. نتیجه نهایی به شکل زیر خواهد بود.

wpf navigation animation 9665 4 تصویر

مراحل آموزش

  • ایجاد کنترل PageHost
  • ایجاد پروژه Demo
  • استفاده از کنترل PageHost

ایجاد کنترل PageHost

ابتدا یک Blank Solution ایجاد کنید و سپس یک پروژه از نوع WPF Custom Control Library به آن اضافه کنید. سپس دو نوع enum به نام OldPageAnimation و NewPageAnimation ایجاد کرده و محتوای آن ها به شکل زیر تغییر دهید.

بعد از آن یک کنترل (CustomControl) جدید با نام PageHost به پروژه اضافه کنید و بخش مربوط به C# آن را به شکل زیر تغییر دهید.

سپس کدهای XAML کنترل را نیز به شکل زیر تغییر دهید:

ایجاد پروژه Demo

برای تست کنترلی که ایجاد کرده ایم، یک پروژه از نوع WPF به همان Solution اضافه کنید. و سپس Reference مربوط به پروژه WPF Custom Control Library را که همان پروژه بالا است را به آن اضافه کنید.

استفاده از کنترل PageHost

بعد از انجام مرحله بالا، فایل App.xaml را باز کنید و Resource مربوط به کنترل سفارشی را مانند نمونه زیر به آن اضافه کنید.

سپس یازده Page به پروژه اضافه کنید و نام آن ها را به صورت زیر تنظیم کنید.

  • InitialPage
  • NonePage
  • FadeOutFadeInPage
  • ScaleToOutScaleFromInPage
  • ScaleToInScaleFromOutPage
  • ScaleToInScaleFromInPage
  • ScaleToOutScaleFromOutPage
  • SlideLeftRightPage
  • SlideRightLeftPage
  • SlideBottomTopPage
  • SlideTopBottomPage

از آن جایی که محتوای همه صفحات مشابه است، فقط کد مربوط به یک صفحه رو قرار می دهیم (InitialPage).

کد C#:

کد XAML:

حال فایل MainWindow.xaml را باز کرده و محتوای آن را به شکل زیر تغییر دهید.

کد C# مربوط به MainWindow:

پروژه را کامپایل و اجرا کنید تا نتیجه نهایی را مشاهده کنید.

wpf navigation animation 9665 1 تصویر

wpf navigation animation 9665 2 تصویر wpf navigation animation 9665 3 تصویر

سورس کامل پروژه در GitHub

 

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است