背水一戰 Windows 10 (30) - 控制項（文本類）: AutoSuggestBox

標籤：c++   private   mat   style   eve   erp   upd   xmlns   send   

原文:背水一戰 Windows 10 (30) - 控制項（文本類）: AutoSuggestBox

[源碼下載]

背水一戰 Windows 10 (30) - 控制項（文本類）: AutoSuggestBox

webabcd


介紹
背水一戰 Windows 10 之 控制項（文本類）

• AutoSuggestBox

樣本
Controls/TextControl/AutoSuggestBoxDemo.xaml

<Page    x: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">    <Grid Background="Transparent">        <StackPanel Margin="10 0 10 10">            <TextBlock Margin="5" Text="{x:Bind autoSuggestBox.Text,Mode=OneWay}" />            <TextBlock Name="lblMsg1" Margin="5" />            <TextBlock Name="lblMsg2" Margin="5" />                        <!--                AutoSuggestBox - 自動建議文字框（繼承自 Windows.UI.Xaml.Controls.ItemsControl）                    Header - 可以設定一個純文字，不能點擊測試，空 Header 的話不會佔用任何空間                    PlaceholderText - 預留位置浮水印                    Text - 文字框內顯示的文本                    AutoMaximizeSuggestionArea - 建議框（即下拉部分）的地區是否最大化                    MaxSuggestionListHeight - 建議框（即下拉部分）的最大高度                    IsSuggestionListOpen -  建議框（即下拉部分）是否是開啟狀態                    QueryIcon - 文字框右側顯示的 icon（IconElement 類型），關於 IconElement 請參見 /Controls/IconControl/IconElementDemo.xaml                        本例中指定為 Find，也就是說設定的是 SymbolIcon 類型（當然也可以指定為 IconElement 的其他衍生類別型）            -->            <AutoSuggestBox Name="autoSuggestBox" Margin="5" ItemsSource="{x:Bind Suggestions}"                            Header="AutoSuggestBox" PlaceholderText="AutoSuggestBox" QueryIcon="Find">                <AutoSuggestBox.ItemTemplate>                    <DataTemplate x:DataType="local:SuggestionModel">                        <StackPanel Orientation="Horizontal">                            <Image Source="{x:Bind ImageUrl}" Width="20" Height="20" />                            <TextBlock Text="{x:Bind Title}" FontSize="20" />                        </StackPanel>                    </DataTemplate>                </AutoSuggestBox.ItemTemplate>            </AutoSuggestBox>            <!--            可以將 QueryIcon 設定為 SymbolIcon 或 FontIcon 或 PathIcon 或 BitmapIcon            <AutoSuggestBox>                <AutoSuggestBox.QueryIcon>                    <BitmapIcon UriSource="" />                </AutoSuggestBox.QueryIcon>            </AutoSuggestBox>            -->                    </StackPanel>    </Grid></Page>

Controls/TextControl/AutoSuggestBoxDemo.xaml.cs

/* * AutoSuggestBox - 自動建議文字框（繼承自 ItemsControl, 請參見 /Controls/CollectionControl/ItemsControlDemo/） *     TextMemberPath - 建議框中的對象映射到文字框中時的欄位名（如果建議框中顯示的只是字串，就不用設定這個了） *     UpdateTextOnSelect - 單擊建議框中的項時，是否將其中的 TextMemberPath 指定的值賦值給文字框 *     SuggestionChosen - 在建議框（即下拉部分）中選擇了某一項後觸發的事件 *     TextChanged - 文字框中的輸入文本發生變化時觸發的事件 *     QuerySubmitted - 使用者提交查詢時觸發的事件（可以通過斷行符號提交，可以通過點擊文字框右側的表徵圖提交，可以通過在下拉框中選擇某一項提交） * * 註：SearchBox 棄用了 */using System;using System.Collections.ObjectModel;using Windows.UI.Xaml.Controls;namespace Windows10.Controls.TextControl{    public sealed partial class AutoSuggestBoxDemo : Page    {        public ObservableCollection<SuggestionModel> Suggestions { get; set; } = new ObservableCollection<SuggestionModel>();             public AutoSuggestBoxDemo()        {            this.InitializeComponent();                        // 資料來源有 Title 欄位和 ImageUrl 欄位，當使用者在建議框中選中某一個對象時，會將 Title 欄位指定的值賦值給文字框            autoSuggestBox.TextMemberPath = "Title";            // 使用者選中建議框中的對象時，是否將 TextMemberPath 指定的值賦值給文字框            autoSuggestBox.UpdateTextOnSelect = true;            autoSuggestBox.TextChanged += autoSuggestBox_TextChanged;            autoSuggestBox.SuggestionChosen += autoSuggestBox_SuggestionChosen;            autoSuggestBox.QuerySubmitted += AutoSuggestBox_QuerySubmitted;        }        void autoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)        {            // 因為使用者的輸入而使得 Text 發生變化            if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)            {                Suggestions.Clear();                // 根據使用者的輸入，修改 AutoSuggestBox 的資料來源                for (int i = 0; i < 10; i++)                {                    Suggestions.Add(new SuggestionModel()                    {                        Title = (sender.Text + "_" + i.ToString()),                        ImageUrl = "/Assets/StoreLogo.png"                    });                }            }            // 通過代碼使 Text 發生變化            else if (args.Reason == AutoSuggestionBoxTextChangeReason.ProgrammaticChange)            {            }            // 因為使用者在建議框（即下拉部分）選擇了某一項而使得 Text 發生變化            else if (args.Reason == AutoSuggestionBoxTextChangeReason.SuggestionChosen)            {            }        }        void autoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)        {            // AutoSuggestBoxSuggestionChosenEventArgs            //     SelectedItem - 在建議框（即下拉部分）中選擇的對象            lblMsg1.Text = "選中的是：" + ((SuggestionModel)args.SelectedItem).Title;        }        private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)        {            lblMsg2.Text = $"使用者提交了查詢, 查詢內容: {args.QueryText}";            if (args.ChosenSuggestion != null)            {                lblMsg2.Text += Environment.NewLine;                lblMsg2.Text += $"使用者提交了查詢（通過在下拉框中選擇某一項的方式提交）, 查詢內容: {((SuggestionModel)args.ChosenSuggestion).Title}";            }        }    }    public class SuggestionModel    {        public string Title { get; set; }        public string ImageUrl { get; set; }    }}

OK
[源碼下載]

背水一戰 Windows 10 (30) - 控制項（文本類）: AutoSuggestBox