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

wpf custom scrollbar 9231 تصویر

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

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

توضیحات

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

wpf custom scrollbar 9231 1 تصویر

مراحل آموزش

  • ایجاد پروژه WPF Custom Control Library
  • ایجاد کلاس ScrollBarAssist
  • تغییر ظاهر کنترل ScrollBar
  • ایجاد پروژه WPF
  • استفاده از کنترل ScrollBar سفارشی
ایجاد پروژه WPF Custom Control Library

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

ایجاد کلاس ScrollBarAssist

این کلاس به منظور اضافه کردن خاصیت های مورد نیاز ما به کنترل ScrollBar است. در این آموزش به جای ایجاد کنترل جدید ما همان کنترل موجود را با افزودن خاصیت های مورد نیازمان به صورت Attached Property شخصی سازی می کنیم. یک کلاس جدید با نام ScrollBarAssist به پروژه اضافه کنید و محتوای آن را به صورت زیر تغییر دهید.

در کد فوق خاصیت های زیر تعریف شده اند که در ادامه هر کدام را توضیح میدهم.

  • خاصیت Size: این خاصیت اندازه ScrollBar را مشخص می کند.
  • خاصیت ButtonsVisibility: این خاصیت وضعیت نمایش داده شدن/نشدن دکمه های بالا، پایین، چپ و راست موجود در کوشه های ScrollBar را مشخص می کند.
  • خاصیت CornerRadius: میزان گردی گوشه های ScrollBar را مشخص می کند.
  • خاصتی ThumbCornerRadius: میزان گردی Thumb را مشخص می کند.
تغییر ظاهر کنترل ScrollBar

به منظور تغییر ظاهر کنترل یک فایل XAML با نام CustomScrollBar.xaml ایجاد و محتوای آن را مانند نمونه زیر تغییر دهید.

در کد بالا بخش چندان پیچیده ای وجود ندارد و فقط برای بخش ها و حالت های مختلف ScrollBar استایل دلخواه خود را تعریف کرده ایم. حال باید ظاهر کنترل ScrollViewer را نیز تغییر دهیم. یک فایل XAML جدید با نام CustomScrollViewer.xaml ایجاد کرده و محتوای آن را مانند نمونه زیر تغییر دهید.

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

تا اینجای کار کنترل سفارشی ما آماده است و می توانیم از آن استفاده کنیم.

ایجاد پروژه WPF

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

استفاده از کنترل ScrollBar سفارشی

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

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

فایل xaml:

فایل cs:

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

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

 

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

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