UWP - 如何创建 TokenAutoComplete 控件答案

【问题标题】：UWP - How to create a TokenAutoComplete ControlUWP - 如何创建 TokenAutoComplete 控件
【发布时间】：2016-04-22 00:46:43
【问题描述】：

我正在开发 UWP (Win10 - VS2015) 应用程序。我需要 Windows 平台中的令牌文本框。请任何想法，如何启动和创建此控件，然后在文本框中写入文本并放置空格或只是点击该文本时，它应该转换为选定的令牌。查看图片（仅供参考）。我需要这种类型的控制。

你也可以从这个帖子TokenAutoComplete得到想法

【问题讨论】：

您是否引用了此链接stackoverflow.com/questions/36237644/…？
您好@Archana，再次感谢您的关注。我会查看你推荐的链接和里面的博客，然后很快就会在 InshaAllah 上回复你。 :)
@LovetoCode (Archana)，我会在您推荐的链接中阅读文章。这实际上是一篇很棒的文章，特别是对于 WPF 用户。我正在尝试在 UWP 应用程序中实现它，但是在 UWP 中遇到很多错误 bcoz RichEditBox 没有 WPF RichTextBox 中的选项。因此，请您在 UWP 中解决此控件并共享它。将不胜感激。再次感谢。
@LovetoCode，您是否找到/使用了此控件。请。
我刚试过。但正如你所说，RichEditBox 的功能有限，我无法插入段落。解决方法是您可以拥有 ListView。当您匹配特定字符（例如；）时，您可以从文本框中删除文本并将其添加到 ListView

标签： win-universal-app uwp-xaml tokenautocomplete

【解决方案1】：

我发布的代码是您可以开始构建控件的初始代码..

我使用了 RichTextBlock 和 Textbox。如果把这两个控件放在 Gridview 里面的 WrapPanel 里。你可能会得到你想要的类似控制，但我还没有尝试过。

 <RichTextBlock x:Name="tokenblock">
                <Paragraph>

                </Paragraph>

            </RichTextBlock>
            <TextBox  TextChanged="TextBox_TextChanged"/>

后面的代码是这样的

 private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            string text = (sender as TextBox).Text;
            if (text.Contains(';'))
            {
                Paragraph para;
                text = text.Substring(0, text.LastIndexOf(';'));
                if (tokenblock.Blocks.Count > 0)
                  para  = tokenblock.Blocks[0] as Paragraph;
                else
                 para = new Paragraph();
                InlineUIContainer inline = new InlineUIContainer();
                Border br = new Border();
                br.Background = new SolidColorBrush(Colors.Gray);
                br.CornerRadius = new CornerRadius(10);
                TextBlock tb = new TextBlock();
                br.MinWidth = 70;
                br.MaxWidth = 150;
                tb.Text = text;
                tb.TextWrapping = TextWrapping.Wrap;
                tb.Margin =new Thickness(10, 10, 10, 10);
                br.Child = tb;
                inline.Child = br;
                para.Inlines.Add(inline);
                (sender as TextBox).Text = "";
            }

//下面的代码我没试过

   <GridView x:Name="myGridView" IsItemClickEnabled="True">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
//here  you have to put RichTextBlock and textbox as two gridview items

【讨论】：

好的，我会试试这个，让你知道 InshaAllah。谢谢。
非常感谢，效果很好。很抱歉回复晚了，就在今天，我使用了这段代码，并根据我的需要进行了最小的更改，它运行良好......对齐和包装仍然有点问题，但完成了 95% 的工作。谢谢。完成后我会在这里修改和分享代码。很快就会回复你 InshaAllah。