[源码下载]

背水一战 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 的数据源
                ; i < ; 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的更多相关文章

  1. 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox

    [源码下载] 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox 作者:webabcd ...

  2. 背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox

    [源码下载] 背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) T ...

  3. 背水一战 Windows 10 (27) - 控件(文本类): TextBlock

    [源码下载] 背水一战 Windows 10 (27) - 控件(文本类): TextBlock 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) TextBlock 示例 ...

  4. 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker

    [源码下载] 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker 作者:webabcd 介绍背水一战 Window ...

  5. 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog

    [源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...

  6. 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing

    [源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...

  7. 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch

    [源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...

  8. 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox

    [源码下载] 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Sel ...

  9. 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

    [源码下载] 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButt ...

随机推荐

  1. NOIP2015 跳石头

    一年一度的“跳石头”比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N块岩石(不含起点和终点的岩石). ...

  2. Java 动态代理机制分析及扩展

    Java 动态代理机制分析及扩展,第 1 部分 王 忠平, 软件工程师, IBM 何 平, 软件工程师, IBM 简介: 本文通过分析 Java 动态代理的机制和特点,解读动态代理类的源代码,并且模拟 ...

  3. Linux nc命令详解

    NetCat,在网络工具中有“瑞士军刀”美誉,其有Windows和Linux的版本.因为它短小精悍(1.84版本也不过25k,旧版本或缩减版甚至更小).功能实用,被设计为一个简单.可靠的网络工具,可通 ...

  4. Android 透明Button

    1.是制作9-patch的图片,这样能够匹配文字内容的长短. 2.是指定按钮样式背景,即定制drawable的xml文件,这样做的好处不用图片做背景,节省空间. 定制透明样式的按钮.直接看代码: dr ...

  5. poj 1367 robot(搜索)

    题意:给你一个图,求起点 到 终点的最少时间 每次有两种选择①:往前走1~3步                ②原地选择90°   费时皆是1s 图中1为障碍物,而且不能出边界.还要考虑机器人的直径 ...

  6. PHP学习(1)——我为什么要学PHP

    PHP简介 PHP是一种服务器端的脚本语言,特别适合做web开发.高效.灵活.实用是PHP的特点.PHP最开始是Personal Home Page的缩写,后来正式更名为了"PHP:Hype ...

  7. 轻量级数据库Sqlite的使用

    SqLite是什么? SQLite是一个进程内的库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎.它是一个零配置的数据库,这意味着与其他数据库一样,您不需要在系统中配置. 就像 ...

  8. lxml库

    lxml库 lxml是一个HTML/XML的解析器,主要的功能是如何解析和提取 HTML/XML数据. 基本使用: 1.我们可以利用他来解析HTML代码,并且在解析HTML代码的时候,如果HTML代码 ...

  9. C# 按不同的字节编码,通过字节数去截取字符串

    /// <summary> /// 按不同的字节编码,通过字节数去截取字符串 /// 数据库UTF-8 1个数字.字母.英文符号算1个长度 1个中文.中文符号算3个长度 /// </ ...

  10. 20145236《网络对抗》Exp 6 信息搜集与漏洞扫描

    20145236<网络对抗>Exp 6 信息搜集与漏洞扫描 一.基础问题回答 哪些组织负责DNS,IP的管理? 互联网名称与数字地址分配机构,简称ICANN机构,决定了域名和IP地址的分配 ...