Разработка Windows 8.1 приложений на xaml/с#.

Блог компании Microsoft, Windows*, Разработка*

Одной из важных и необходимых функциональных возможностей для приложения, работающего с контентом, является поиск информации. Сегодня мы рассмотрим, какие возможности предлагает Windows 8.1 разработчику Windows Store приложений для организации поиска, а так же добавим возможность поиска товаров в приложение «Каталог товаров», разработанное в прошлых статьях. В Windows 8.1 появился новый элемент управления, панель поиска SearchBox, облегчающий вам задачу реализации поиска в приложении. Теперь вы можете добавить элемент управления на страницу приложения, обработать события, настроить внешний вид и получить готовую поисковую функциональность. Вот такой результат вы сможете получить, выполнив инструкции из этой статьи. Мы разместим поисковую панель на основной странице приложения и создадим отдельную страницу для просмотра результатов поиска.

Добавление панели поиска на страницу приложения

Поисковую панель мы будем реализовывать на основе элемента управления SearchBox. 1. Откройте проект в Visual Studio 2013. 2. В Solution Explorer откройте файл HubPage.xaml. 3. Вставьте поисковую панель в шапку приложения, например, в таблицу с названием. Для добавления поисковой панели используйте следующий код:

<SearchBox x:Uid="SearchBoxControl" PlaceholderText="Поиск товаров..."

QuerySubmitted="SearchBox_QuerySubmitted" SuggestionsRequested="SearchBox_SuggestionsRequested"

FocusOnKeyboardInput="True"

Width="300" Height="40" HorizontalAlignment="Right" Grid.Column="2" />

где: PlaceholderText – текст, который будет отображаться в пустом текстовом поле. QuerySubmitted – обработчик события поиска. SuggestionsRequested – обработчик события ввода символов в поисковое поле. Обработав это событие, вы можете управлять подсказками и предложениями, которые будут отображены пользователю еще до нажатия на кнопку и осуществления поиска. При этом, вы можете работать с любыми источниками данных, будь то база данных, xml документ, веб-сервис в облаке или локальные файлы и папки вашего компьютера. FocusOnKeyboardInput – параметр, отвечающий за поведение элемента управления при наборе символов с клавиатуры. Если установлен в true, то при вводе символов с клавиатуры, курсор перемещается в поисковое поле. 4. В Solution Explorer откройте файл HubPage.xaml.cs. 5. Найдите метод SearchBox_SuggestionsRequested и замените его:

private void SearchBox_SuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)

{

string queryText = args.QueryText;

if (!string.IsNullOrEmpty(queryText))

{

Windows.ApplicationModel.Search.SearchSuggestionCollection suggestionCollection = args.Request.SearchSuggestionCollection;

SampleDataGroup dataGroup = this.DefaultViewModel["Group1Items"] as SampleDataGroup;

if (dataGroup != null)

{

IEnumerable<SampleDataItem> itemsResult = dataGroup.Items.Where(item => item.Title.StartsWith(queryText, StringComparison.CurrentCultureIgnoreCase));

foreach (SampleDataItem suggestion in itemsResult)

{

IRandomAccessStreamReference thumbnail = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///"+suggestion.ImagePath));

suggestionCollection.AppendResultSuggestion(suggestion.Title, suggestion.Description, string.Empty, thumbnail, string.Empty);

}

suggestionCollection.AppendSearchSeparator(string.Empty);

IEnumerable<SampleDataItem> itemsQuery = dataGroup.Items.Where(item => item.Description.Contains(queryText));

foreach (SampleDataItem suggestion in itemsQuery)

{

suggestionCollection.AppendQuerySuggestion(suggestion.Title);

}

}

}

}

В данном методе мы реализуем возможность выпадающих подсказок при вводе символов с клавиатуры в поле поиска. Сначала мы предлагаем пользователю товары, у которых название начинается с введенных символов, отображая, для наглядности, иконки этих товаров, затем добавляем разделитель и предлагаем товары, у которых в описании есть введенные символы. 6. Запустите приложение. Результат представлен на картинке ниже. Попробуйте начать вводить какой-либо текст и курсор сразу встанет на поле поиска. Если вы введете первые несколько символов названия товара, например «наушники», вы увидите в качестве предложений слова, содержащие указанные символы.