Rich formatting of text in a TextBlock using only DataBinding in XAML

Question

I am trying to format a Tweet using Data Binding. What I need to do is split the Text value of the tweet based on what type of content it is.

text = "This is a Tweet with a hyperlink http://www.mysite.com"

I need to add some color formatting to the http://... portion of the text value.

Here's the kicker, I'd like to do this using only XAML Data Binding.

 <TextBlock x:Name="Tweet1" FontWeight="Bold" Height="207.236" 
    LineHeight="55" TextAlignment="Left" TextWrapping="Wrap" 
    Width="1614.646" Text="{Binding XPath=/statuses/status[2]/text}" 
    FontSize="56" FontFamily="Segoe Book" 
    Foreground="{DynamicResource TextColor-Gray}" />

// needs to end up looking like

<TextBlock x:Name="Tweet1" FontWeight="Bold" ... FontSize="56" FontFamily="Segoe Book">
  <Run Foreground="{DynamicResource TextColor-Gray}" >This is a Tweet with a hyperlink</Run>
<Run Foreground="{DynamicResource TextColor-Pink}" >http://www.mysite.com</Run>
</TextBlock>

Here is a Regex I could use to split the text value, but I'm trying to use strictly DataBinding.

Regex regUrl = new Regex(@"/http:\/\/\S+/g");

Suggestions?

Answer 1

I'm using MVVMLight. What I've done is to capture the Loaded event of the TextBlock, and route it to a "converter".

using System.Collections.Generic;
using System.Windows.Documents;
using System.Windows.Controls;

using GalaSoft.MvvmLight.Command;

namespace Converters
{
    public class MyInlineConverter
    {
        public RelayCommand<TextBlock> ConvertTextToInlinesCommand { get; private set; }

        public MyInlineConverter()
        {
            ConvertTextToInlinesCommand = new RelayCommand<TextBlock>(textBlock => convertTextToInlines(textBlock));
        }

        private static void convertTextToInlines(TextBlock textBlock)
        {
            foreach (Run run in textToInlines(textBlock.Text))
                textBlock.Inlines.Add(run);
        }

        private static IEnumerable<Run> textToInlines(string text)
        {
            List<Run> retval = new List<Run>();
            // Perform your conversion here.
            return retval;
        }
    }
}

If you add an instance of this class to your static resources, like so:

<converters:TMTInlineConverter x:Key="InlineConverter" />

then you can invoke the converter from your TextBlock as follows:

                        <TextBlock Text="{Binding MyPath}" TextWrapping="Wrap">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="Loaded">
                                    <cmdex:EventToCommand Command="{Binding Source={StaticResource InlineConverter}, Path=ConvertTextToInlinesCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </TextBlock>

Apologies if you're not using MVVMLight. If you're not, I'll leave the translation as an exercise for the reader. :)