AutoComplete TextBox در WPF

این مقاله درباره ی کاربرد AutoComplete TextBox برای جستجو را توضیح میدهد.به عنوان مثال با استفاده از آن زمانی که کاربر حرف یا کلمه را وارد کادر جستجو میکند ، تمام مقادیر موجود در drop down نمایش داده میشود

AutoComplete TextBox در WPF

معرفی

AutoComplete TextBox  مقادیر IEnumerable را لود میکند وهنگام جستجوی کاربر محتوای آن را نمایش میدهد. هنگامی که کاربر حرف یا کلمه را وارد میکند ، تمام مقادیر موجود در drop down نمایش داده میشود .جستجو حساس به حروف است  . 

نحوه ویرایش  ComboBox های مختلف در WPF

1. کادر جستجویی سبک است.

2. نمایش مقادیر در dropdown list ، زمانی که کاربر در کادر جستجو مقداری وارد میکند.

3. از محتوای جستجو پشتیبانی کند.

 

AutoCompleteTextBox و Test Project Description

 

Class Diagram .1برای    AutoCompleteTextBox

توضیح پروپرتی های AutoCompleteTextBox

EnumSource:مقدار سورس برای AutoCompleteTextBox است ،این باید IEnumerable از هر نوع شی باشد.

SelectedText: انتخاب متن  یا  توضیحات از منبع

SelectedItem :شی را از منبع انتخاب میکند

DisplayText : نمایش متن در dropdown list AutoCompleteTextBox

HiglightedText: متن هایلایت شده  به صورت پیش فرض در  AutoCompleteTextBox  نمایش داده میشود.

2. کلاس دیاگرام   TestVM

3. نمونه ای از view model TestVM که مقادیر را نگه میدارد. پروپرتی IEnumerable در view mode از نوع TestNameValue و نوع آبجکت ایجاد میکند.

4. پروپرتی Text در ViewModel برای اتصال پروپرتی SelectedText  در AutoCompleteTextBox بکار میرود.

Property .5در ViewModel به پروپرتی EnumSource در AutoCompleteTextBox. متصل میشود.

Property .6در ViewModel به پروپرتی SelectedItem   در AutoCompleteTextBox. متصل میشود.

استفاده از کد
روش consume کردن باینری
 AutoCompleteTextBox.dll  را در تست پروژه  اضافه کرده و نمونه ای از  view model به شرح زیر مینویسیم.
قطعه کد TestNameValue

public class TestNameValue
  {
      public TestNameValue()
      {
      }
      public TestNameValue(string name, object value)
      {
          this.Name = name;
          this.Value = value;
      }
      public string Name
      {
          get;
          set;
      }
      public object Value
      {
          get;
          set;
      }
      public override string ToString()
      {
          return Name;
      }
  }

  Code snipped Properties in TestVM

      private List<TestNameValue> _values;
      public List<TestNameValue> Values
      {
          get
          {
              return _values;
          }
          set
          {
              _values = value;
              OnPropertyChanged("Values");
          }
      }

      private List<object> _valuesstr;
      public List<object> Valuesstr
      {
          get
          {
              return _valuesstr;
          }
          set
          {
              _valuesstr = value;
              OnPropertyChanged("Valuesstr");
          }
      }

      private string _seltext;
      public string Text
      {
          get
          {
              return _seltext;
          }
          set
          {
              _seltext = value;
              OnPropertyChanged("Text");
          }
      }

      private object _selItem;
      public object SelectedItm
      {
          get
          {
              return _selItem;
          }
          set
          {
              _selItem = value;
              OnPropertyChanged("SelectedItm");
          }
      }

 

نحوه استفاده  در XAML؟

افزودن رفرنس  xmlns : ac="clr-namespace:WPfControls;assembly=AutoCompleteTextBox" در XAML

<ac:AutoCompleteTextBox Width="250" Margin="5" 
                                     EnumSource="{Binding Valuesstr}"
                                     SelectedItem="{Binding SelectedItm,Mode= TwoWay}"
                                     SelectedText="{Binding Text,Mode= TwoWay}"
                                     DisplayText="Name"
                                     HiglightedText="Search"/>
<ac:AutoCompleteTextBox Width="250" Margin="5"  Grid.Row="1"
                                     EnumSource="{Binding Values}"
                                     SelectedItem="{Binding SelectedItm,Mode= TwoWay}"
                                     SelectedText="{Binding Text,Mode= TwoWay}"
                                     DisplayText="Name"
                                     HiglightedText="Search"/>

 

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب