[Wanli journey-Windows App development] integrated search and journey app in applications

[Wanli journey-Windows App development] integrated search and journey app in applications

I haven't updated this column for just a month. I want to update several articles continuously today ~

In the previous article, we learned how to add settings. This article describes how to configure a similar search.

So ...... Let's do it!

Let's start with a simple page layout and think about what we need. A Button with a search event needs some textblocks to prompt users. The core part is a GridView.

<Grid Background = "Wheat"> <Grid. rowDefinitions> <RowDefinition Height = "Auto"/> <RowDefinition/> </Grid. rowDefinitions> <StackPanel Grid. row = "0" Orientation = "Vertical"> <Button Grid. row = "0" Name = "btnSearch" verticalignment = "Center" HorizontalAlignment = "Left" Content = "Search" FontFamily = "文" Click = "btnSearch_Click" Margin = "12 "FontSize =" 34 "Foreground =" Red "/> <StackPanel Orientation =" Horizontal "> <TextBlock Text =" search keyword "Foreground =" Green "FontSize =" 28 "Margin = "12"/> <TextBlock FontSize = "28" Foreground = "Green" Name = "tBlockKeyword" Margin = "12"/> </StackPanel> <GridView grid. row = "1" Margin = "12" x: Name = "gridView"> <GridView. itemsPanel> <ItemsPanelTemplate> <WrapGrid Orientation = "Horizontal"/> </ItemsPanelTemplate> </GridView. itemsPanel> <GridView. itemTemplate> <DataTemplate> <TextBlock Text = "{Binding}" FontSize = "24" Foreground = "Pink" FontFamily = ""/> </DataTemplate> </GridView. itemTemplate> </GridView> </Grid>

Now that the interface is complete, you should go to the background. The core of the search lies in SearchPane, so it is instantiated first. To simplify the process, we can set the content to be searched as a string array. Of course, you can initialize the array as needed.

SearchPane searchPane = null;string[] exampleStr = new string[100];public  void InitExampleStr(){     Random ran = new Random();     int exNumber;     for(int i=0;i<100;i++)     {          exNumber = ran.Next(1000, 9999);          exampleStr[i] = exNumber.ToString();                                   }                                                                                     }

When the content entered in the search box is changed, the searchPane_QueryChange event is triggered.

After the user completes the input, press Enter or click the search confirmation button next to it to trigger the searchPane_QuerySubmitted event.

        void searchPane_QueryChanged(SearchPane sender, SearchPaneQueryChangedEventArgs args)        {                                                 this.tBlockKeyword.Text = args.QueryText;        }        void searchPane_QuerySubmitted(SearchPane sender, SearchPaneQuerySubmittedEventArgs args)        {                   string key = args.QueryText;            var result = exampleStr.Where(s => s.Contains(key)).ToArray();                         this.gridView.ItemsSource = result;        }

Then we need to bind the two events to OnNavigatedTo and unbind them from OnNavigatedFrom.

        protected override void OnNavigatedTo(NavigationEventArgs e)        {            this.searchPane.QuerySubmitted += searchPane_QuerySubmitted;            this.searchPane.QueryChanged += searchPane_QueryChanged;        }        protected override void OnNavigatedFrom(NavigationEventArgs e)        {            this.searchPane.QuerySubmitted -= searchPane_QuerySubmitted;            this.searchPane.QueryChanged -= searchPane_QueryChanged;        }

Then we need to click the Button control to bring up the system's search box. A line of code is enough. If you do not want to click the button, you can also enter it on the keyboard to bring up the search box.

        private void btnSearch_Click(object sender, RoutedEventArgs e)        {            this.searchPane.Show();        }

 this.searchPane.ShowOnKeyboardInput = true;

Don't forget to put them all in MainPage,

Public MainPage () {this. initializeComponent (); searchPane = SearchPane. getForCurrentView (); InitExampleStr (); this. searchPane. placeholderText = "Enter the keyword"; this. searchPane. showOnKeyboardInput = true ;}

So the general code is like this.

