Windows Store và Activating Contracts: Search Box trên App Windows Store C#

MainPage.xaml

Windows Store 2017

<Page
    x:Class="DemoSlide6.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DemoSlide6"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SearchBox QuerySubmitted="SearchBox_QuerySubmitted"  SuggestionsRequested="SearchBox_SuggestionsRequested" FocusOnKeyboardInput="True" HorizontalAlignment="Left" Margin="325,105,0,0" VerticalAlignment="Top" Height="50" Width="435"/>
    </Grid>
</Page>

MainPage.xaml.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace DemoSlide6
{

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
        private static readonly string[] sucges = {"bannar", "Tomato", "Ptato"};

        private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
        {
            Frame.Navigate(typeof(SearchResultsPage1), args.QueryText);  
        }

        private void SearchBox_SuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
        {
            var request = args.Request;
            foreach (var item in sucges)
            {
                if (item.StartsWith(args.QueryText, StringComparison.CurrentCultureIgnoreCase))
                {
                    request.SearchSuggestionCollection.AppendQuerySuggestion(item);
                }
            }
        }
    }
}

Data.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DemoSlide6
{
    public static class Data
    {
        public static IEnumerable<DataItem> Type = new List<DataItem>
        {
            new DataItem()
            {
                title = "Bananar",
                subtitle = "Apple",
                description = "Made in china"
            },
            new DataItem()
            {
                title = "Bananar1",
                subtitle = "Apple1",
                description = "Made in china"
            },
            new DataItem()
            {
                title = "Bananar2",
                subtitle = "Apple2",
                description = "Made in china"
            },
            new DataItem()
            {
                title = "Bananar3",
                subtitle = "Apple3",
                description = "Made in china"
            }
            
        };

    }
    public class DataItem
    {
        public string title { get; set; }
        public string subtitle { get; set; }
        public string description { get; set; }
        public string unique { get; set; }

    }
}

SearchResultsPage1.xaml

Windows Store 2017

<Page
    x:Name="pageRoot"
    x:Class="DemoSlide6.SearchResultsPage1"
    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:DemoSlide6"
    xmlns:common="using:DemoSlide6.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:ExtensionType="Search">

    <Page.Resources>
        <CollectionViewSource x:Name="resultsViewSource" Source="{Binding Results}"/>
        <CollectionViewSource x:Name="filtersViewSource" Source="{Binding Filters}"/>
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

        <x:String x:Key="AppName">App Name</x:String>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid x:Name="resultsPanel" Grid.Row="1">

            <Grid x:Name="typicalPanel">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="85*"/>
                    <ColumnDefinition Width="1281*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <ItemsControl
                    x:Name="filtersItemsControl"
                    Canvas.ZIndex="1"
                    Margin="10,-3,120,30"
                    ItemsSource="{Binding Source={StaticResource filtersViewSource}}"
                    Visibility="{Binding ShowFilters, Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Column="1">

                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <RadioButton
                                Margin="0,0,30,0"
                                GroupName="Filters"
                                IsChecked="{Binding Active, Mode=TwoWay}"
                                Checked="Filter_Checked"
                                Style="{StaticResource TextBlockButtonStyle}">
                                <TextBlock Text="{Binding Description}"  TextWrapping="NoWrap"
                                           Margin="3,-7,3,10" Style="{StaticResource SubheaderTextBlockStyle}" />
                            </RadioButton>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

                <GridView
                    x:Name="resultsGridView"
                    AutomationProperties.AutomationId="ResultsGridView"
                    AutomationProperties.Name="Search Results"
                    TabIndex="1"
                    Margin="0,-211,0,0"
                    Padding="110,240,110,46"
                    SelectionMode="None"
                    IsSwipeEnabled="false"
                    IsItemClickEnabled="True"
                    ItemsSource="{Binding Result}" Grid.ColumnSpan="2" Grid.RowSpan="2">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="294" Margin="6">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                               
                                <StackPanel Grid.Column="1" Margin="10,-10,0,0">
                                    <TextBlock Text="{Binding title}" TextWrapping="NoWrap" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <TextBlock Text="{Binding subtitle}" TextWrapping="NoWrap" Style="{StaticResource BodyTextBlockStyle}" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}"/>
                                    <TextBlock Text="{Binding description}" TextWrapping="NoWrap" Style="{StaticResource BodyTextBlockStyle}" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}"/>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemContainerStyle>
                        <Style TargetType="Control">
                            <Setter Property="Height" Value="70"/>
                            <Setter Property="Margin" Value="0,0,38,8"/>
                        </Style>
                    </GridView.ItemContainerStyle>
                </GridView>
            </Grid>
        </Grid>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <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" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
            <TextBlock x:Name="resultText" Grid.Column="2" Text="Results for &#x00a0;" IsHitTestVisible="false" Style="{StaticResource SubheaderTextBlockStyle}"
                       TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,0,40" />
            <TextBlock x:Name="queryText" Grid.Column="3" Text="{Binding QueryText}" IsHitTestVisible="false" Style="{StaticResource SubheaderTextBlockStyle}"
                       TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,0,40" />
        </Grid>

        <TextBlock
            x:Name="noResultsTextBlock"
            Grid.Row="1"
            Margin="120,50,0,0"
            Visibility="Collapsed"
            Style="{StaticResource SubheaderTextBlockStyle}"
            Text="No results match your search." />

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ResultStates">
                <VisualState x:Name="ResultsFound" />
                <!-- When there are no results, the results panel is replaced with an informational TextBlock -->
                <VisualState x:Name="NoResultsFound">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="resultsGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="noResultsTextBlock" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>

