Last Stand Windows 10 (30)-Control (text Class): Autosuggestbox

Original: Last Stand Windows 10 (30)-Control (text Class): Autosuggestbox

[SOURCE DOWNLOAD]

Last Stand Windows 10 (30)-Control (text Class): Autosuggestbox

Webabcd


Introduced
Last Stand Windows 10 control (text Class)

• Autosuggestbox

Example
Controls/textcontrol/autosuggestboxdemo.xaml

<Pagex:class= "Windows10.Controls.TextControl.AutoSuggestBoxDemo"xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local= "Using:Windows10.Controls.TextControl"xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"XMLNS:MC= "http://schemas.openxmlformats.org/markup-compatibility/2006"mc:ignorable= "D">    <GridBackground= "Transparent">        <StackPanelMargin= "0 Ten">            <TextBlockMargin= "5"Text="{x:bind Autosuggestbox.text,mode=oneway}" />            <TextBlockName= "LBLMSG1"Margin= "5" />            <TextBlockName= "LBLMSG2"Margin= "5" />                        <!--Autosuggestbox-Auto suggest text box (inherit from Windows.UI.Xaml.Controls.ItemsControl) Header-you can set a                    Plain text, can not hit test, empty Header words will not occupy any space placeholdertext-placeholder watermark text-text displayed within the textbox                    Automaximizesuggestionarea-whether the area of the suggestion box (that is, the drop-down) is maximized maxsuggestionlistheight-the maximum height of the suggestion box (that is, the drop-down section) Issuggestionlistopen-whether the suggestion box (that is, the drop-down) is open Queryicon-the icon (iconelement type) that appears to the right of the text box, about Ico  Nelement See/controls/iconcontrol/iconelementdemo.xaml is specified in this example as Find, that is, the Symbolicon type is set (which can also be specified as Other derived types of iconelement) -            <AutosuggestboxName= "Autosuggestbox"Margin= "5"ItemsSource="{x:bind Suggestions}"Header= "Autosuggestbox"Placeholdertext= "Autosuggestbox"Queryicon= "Find">                <autosuggestbox.itemtemplate>                    <DataTemplateX:datatype= "Local:suggestionmodel">                        <StackPanelOrientation= "Horizontal">                            <ImageSource="{x:bind ImageUrl}"Width= " the"Height= " the" />                            <TextBlockText="{x:bind Title}"FontSize= " the" />                        </StackPanel>                    </DataTemplate>                </autosuggestbox.itemtemplate>            </Autosuggestbox>            <!--you can set Queryicon to Symbolicon or Fonticon or Pathicon or Bitmapicon <AutoSuggestBox> <AutoSuggestBox.QueryIcon> <bitmapicon urisource= ""/> </autosugge Stbox.queryicon> </AutoSuggestBox> -                    </StackPanel>    </Grid></Page>

Controls/textcontrol/autosuggestboxdemo.xaml.cs

/** Autosuggestbox-Auto suggest text box (inherit from ItemsControl, see/controls/collectioncontrol/itemscontroldemo/) * Textmemberpath     -The field name when the object in the suggestion box is mapped to a text box (if the suggestion box shows only a string, you do not have to set this) * Updatetextonselect-When you click an item in the suggestion box, whether to assign the value of the Textmemberpath specified in the text box * Suggestionchosen-Event triggered when an item is selected in the suggestion box (that is, the drop-down section) * TextChanged-event triggered when the input text in the text box changes * querysubmitted-event triggered when a user submits a query (available To submit by carriage return, you can submit by clicking on the icon to the right of the text box, you can submit by selecting an item in the drop-down box * * Note: searchbox deprecated*/usingSystem;usingSystem.Collections.ObjectModel;usingWindows.UI.Xaml.Controls;namespacewindows10.controls.textcontrol{ Public Sealed Partial classAutosuggestboxdemo:page { PublicObservablecollection<suggestionmodel> Suggestions {Get;Set; } =NewObservablecollection<suggestionmodel>();  PublicAutosuggestboxdemo () { This.                        InitializeComponent (); //The data source has the title field and the ImageUrl field, and when the user selects an object in the suggestion box, the value specified in the Title field is assigned to the text boxAutosuggestbox.textmemberpath ="Title"; //whether the value specified by the Textmemberpath is assigned to the text box when the user selects the object in the suggestion boxAutosuggestbox.updatetextonselect =true; Autosuggestbox.textchanged+=autosuggestbox_textchanged; Autosuggestbox.suggestionchosen+=Autosuggestbox_suggestionchosen; Autosuggestbox.querysubmitted+=autosuggestbox_querysubmitted; }        voidautosuggestbox_textchanged (autosuggestbox sender, Autosuggestboxtextchangedeventargs args) {//Text changed because of user input            if(args. Reason = =autosuggestionboxtextchangereason.userinput) {suggestions.clear (); //Modify the Autosuggestbox data source based on the user's input                 for(inti =0; I <Ten; i++) {Suggestions.add (NewSuggestionmodel () {Title= (sender. Text +"_"+i.tostring ()), ImageUrl="/assets/storelogo.png"                    }); }            }            //make Text change by code            Else if(args. Reason = =autosuggestionboxtextchangereason.programmaticchange) {}//The Text changes because the user selects an item in the suggestion box (that is, the drop-down section)            Else if(args. Reason = =Autosuggestionboxtextchangereason.suggestionchosen) {}}voidAutosuggestbox_suggestionchosen (autosuggestbox sender, Autosuggestboxsuggestionchoseneventargs args) { //Autosuggestboxsuggestionchoseneventargs//SelectedItem-The object selected in the suggestion box (that is, the drop-down section)Lblmsg1.text ="the selected is:"+((Suggestionmodel) args. SelectedItem).        Title; }        Private voidautosuggestbox_querysubmitted (autosuggestbox sender, Autosuggestboxquerysubmittedeventargs args) { Lblmsg2.text= $"the user submits the query, querying the contents: {args. QueryText}"; if(args. Chosensuggestion! =NULL) {Lblmsg2.text+=Environment.NewLine; Lblmsg2.text+= $"The user submits the query (submitted by selecting an item in the drop-down box) and queries the content: {(Suggestionmodel) args. chosensuggestion). Title}"; }        }    }     Public classSuggestionmodel { Public stringTitle {Get;Set; }  Public stringIMAGEURL {Get;Set; } }}

Ok
[SOURCE DOWNLOAD]

Last Stand Windows 10 (30)-Control (text Class): Autosuggestbox