"Miles Journey--windows App development" integrates search in applications

This column has not been updated for just one months, and it's starting to update a few of them today.

The previous article we learned is how to add settings, this article is about and set up similar searches.

So ... Let's do it!

Start with a simple page layout, think about what we need, a button with a search event, and some TextBlock to prompt the user, the core part is naturally 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"  verticalalignment  = "Center"  horizontalalignment  =" left " content  =" search " fontfamily  = "Chinese Xingkai"  click  = "Btnsearch_ Click " margin  ="  fontsize  ="  class= Hljs-attribute  = "Red" />             <StackPanel Orientation="Horizontal">                <TextBlock Text="search keyword" Foreground="Green" FontSize ="$" Margin="/> "                <TextBlock FontSize=" Foreground" = "Green" Name= "Tblockkeyword" Margin="/> "            </StackPanel>                           </StackPanel>        <GridView grid.row="1" Margin=" x:name" ="GridView">            <gridview.itemspanel>                <itemspaneltemplate>                    <wrapgrid Orientation="Horizontal"/>                </itemspaneltemplate>            </gridview.itemspanel>            <gridview.itemtemplate>                <DataTemplate>                    <TextBlock Text="{Binding}" FontSize=" Foreground " ="Pink" FontFamily="italic"/>                </DataTemplate>            </gridview.itemtemplate>        </GridView>    </Grid>

Now that the interface is complete, it's time to go backstage and tinker with it. The core of the search is Searchpane, so let's instantiate it first. To simplify, we set the content to be searched as a string array well, of course, the way the array is initialized is all right.

searchpane Searchpane = null ; Span class= "Hljs-keyword" >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 (); }                                                                                     }

The Searchpane_querychange event is triggered when a user enters something in the search box that changes.

The searchpane_querysubmitted event is triggered when the user presses the ENTER key after completing the input or clicks the Search confirmation button next to it.

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 also need these two events to be bound in onnavigatedto and unbound in the Onnavigatedfrom.

 protected  override  void  onnavigatedto  (NavigationEventArgs e) {this . searchpane.querysubmitted + + Sea            rchpane_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, one line of code is enough. If you do not want to click the button is also available, you can let the user directly in the keyboard input and bring up the search box.

        privatevoidbtnSearch_Click(object sender, RoutedEventArgs e)        {            this.searchPane.Show();        }

thistrue;

Finally, don't forget to put them all in mainpage () Oh,

        publicMainPage()        {            this.InitializeComponent();            searchPane = SearchPane.GetForCurrentView();            InitExampleStr();                          this"请输入关键字";                       thistrue;        }

So, the total code is like this.

Searchpane Searchpane =NULL;string[] Examplestr =New string[ -]; Public MainPage()        { This.            InitializeComponent ();            Searchpane = Searchpane.getforcurrentview (); Initexamplestr (); This. Searchpane.placeholdertext ="Please enter keywords"; This. Searchpane.showonkeyboardinput =true; } Public  void Initexamplestr() {Random ran =NewRandom ();intExnumber; for(intI=0;i< -; i++) {Exnumber = ran. Next ( +,9999);                                         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; }voidSearchpane_querychanged (searchpane sender, Searchpanequerychangedeventargs args) { This. Tblockkeyword.text = args.        QueryText; }voidSearchpane_querysubmitted (searchpane sender, Searchpanequerysubmittedeventargs args) {stringKey = args. QueryText;varresult = Examplestr.where (s = = S.contains (key)). ToArray (); This. Gridview.itemssource = result; }Private void btnSearch_Click(Objectsender, RoutedEventArgs e) { This. Searchpane.show (); }    }

Declare in the manifest file that you need to use the "Search" function to start debugging.

All the music players that are sure to use are sure to give some advice below the search box, or apps like the maps you use.

So let's just update the previous code.

The following code, that is, according to the user's input to display the proposed list of methods.

void searchpane_suggestionsrequested (Searchpane sender, Searchpanesuggestionsrequestedeventargs args) { var deferralseg= args. Request. Getdeferral();var q = from IinchExamplestr where I. Contains(args. QueryText) Select I;var res = q. Take(Suggestionlen). ToArray();foreach (Var iteminchRes) {args. Request. Searchsuggestioncollection. Appendquerysuggestion(item);} deferralseg. Complete();}

This blog, using a lot of LINQ technology, can look here if you don't understand.
Portal: "LINQ Technology" extension Features and LINQ operators

The biggest benefit of using search suggestions is that we can choose content that is not entered by ourselves, which is powered by the code below.

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

We can also make the following modifications to the previous searchpane_querysubmitted function.

void searchpane_querysubmitted (Searchpane sender, Searchpanequerysubmittedeventargs args) {//var q = fr Om extstrinchEXAMPLESTR//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;}

Finally, they need to be added 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 be the effect.

Thank you for your visit and hope to help you. We welcome your attention, collection and comment.

To make this article get treatise and ask questions, reprint please indicate the source:
Http://blog.csdn.net/nomasp

"Miles Journey--windows App development" integrates search in applications