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

  • یکشنبه 27 سپتامبر 2020
  • بازدید ۷۸ نفر

wpf custom radiobutton 9022 تصویر

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

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

توضیحات

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

wpf custom radiobutton 9022 5 تصویر

مراحل آموزش

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

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

wpf custom radiobutton 9022 1 تصویر

ایجاد کنترل CustomRadioButton

به صورت پیشفرض بعد از ایجاد شدن پروژه، یک کنترل با نام CustomControl1 ایجاد می شود. به جای ایجاد کردن کنترل جدید ما همان کنترل را تغییر نام می دهیم به CustomRadioButton و کدهای زیر را در داخل آن مینویسیم.

همانطور که مشاهده می کنید، کدهای C# مربوط به کنترل سفارشی ما چندان پیچیده نیست و فقط شامل یک سازنده استاتیک و ۵ خاصیت از نوع DependencyProperty است.

کد زیر که در داخل سازنده استاتیک نوشته شده است، برای override کردن متادیتا مربوط به کنترل والد است.

بقیه کد بالا مربوط به خاصیت ها است که در ادامه هر کدام را توضیح می دهم.

  • خاصیت CheckedBrush: این خاصیت رنگ حالتی که RadioButton به صورت انتخاب شده است را مشخص می کند.
  • خاصیت BulletCircleBrush: این خاصیت رنگ دایره کوچکی که در داخل RadioButton انتخاب شده قرار دارد را مشخص می کند.
  • خاصیت BulletSize: این خاصیت اندازه گوله ای مربوط به RadioButton را مشخص می کند.
  • خاصیت UncheckedBulletBorderSize: این خاصیت اندازه حاشیه گوله RadioButton را در حالت انتخاب نشده، مشخص می کند.
  • خاصیت CornerRadius: میزان گردی گوشه های کنترل را مشخص می کند.

در زیر می توانید کد Converter مربوط به رنگ پس زمینه در حالت انتخاب شده را مشاهده کنید. این تبدیل کننده رنگ CheckedBrush را می گیرد و یک Brush جدید با میزان شفافیت مشخص شده ایجاد می کند.

بعد از انجام مراحل بالا حال باید ظاهر کنترل را درست کنیم. به صورت پیشفرض در داخل فایل Generic.xaml یک استایل برای کنترل جدید ایجاد می شود که ما آن را به شکل زیر تغییر می دهیم.

در ادامه بخش های مهم کد بالا را توضیح می دهم. کد زیر تبدیل کننده ای رنگ پس زمینه را به منابع اضافه می کند.

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

کد زیر مربوط به استایل پیش فرض کنترل است.

Visual State های مربوط به حالت انتخاب شده و انتخاب نشده. اگر کنترل در حالت انتخاب شده قرار گیرد، انیمیشن بخش Checked اجرا می شود و میزان مقیاس کنترل CheckedEllipseContainerScaleTransform را به ۱ تغییر می دهد. و اگر در حالت انتخاب نشده قرار بگیرد، مقیاس به ۰ تغییر می کند.

به جز Visual State های فوق و Setter زیر بخش چندان پیچیده ای در بخش Template وجود ندارد.

خوب این Setter زمانی اعمال می شود که کنترل در حالت انتخاب شده قرار بگیرد. برای رنگ پس زمینه ما از خاصیت CheckedBrush استفاده می کنیم. به این صورت که آن را به تبدیل کننده ای که ایجاد کرده بودیم ارسال می کنیم و میزان شفافیت را نیز به عنوان پارامتر تبدیل کننده ارسال می کنیم تا رنگ مورد نظرمان را بدست آوریم. در کد بالا خاصیت CheckedBrush با شفافیت ۰٫۱۶۴ برای رنگ پس زمینه کنترل تنظیم می شود.

ایجاد پروژه WPF

تا اینجای کار ما کنترل مورد نظرمان را ایجاد کردیم، حال باید آن را تست کنیم. برای این کار یک پروژه از نوع WPF ایجاد کنید و پروژه بالا را به عنوان Reference به این پرژه اضافه کنید.

wpf custom radiobutton 9022 2 تصویر

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

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

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

توجه! در بخش های زیر باید اسم پروژه WPF که ایجاد کرده اید را قرار دهید.

wpf custom radiobutton 9022 3 تصویر

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

wpf custom radiobutton 9022 4 تصویر

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

 

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

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