Part of text with different color in windows phone 8.1

Question

I am creating a windows phone 8.1 app where app provides the user with a text box. I want to highlight all the hashtags used in the textbox with different color. So as soon as user presses hash(#) on the screen, font color will change till user presses a space key. For example, user enters:

This is a #sample statement.

Font color remains black for the part of text "This is a", but as soon as user presses # key, color changes to red (including the hash itself) and all subsequent characters are in red colored font. So #sample appears in read color. Once user presses a space after the word sample, font color changes back to black and all the remaining text appears to be in black color. How can I achieve this? I tried changing the font color but then it changes for the entire text and not just for the hashtag.

Since it's not strictly a win phone answer I won't mark it as duplicate, but [this](http://stackoverflow.com/questions/3707120/how-to-select-text-from-the-richtextbox-and-then-color-it) seems like a decent route. — Chris W., Dec 02 '14 at 15:20

score 3 · Answer 1 · answered Dec 02 '14 at 16:18

Why not use a RichEditBox? Here's something I quickly whipped up:

<RichEditBox x:Name="tb" TextChanged="tb_TextChanged" />

private void tb_TextChanged(object sender, RoutedEventArgs e)
{
    // we don't want this handler being called as a result of
    // formatting changes being made here
    tb.TextChanged -= tb_TextChanged;

    var doc = tb.Document;
    doc.BatchDisplayUpdates();

    try
    {
        string text;
        doc.GetText(TextGetOptions.None, out text);
        if (text.Length == 0)
            return;

        // check if this word starts with a hash
        var start = doc.Selection.StartPosition - 1;
        while (true)
        {
            if (start < 0 || char.IsWhiteSpace(text[start]))
                return;
            if (text[start] == '#')
                break;
            start--;
        }

        // find the end of the word
        var end = doc.Selection.StartPosition;
        while (start < text.Length && !char.IsWhiteSpace(text[end]))
            end++;

        // set color
        doc.GetRange(start, end).CharacterFormat.ForegroundColor = Colors.RoyalBlue;
    }
    finally
    {
        doc.ApplyDisplayUpdates();
        tb.TextChanged += tb_TextChanged;
    }
}

Screenshot

You can obviously optimize it more. It doesn't support formatting pasted text, that's an exercise for you :)

Thanks. That helped. The only issue I found on my windows 8.1 phone was that once text color got changed to royal blue, it did not get changed back to black after the space. Managed to fix it. Marked as answer. — The King, Dec 05 '14 at 18:52

score 0 · Answer 2 · answered Dec 02 '14 at 12:18

0

Use this XAML format for text with different color

> <TextBlock FontSize="30">
>             <Run Foreground="Red" Text="Hi "></Run>
>             <Run Foreground="Green" Text="This "></Run>
>             <Run Foreground="Blue" Text="is "></Run> 
              <Run Foreground="White" Text="Color."></Run> </TextBlock>

enter image description here

answered Dec 02 '14 at 12:18

Somdev Singh

47
6

this does not answer the question, TextBlock is not editable. – kennyzx Dec 02 '14 at 12:22

Part of text with different color in windows phone 8.1

2 Answers2