SearchPane searchPane = null; string [] exampleStr = new string [100]; public MainPage () {this. initializeComponent (); searchPane = SearchPane. getForCurrentView (); InitExampleStr (); this. searchPane. placeholderText = "Enter the keyword"; this. searchPane. showOnKeyboardInput = true;} public void InitExampleStr () {Random ran = new Random (); int exNumber; for (int I = 0; I <100; I ++) {exNumber = ran. next (1000,999 9); exampleStr [I] = exNumber. toString () ;}} protected override void OnNavigatedTo (NavigationEventArgs e) {this. searchPane. querySubmitted + = searchPane_QuerySubmitted; this. searchPane. queryChanged + = searchPane_QueryChanged;} protected override void OnNavigatedFrom (NavigationEventArgs e) {this. searchPane. querySubmitted-= searchPane_QuerySubmitted; this. searchPane. queryChanged-= searchPane_QueryChanged;} void searchPane_QueryChanged (SearchPane sender, SearchPaneQueryChangedEventArgs args) {this. tBlockKeyword. text = args. queryText;} void searchPane_QuerySubmitted (SearchPane sender, SearchPaneQuerySubmittedEventArgs args) {string key = args. queryText; var result = exampleStr. where (s => s. contains (key )). toArray (); this. gridView. itemsSource = result;} private void btnSearch_Click (object sender, RoutedEventArgs e) {this. searchPane. show ();}}

Declare in the configuration file that you need to use the "Search" function before you can start debugging.

All the music players that you must use will certainly give some suggestions under the search box, or apps such as commonly used maps.

Then we can update the previous code.

The following code displays the recommended list based on user input.

        void searchPane_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)        {            var deferralSeg= args.Request.GetDeferral();            var q = from i in exampleStr                    where i.Contains(args.QueryText)                    select i;            var res = q.Take(suggestionLen).ToArray();            foreach (var item in res)            {                args.Request.SearchSuggestionCollection.AppendQuerySuggestion(item);            }            deferralSeg.Complete();        }       

This blog uses a lot of LINQ technologies. If you don't know much about it, let's take a look at it here.
Portal: [LINQ technology] Extended features and LINQ Operators

The biggest benefit of using search recommendations is that we can choose content that is not input by ourselves. This function is powered by the following code.

        void searchPane_ResultSuggestionChosen(SearchPane sender, SearchPaneResultSuggestionChosenEventArgs args)        {                                  sender.TrySetQueryText(args.Tag);            var q = from t in exampleStr                    where t.Contains(args.Tag)                    select t;            this.gridView.ItemsSource = q.ToArray();        }

You can also modify the searchPane_QuerySubmitted function as follows.

        void searchPane_QuerySubmitted(SearchPane sender, SearchPaneQuerySubmittedEventArgs args)        {            //var q = from extStr in exampleStr            //        where extStr.Contains(args.QueryText)            //        select extStr;            //this.gridView.ItemsSource = q.ToArray();            string key = args.QueryText;            var result = exampleStr.Where(s => s.Contains(key)).ToArray();            this.gridView.ItemsSource = result;        }

Add them to the OnNavigatedTo and OnNavigatedFrom methods.

        protected override void OnNavigatedTo(NavigationEventArgs e)        {            this.searchPane.QuerySubmitted += searchPane_QuerySubmitted;            this.searchPane.QueryChanged += searchPane_QueryChanged;            this.searchPane.SuggestionsRequested += searchPane_SuggestionsRequested;            this.searchPane.ResultSuggestionChosen += searchPane_ResultSuggestionChosen;        }        protected override void OnNavigatedFrom(NavigationEventArgs e)        {            this.searchPane.QuerySubmitted -= searchPane_QuerySubmitted;            this.searchPane.QueryChanged -= searchPane_QueryChanged;            this.searchPane.SuggestionsRequested -= searchPane_SuggestionsRequested;            this.searchPane.ResultSuggestionChosen -= searchPane_ResultSuggestionChosen;        }

Then the debugging will have this effect.

Thank you for your visit and hope to help you. Welcome to your attention, favorites, and comments.

For this article to get an axe and a question, please indicate the source:
Http://blog.csdn.net/nomasp