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

  • سه‌شنبه 22 سپتامبر 2020
  • بازدید ۱۱۷ نفر

wpf custom textbox 9020 تصویر

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

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

توضیحات

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

wpf custom textbox 9020 1 تصویر

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

ایجاد کنترل TextField

ابتدا با توجه به تصویر زیر یک پروژه از نوع WPF Custom Control Library ایجاد کنید.

wpf custom textbox 9020 2 1 تصویر

بعد از ایجاد شدن پروژه هم می توانیم کنترلی که به طور پیش فرض ایجاد می شود را تغییر نام دهیم و هم می توانیم آن را حذف کرده و کنترل جدید ایجاد کنیم. ما همان کنترلی که به صورت پیشفرض ایجاد می شود (CustomControl1) را تغییر نام می دهیم به TextField و کد زیر را در داخل آن مینویسیم.

 از آنجایی که قرار است ما یک TextBox ایجاد کنیم، پس کنترل ما باید از TextBox ارث بری کند. کد زیر که در داخل سازنده استاتیک نوشته شده است، برای override کردن متادیتا مربوط به کنترل والد است. برای مثال در این بخش می توانیم متادیتاهایی مثل مقدار پیشفرض، نوع بایند شدن و غیره را تنظیم کنیم.

به جز سازنده فوق، کد مربوط به کنترل ما شامل ۵ خاصیت دیگر نیز است که همه از نوع DependencyProperty هستند و در ادامه هر کدام را توضیح خواهم داد.

  • خاصیت Caption: این خاصیت مقداری که در بالای فیلد نمایش داده می شود را مشخص می کند.
  • خاصیت CaptionFontSize: همانطور که از اسمش نیز مشخص است، اندازه فونت مربوط به Caption را مشخص می کند.
  • خاصیت CaptionOpacity: میزان شفافیت Caption را مشخص می کند.
  • خاصیت CaptionAlignment: محل قرار گیری Caption را مشخص می کند و می تواند با مقادیر Stretch، Left، Right و Center تنظیم شود.
  • خاصیت CornerRadius: میزان گردی گوشه های فیلد را مشخص می کند.

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

در ادامه بخش های مهم کد فوق را بررسی می کنیم.

کد بالا Converter زیر را اضافه می کند که کار آن تنظیم کردن ارتفاع کنترل با ارتفاع PART_ContainerGrid و  PART_CaptionHost است. در زیر می توانید کد مربوط به این Converter را مشاهده کنید.

کد زیر مقادیر پیش فرض را برای کنترل TextField تنظیم می کند.

کد زیر انیمیشنی که باید در حالت Focus و Unfocus بر روی PART_Underline اعمال شوند را تنظیم می کند.

کد زیر مقدار تنظیم شده برای خاصیت Caption را در بالای فیلد نمایش می دهد.

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

کد زیر مقدار تنظیم شده برای خاصیت Text را نمایش می دهد.

Trigger زیر در هنگام Focus شدن به داخل فیلد، رنگ متن Caption را با رنگ Border تنظیم می کند.

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

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

wpf custom textbox 9020 3 3 تصویر

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

مشاهده نتیجه

اگر پروژه WPF را Build و Run کنید، خروجی زیر را مشاهده خواهید کرد.

wpf custom textbox 9020 4 تصویر

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

 

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

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