UWP - How to create a TokenAutoComplete Control

Question

I am developing UWP (Win10 - VS2015) App. I need a Token TextBox in Windows Platform. Any idea please, how to start and create this control, then when writing text inside the Textbox and put space or just tap that text, it should convert into selected Token. See the pic (its just for idea). I need such type of control.

You can also get idea from this Post TokenAutoComplete

have you referred this link http://stackoverflow.com/questions/36237644/how-to-create-a-tokenizing-control-for-uwp-as-known-from-outlook-when-using-to? — Archana, Apr 15 '16 at 12:03
Hello @Archana, thanks for your interest once again. I will look into your referred link and the blog inside as well, and then will back to you on this soon InshaAllah. :) — Zia Ur Rahman, Apr 15 '16 at 16:52
@LovetoCode (Archana), I'd read the article inside your referred link. Thats infact a great article especially for WPF users. I am trying it to implement in UWP apps, but getting much errors bcoz RichEditBox in UWP doesn't have such options as in WPF RichTextBox. So it is requested that you plz work around for this control in UWP and share it. It will be much appreciated. Thanks once again. — Zia Ur Rahman, Apr 20 '16 at 05:34
I just tried. But As you said RichEditBox has limited features i was not able to insert paragraph. Workaround is you can have ListView. When you match particular character(ex ;) you can remove the text from textbox and add it to ListView — Archana, Apr 21 '16 at 09:45
Or you can use RichTextBlock instead of ListView. You can insert Paragraph. If you want the code i can provide. — Archana, Apr 21 '16 at 12:42
@LovetoCode, Yes, plz, give me the code, and if a sample project u upload on github, it will be much appreciated. thanks. — Zia Ur Rahman, Apr 21 '16 at 16:21
It's just few lines of code. Not a complete control. So if you want complete working control, I ll post it in few days — Archana, Apr 21 '16 at 16:36
@LovetoCode, OK, you please share the code here with an explanation, I will work around, and if didn't get the accurate result then will inform you to work on full control. Thanks. — Zia Ur Rahman, Apr 21 '16 at 16:46

score 1 · Accepted Answer · answered Apr 21 '16 at 16:46

The code which I'm posting is initial code you can start builting control with..

I used RichTextBlock and Textbox. If you put these two controls in WrapPanel inside the Gridview. You might get similar control which you wanted but I haven't tried it.

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

                </Paragraph>

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

Code behind is like this

 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 = "";
            }

//below codes I haven't tried

   <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

OK great, I will try this and will let you know InshaAllah. Thank you. — Zia Ur Rahman, Apr 21 '16 at 16:55
Thanks alot, it worked perfect. And sorry for replied being late, Just today I used this code and with a minimal changes according to my need, it worked perfect ... still a bit issue in alignment and wrapping but 95% work done. thanks. I will amend and share the code here when finalize it. Back to you on this soon InshaAllah. — Zia Ur Rahman, Apr 29 '16 at 18:26

UWP - How to create a TokenAutoComplete Control

1 Answers1