آموزش ساخت AutoCompleteTextBox در WPF

  • دوشنبه 5 اکتبر 2020
  • بازدید ۷۱ نفر

wpf auto complete textbox 9197 تصویر

آموزش ساخت AutoCompleteTextBox در WPF

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

توضیحات

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

wpf auto complete textbox 9197 3 تصویر

مراحل آموزش

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

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

ایجاد کنترل AutoCompleteTextField

بعد از ایجاد شدن پروژه Custom Control Library آیتم هایی به صورت پیش فرض ایجاد می شوند را پاک کنید و یک آیتم جدید از نوع Custom Control با نام AutoCompleteTextField را به پروژه اضافه کنید. سپس محتوای فایل AutoCompleteTextField.cs را به شکل زیر تغییر دهید.

بعد از آن یک کلاس جدید با نام AutoCompleteTextFieldMatchResult.cs ایجاد کرده و محتوای آن را به شکل زیر تغییر دهید.

این کلاس برای برای ایجاد لیست پیشنهادی برای کنترل سفارشی ما استفاده می شود. برای ظاهر کنترل هم ابتدا یک Converter مانند نمونه زیر ایجاد کنید.

این تبدیل کننده برای تنظیم مقدار Margin فیلد موجود در داخل Popup استفاده می شود. حال باید ظاهر کنترل را درست کنیم. برای اینکار فایل xaml مربوط به کنترل را باز کنید و محتوای آن را مانند نمونه زیر تغییر دهید.

در ادامه بخش های مختلف کد بالا را بررسی میکنیم. تکه کد زیر مربوط به تعریف Converter ها است که BooleanToVisibilityConverter به صورت پیشفرض (Built-in) در WPF وجود دارد و AutoCompleteTextFieldPaddingToPopupMarginConverter هم تبدیل کننده ای است که خودمان ایجاد کرده ایم.

تکه کد زیر مربوط به اندازه آیکون های حذف و تاریخچه است که برای هر یک از آیتم های پیشنهادی نمایش داده می شوند.

تکه کد زیر مربوط به افکت سایه Popup است.

تکه کد زیر قالب مربوط به آیکون حذف آیتم از لیست پیشنهادی است.

استایل ها
  • AutoCompleteTextFieldRemoveButtonStyle: استایل مربوط به دکمه حذف آیتم از لیست پیشنهادی.
  • AutoCompleteTextFieldTextBoxStyle: استایل مربوط به TextBox های موجود در داخل کنترل AutoCompleteTextField.
  • AutoCompleteTextFieldPopupStyle: استایل مربوط به Popup که لیست پیشنهادی در داخل آن نمایش داده می شود.
  • AutoCompleteTextFieldListBoxItemStyle: استایل مربوط به آیتم های ListBox.
  • AutoCompleteTextFieldListBoxStyle: استایل مربوط به ListBox.

و در آخر هم قالب مربوط به کنترل AutoCompleteTextField قرار دارد که از موارد گفته شده در بالا در داخل آن استفاده شده است. اگر در درک بخشی از کدهای بالا مشکل داشتید میتوانید در قسمت نظرات یا انجمن سایت مطرح کنید تا برای شما توضیح داده شود.

ایجاد پروژه WPF

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

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

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

سپس یک کلاس جدید با نام RelayCommand.cs اضافه کنید و محتوای آن را به شکل زیر تغییر دهید. این کلاس برای هندل کردن Command ها استفاده می شود.

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

فایل xaml:

فایل cs:

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

wpf auto complete textbox 9197 1 تصویر

wpf auto complete textbox 9197 2 تصویر

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

 

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

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