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

Теперь мы создадим страницу, содержащую результаты поиска. В качестве источника данных, будем использовать наш 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. Запустите приложение и осуществите поиск. Результат представлен на картинке ниже.