Статьи

AutoCompleteBox с Windows Phone

Сентябрь 19, 2018

В этой статье я расскажу об AutoCompleteBox в Windows Phone, который доступен в Silverlight Windows Phone Toolkit. AutoCompleteBox является комбинацией TextBox и DropDownList.

Давайте напишем код

Загрузить  Silverlight Windows Phone Toolkit

Шаг 1:  Создайте Silverlight для проекта Windows Phone.

Шаг 2:  Добавить ссылку на Microsoft.Phone.Controls.Toolkit.dll

Шаг 3:  Добавьте пространство имен Microsoft.Phone.Controls.Toolkit в MainPage.xaml.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 Шаг 4: Добавьте AutoCompleteBox в ContentPanel MainPage.Xaml 

<toolkit:AutoCompleteBox Margin="12,200,12,0" x:Name="autoCompleteBox" Height="80"/>

 Шаг 5: Добавьте приведенный ниже код в конструктор MainPage.Xaml.cs.

List<String> cities = new List<String>();
cities.Add("TestABC");
cities.Add("TestXYZ");
cities.Add("Test");
cities.Add("ItemABC");
cities.Add("ItemXYZ");
cities.Add("ItemPQR");
this.autoCompleteBox.ItemsSource = cities;

 

Шаг 6: Теперь запустите приложение, и базовый AutoCompleteBox готов.

Шаг 7: Теперь, если вы хотите, чтобы текст заканчивался, добавьте строку ниже в конструктор MainPage.Xaml.cs и запустите приложение.

this.autoCompleteBox.IsTextCompletionEnabled = true;

Шаг 8: Теперь, если вы хотите, чтобы AutCompleteBox появлялся только при наборе буквенного числа символов, вам нужно установить MinimumPrefixLength в конструкторе MainPage.Xaml.cs и запустить приложение.

this.autoCompleteBox.MinimumPrefixLength = 3;

Шаг 9: Если вы хотите добавить фильтр клиента, например, если значение в списке содержит конкретное совпадение с определенным количеством символов. Добавьте приведенный ниже код в конструктор MainPage.Xaml.cs.

this.autoCompleteBox.TextFilter += CustomFilter;

and below code in MainPage.Xaml.cs

bool CustomFilter(string search, string value)
{
   //return (value.Length > 4);
   return (value.Contains("ABC"));
}

Шаг 10: Добавьте четыре текстовых поля внутри ContentPanel MainPage.Xaml, чтобы проверить ключевые события AutoCompleteBox.

<TextBlock Text="" Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" Name="txtDropDownOpening" VerticalAlignment="Top" FontSize="18" />

<TextBlock Text="" Height="30" HorizontalAlignment="Left" Margin="10,50,0,0" Name="txtPopulating" VerticalAlignment="Top" FontSize="18" />

<TextBlock Text="" Height="30" HorizontalAlignment="Left" Margin="10,100,0,0" Name="txtDropDownOpened" VerticalAlignment="Top" FontSize="18" />

<TextBlock Text="" Height="30" HorizontalAlignment="Left" Margin="10,150,0,0" Name="txtDropDownClosing" VerticalAlignment="Top" FontSize="18" />

Шаг 11: Есть четыре ключевых события AutoCompleteBox, добавьте эти события в конструктор MainPage.Xaml.cs.  

this.autoCompleteBox.DropDownClosing += new RoutedPropertyChangingEventHandler<bool>(autoCompleteBox_DropDownClosing);

this.autoCompleteBox.DropDownOpening += new RoutedPropertyChangingEventHandler<bool>(autoCompleteBox_DropDownOpening);

this.autoCompleteBox.DropDownOpened += new RoutedPropertyChangedEventHandler<bool>(autoCompleteBox_DropDownOpened);

this.autoCompleteBox.Populating += new PopulatingEventHandler(autoCompleteBox_Populating);

 Шаг 12: Объявите целочисленную переменную уровня класса в методах MainPage.Xaml.cs и ниже в MainPage.Xaml.cs для обработки ключевых событий DropDownClosing, DropDownOpening, DropDownOpened и Population

void autoCompleteBox_DropDownClosing(object sender, RoutedPropertyChangingEventArgs<bool> e)
{
   i = i + 1;
   txtDropDownClosing.Text = "DropDownClosing " + i.ToString();
}

void autoCompleteBox_DropDownOpening(object sender, RoutedPropertyChangingEventArgs<bool> e)
{
   i = i + 1;
   txtDropDownOpening.Text = "DropDownOpening " + i.ToString();
}

void autoCompleteBox_DropDownOpened(object sender, System.Windows.RoutedPropertyChangedEventArgs<bool> e)
{
   i = i + 1;
   txtDropDownOpened.Text = "DropDownOpened " + i.ToString();
}

void autoCompleteBox_Populating(object sender, PopulatingEventArgs e)
{
   i = i + 1;
   txtPopulating.Text = "Populating " + i.ToString();
}

 

Шаг 13: Теперь запустите приложение, вы заметите наименьшее число на фоне события заполнения, за которым последуют DropDownOpening и DropDownOpened, а последним будет DropDownClosing.

Событие Population, DropDownOpening и DropDownOpened возникает при каждом вводе текста в TextBox.

На этом статья AutoCompleteBox заканчивается в Windows Phone.

34
Share: