Home > Software engineering >  C# WPF MVVM Binding commands to hyperlinks in custom text block control
C# WPF MVVM Binding commands to hyperlinks in custom text block control

Time:10-30

I have a collection of items with a string property. That string property contains text which includes 6 digit numbers in various places like so:

this string 123456 is an example of a set of links 884555 to the following numbers
401177
155879

998552

I want to turn those 6 digit numbers into hyperlinks that when clicked will run a command on the ViewModel passing themselves as parameters. For example if I click 401177 I want to run HyperlinkCommand on the VM with the string parameter "401177". I still want to keep the formatting of the original text.

I figured the best way to do it would be with a custom control based on TextBlock. Below is the rough structure of my view, the UserControl is bound to the ViewModel, I use a ContentControl to bind to a collection of items with the property "detail", and that is templated with the custom text block bound to the "detail" property of my items.

<UserControl.DataContext>
    <VM:HdViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
    <DataTemplate x:Key="DetailTemplate">
        <StackPanel Margin="30,15">
            <helpers:CustomTextBlock FormattedText="{Binding detail}"/>
        </StackPanel>
    </DataTemplate>
</UserControl.Resources>
<Grid>                   
    <ContentControl Content="{Binding ItemListing}" ContentTemplate="{StaticResource DetailTemplate}" />
</Grid>

I used the code from this question and edited it slightly to generate the following custom control:

public class CustomTextBlock : TextBlock
{
    static Regex _regex = new Regex(@"[0-9]{6}", RegexOptions.Compiled);

    public static readonly DependencyProperty FormattedTextProperty = DependencyProperty.RegisterAttached("FormattedText", typeof(string), typeof(CustomTextBlock), new FrameworkPropertyMetadata(string.Empty, FrameworkPropertyMetadataOptions.AffectsMeasure, FormattedTextPropertyChanged));
    public static void SetFormattedText(DependencyObject textBlock, string value)
    {
        textBlock.SetValue(FormattedTextProperty, value);
    }

    public static string GetFormattedText(DependencyObject textBlock)
    { return (string)textBlock.GetValue(FormattedTextProperty); }

    static void FormattedTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (!(d is TextBlock textBlock)) return;

        var formattedText = (string)e.NewValue ?? string.Empty;
        string fullText =
            $"<Span xml:space=\"preserve\" xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\">{formattedText}</Span>";

        textBlock.Inlines.Clear();
        using (var xmlReader1 = XmlReader.Create(new StringReader(fullText)))
        {
            try
            {
                var result = (Span)XamlReader.Load(xmlReader1);
                RecognizeHyperlinks(result);
                textBlock.Inlines.Add(result);
            }
            catch
            {
                formattedText = System.Security.SecurityElement.Escape(formattedText);
                fullText =
                    $"<Span xml:space=\"preserve\" xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\">{formattedText}</Span>";

                using (var xmlReader2 = XmlReader.Create(new StringReader(fullText)))
                {
                    try
                    {
                        dynamic result = (Span)XamlReader.Load(xmlReader2);
                        textBlock.Inlines.Add(result);
                    }
                    catch
                    {
                        //ignored
                    }
                }
            }
        }
    }

    static void RecognizeHyperlinks(Inline originalInline)
    {
        if (!(originalInline is Span span)) return;

        var replacements = new Dictionary<Inline, List<Inline>>();
        var startInlines = new List<Inline>(span.Inlines);
        foreach (Inline i in startInlines)
        {
            switch (i)
            {
                case Hyperlink _:
                    continue;
                case Run run:
                    {
                        if (!_regex.IsMatch(run.Text)) continue;
                        var newLines = GetHyperlinks(run);
                        replacements.Add(run, newLines);
                        break;
                    }
                default:
                    RecognizeHyperlinks(i);
                    break;
            }
        }

        if (!replacements.Any()) return;

        var currentInlines = new List<Inline>(span.Inlines);
        span.Inlines.Clear();
        foreach (Inline i in currentInlines)
        {
            if (replacements.ContainsKey(i)) span.Inlines.AddRange(replacements[i]);
            else span.Inlines.Add(i);
        }
    }

    static List<Inline> GetHyperlinks(Run run)
    {
        var result = new List<Inline>();
        var currentText = run.Text;
        do
        {
            if (!_regex.IsMatch(currentText))
            {
                if (!string.IsNullOrEmpty(currentText)) result.Add(new Run(currentText));
                break;
            }
            var match = _regex.Match(currentText);

            if (match.Index > 0)
            {
                result.Add(new Run(currentText.Substring(0, match.Index)));
            }

            var hyperLink = new Hyperlink();
            hyperLink.Command = ;
            hyperLink.CommandParameter = match.Value;
            hyperLink.Inlines.Add(match.Value);
            result.Add(hyperLink);

            currentText = currentText.Substring(match.Index   match.Length);
        } while (true);

        return result;
    }
}

This is showing the links properly, however I dont know how to bind to the command on my ViewModel. I tested the command and the parameter using a button previously, and the binding was

Command="{Binding DataContext.HyperlinkCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" 
CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}"

So what I am hoping is that I can convert this XAML into C# and attach it to hyperLink.Command = in my custom control. I can't figure out how to access the DataContext of the UserControl that the CustomTextBlock will be placed in.

I am not under any illusion that what I am doing is the best or right way of doing things so I welcome any suggestions

CodePudding user response:

This is an interesting challenge, which I have solved with new code - coming at the problem in a slightly different way:

The code can be found here: https://github.com/deanchalk/InlineNumberLinkControl

  • Related