SearchResultsPage1.xaml.cs

Windows Store 2017

using DemoSlide6.Common;
using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace DemoSlide6
{

    public sealed partial class SearchResultsPage1 : Page
    {
        private NavigationHelper navigationHelper;
        private ObservableDictionary defaultViewModel = new ObservableDictionary();

        public List<DataItem> Result { get; set; }
        public String QueryText { get; set; } 

        public ObservableDictionary DefaultViewModel
        {
            get { return this.defaultViewModel; }
        }

        public NavigationHelper NavigationHelper
        {
            get { return this.navigationHelper; }
        }

        public SearchResultsPage1()
        {
            this.InitializeComponent();
            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;
        }

        private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {
            var queryText = e.NavigationParameter as String;

            QueryText = queryText;
            Result = new List<DataItem>();
            var matching = Data.Type.Where(item => item.title.Contains(queryText));
            Result.AddRange(matching);
            resultsGridView.ItemsSource = Result;

            var filterList = new List<Filter>();
            filterList.Add(new Filter("All", 0, true));

            this.DefaultViewModel["QueryText"] = '\u201c' + queryText + '\u201d';
            this.DefaultViewModel["Filters"] = filterList;
            this.DefaultViewModel["ShowFilters"] = filterList.Count > 1;
        }

        void Filter_Checked(object sender, RoutedEventArgs e)
        {
            var filter = (sender as FrameworkElement).DataContext;

            if (filtersViewSource.View != null)
            {
                filtersViewSource.View.MoveCurrentTo(filter);
            }

            var selectedFilter = filter as Filter;
            if (selectedFilter != null)
            {
               
                selectedFilter.Active = true;

                object results;
                ICollection resultsCollection;
                if (this.DefaultViewModel.TryGetValue("Results", out results) &&
                    (resultsCollection = results as ICollection) != null &&
                    resultsCollection.Count != 0)
                {
                    VisualStateManager.GoToState(this, "ResultsFound", true);
                    return;
                }
            }

            VisualStateManager.GoToState(this, "NoResultsFound", true);
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedTo(e);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedFrom(e);
        }

        private sealed class Filter : INotifyPropertyChanged
        {
            private String _name;
            private int _count;
            private bool _active;

            public Filter(String name, int count, bool active = false)
            {
                this.Name = name;
                this.Count = count;
                this.Active = active;
            }

            public override String ToString()
            {
                return Description;
            }

            public String Name
            {
                get { return _name; }
                set { if (this.SetProperty(ref _name, value)) this.OnPropertyChanged("Description"); }
            }

            public int Count
            {
                get { return _count; }
                set { if (this.SetProperty(ref _count, value)) this.OnPropertyChanged("Description"); }
            }

            public bool Active
            {
                get { return _active; }
                set { this.SetProperty(ref _active, value); }
            }

            public String Description
            {
                get { return String.Format("{0} ({1})", _name, _count); }
            }

            public event PropertyChangedEventHandler PropertyChanged;

            private bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)
            {
                if (object.Equals(storage, value)) return false;

                storage = value;
                this.OnPropertyChanged(propertyName);
                return true;
            }

          
            private void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                var eventHandler = this.PropertyChanged;
                if (eventHandler != null)
                {
                    eventHandler(this, new PropertyChangedEventArgs(propertyName));
                }
            }

        }

    }
}

Run App