Создание страницы результатов поиска

Теперь мы создадим страницу, содержащую результаты поиска. В качестве источника данных, будем использовать наш JSON файл со списком товаров приложения.
1. В Solution Explorer для проекта выберите Add / New Item
2. Выберите шаблон страницы Items Page и создайте файл SearchResult.xaml.

3. Замените код страницы. Страница будет отображать заголовок и таблицу с результатами поиска.

<Page x:Name="pageRoot" x:Class="eShop.SearchResult" DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:eShop" xmlns:common="using:eShop.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </Grid.ChildrenTransitions> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!-- Horizontal scrolling grid --> <GridView x:Name="itemGridView" TabIndex="1" Grid.RowSpan="2" Padding="116,136,116,46" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" IsSwipeEnabled="False" > <GridView.ItemTemplate> <DataTemplate> <Grid Height="280" Width="310" Margin="5,10,5,10"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Height="150"> <Image Source="{Binding ImagePath}" Stretch="None" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel Grid.Row="1" Margin="0,10,0,0"> <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/> <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" /> </StackPanel> <Button Grid.Row="2" Content="купить" Margin="0,10,0,0" HorizontalAlignment="Right" /> </Grid> </DataTemplate> </GridView.ItemTemplate> </GridView> <!-- Back button and page title --> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="120"/> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top" AutomationProperties.Name="Back" AutomationProperties.AutomationId="BackButton" AutomationProperties.ItemType="Navigation Button"/> <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Результаты поиска: " Style="{StaticResource HeaderTextBlockStyle}" VerticalAlignment="Bottom" Margin="0,0,30,40" IsHitTestVisible="false" TextWrapping="NoWrap" /> <TextBlock x:Name="resultNumber" Grid.Column="2" Text="{Binding TotalCount}" Style="{StaticResource HeaderTextBlockStyle}" VerticalAlignment="Bottom" Margin="0,0,0,40" IsHitTestVisible="false" /> <SearchBox x:Uid="SearchBoxControl" Grid.Column="3" PlaceholderText="Поиск товаров..." QuerySubmitted="SearchBox_QuerySubmitted" SuggestionsRequested="SearchBox_SuggestionsRequested" FocusOnKeyboardInput="True" Width="300" Height="40" HorizontalAlignment="Right" /> </Grid> </Grid></Page>

4. Откройте файл SearchResult.xaml.cs.
5. Найдите метод navigationHelper_LoadState.
6. Замените его:

private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e){ string queryText = (String)e.NavigationParameter; var group = await SampleDataSource.GetGroupAsync("Group-1"); if (group!= null) { IEnumerable<SampleDataItem> itemsResult = group.Items.Where(item => item.Title.StartsWith(queryText, StringComparison.CurrentCultureIgnoreCase)); this.DefaultViewModel["Items"] = itemsResult; this.DefaultViewModel["QueryText"] = queryText; this.DefaultViewModel["TotalCount"] = itemsResult.Count(); }}

7. Запустите приложение и осуществите поиск. Результат представлен на картинке ниже.

Дата добавления: 2017-01-14