zoukankan      html  css  js  c++  java
  • 控件(文本类): 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; }
        }
    }
  • 相关阅读:
    洛谷P1120信息奥赛一本通1442 小木棍
    洛谷P1378 油滴扩展
    洛谷P1156 垃圾陷阱
    mybatis-Plus 实践篇之逆向工程
    Interceptor的使用及探究
    mysql,oracle,sqlServer 元数据查询
    navicat premium15免费版安装说明(附工具)
    打印日志你真的会吗?
    线程基础知识-必知必会
    空间复杂度&时间复杂度
  • 原文地址:https://www.cnblogs.com/ansen312/p/5913388.html
Copyright © 2011-2022 走看看