آموزش ساخت Window سفارشی در WPF

  • دوشنبه 28 سپتامبر 2020
  • بازدید ۸۰ نفر

wpf custom window 9025 تصویر

آموزش ساخت Window سفارشی در WPF

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

توضیحات

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

wpf custom window 9025 1 تصویر

مراحل آموزش

  • ایجاد پروژه WPF Custom Control Library
  • ایجاد کنترل CustomWindow
  • کلاس WindowChrome
  • ایجاد پروژه WPF
  • استفاده از کنترل CustomWindow
ایجاد پروژه WPF Custom Control Library

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

ایجاد کنترل CustomWindow

قبل ایجاد کنترل مورد نظر ما به یک سری NativeMethod نیاز داریم که آن ها را در کلاس استاتیک NativeMethod قرار داده ام. در زیر می توانید محتوای این فایل را مشاهده کنید.

از این متدها برای دسترسی به اطلاعات Monitor و Taskbar و همچنین تنظیم موقعیت Window استفاده خواهیم کرد. بعد از ایجاد کلاس بالا، یک آیتم از نوع WPF Custom Control را با نام CustomWindow به پروژه اضافه کنید. بعد از انجام اینکار یک فایل جدید با نام CustomWindow.cs ایجاد و یک استایل پیشفرض برای آن در داخل فایل Generic.xaml اضافه می شود. محتوای فایل CustomWindow.cs به شکل زیر خواهد بود.

در ادامه بخش های مختلف کد بالا را توضیح می دهم. بخش Fields شامل اسم قسمت های مختلف Template سفارشی ما و سه متغیر از نوع Button برای نگه داشتن دکمه های Close، Maximize و Minimize است. بخش Constructors شامل یک سازنده استاتیک است که برای Override کردن متادیتای مربوط به کنترل والد استفاده می شود. در آموزش های قبلی این بخش را توضیح داده ام. بخش Overrides شامل متدهای Override شده است. متد زیر مسئول آماده سازی Template کنترل است.

و هندلر زیر زمانی که وضعیت Window تغییر کند، فراخوانی می شود. منظور از وضعیت یعنی Maximize، Minimize و یا Close شدن است. کار اصلی این هندلر تنظیم Padding مناسب برای قالب و فراخوانی تابع AdjustWindowPosition برای تنظیم موقعیت Window است.

بخش Methods شامل متدهای مختلفی است که هر کدام را توضیح می دهم. متد IsTaskbarVisible با استفاده از NativeMethod هایی که در بالا ایجاد کردیم، وضعیت Taskbar ویندوز را بررسی می کند و اگر در حالت Auto-Hide نباشد، true باز میگرداند. متد GetMonitorInfo اطلاعات Monitor جاری را برمیگرداند. ساختار این اطلاعات به شکل زیر است.

متد AdjustWindowPosition مسئول تنظیم موقعیت Window براساس وضعیت Monitor و Taskbar است. متد LoadButtonsTemplate قالب های مربوط به دکمه های Window را لود می کند. متد RegisterClickHandlers برای رویداد کلیک دکمه های Window هندلر ثبت می کند (البته شما می توانید از Command هم استفاده کنید). متد UnregisterClickHandlers هم هندلر های ثبت شده را حذف می کند. متد CheckIconAndTitle زمانی که مقداری به عنوان Title و Icon تنظیم نشده باشد، Template مربوط به آن ها را حذف می کند. بخش Event Handlers شامل هندلر دکمه های Window است و فکر نمیکنم لازم به توضیح باشد که چه کاری انجام می دهند. بخش خاصیت ها (Dependency Properties) شامل خاصیت های کنترل سفارشی است که هر کدام را در زیر توضیح می دهم.

  • خاصیت ActiveTitleBarBackground: رنگ TitleBar در حالتی که برنامه به صورت Active است رامشخص می کند.
  • خاصیت InactiveTitleBarBackground: رنگ TitleBar در حالتی که برنامه به صورت Inactive است را مشخص می کند.
  • خاصیت WindowButtonMouseOverBackground: همانطور که از اسم آن نیز مشخص است، رنگ پس زمینه دکمه های Window در حالتی که ماوس بر روی آن ها قرار دارد را مشخص می کند.
  • خاصیت WindowButtonMouseOverForeground: مشابه خاصیت بالا.

تا اینجای کار بخش مربوط به C# را پیاده سازی کردیم، در ادامه کدهای Xaml را بررسی خواهیم کرد. در زیر کد مربوط به قالب کنترل CustomWindow را مشاهده می کنید (فایل CustomWindow.xaml).

کد فوق بخش تازه ای (به جز بخش مربوط به WindowChrome) ندارد و اگر آموزش های قبلی ما در مورد ساخت کنترل سفارشی در WPF را مشاهده کرده باشید، برای درک کدهای بالا مشکلی نخواهید داشت.

کلاس WindowChrome

کلاس WindowChrome برای شخصی سازی Window با حفظ قابلیت های آن مورد استفاده قرار می گیرد. این کلاس به شما این امکان را می دهد تا بخش Client Area را تا اندازه ای که بخش Non-Clinet Area را پوشش دهد، توسعه دهید. برای درک بهتر به تصویر زیر نگاه کنید.

wpf custom window 9025 2 تصویر

اگر ما بخش مربوط به WindowChrome را از قالب کنترل حذف کنیم، خروجی به شکل زیر خواهد بود.

wpf custom window 9025 3 تصویر

WindowChrome به ما اجازه می دهد تا آن بخش هایی که مربوط به برنامه نیست را هم پوشش دهیم. برای اطلاعات بیشتر درمورد این کلاس می توانید به صفحه مایکروسافت مراجعه کنید. (WPF Window Chrome Class)

توجه داشته باشید که این WindowChrome ربطی به مرورگر کروم ندارد و آیکون استفاده شده در داخل برنامه به دلیل زیبایی آیکون این مرورگر بوده است و دلیل خاصی ندارد.

ایجاد پروژه WPF

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

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

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

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

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

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

 

باکس دانلود
شناسه:
۹۰۲۵
لینک دانلود:
جهت دانلود در کانال تلگرامی (ID: @Sourcesara) عضو شده و از لینک زیر دانلود را انجام دهید
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

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