Display Hyperlinks in Text in Silverlight

1. September 2009 21:04
I was trying to find a way to create hyperlinks from a string.  Or I guess to try and say it more clearly; take a string and find the hyperlinks and make them act as a hyperlink in silverlight. Here are some of the other posts I read before writing my own thing (these are excellent examples): 

1) http://www.silverlightshow.net/items/Silverlight-LinkLabel-control.aspx

2) http://weblogs.asp.net/sergeyzwezdin/archive/2009/04/11/use-of-hyperlinks-inside-text-at-silverlight-3.aspx


My concept is similar to the concept in number 2, but mine is not a control. Where we are the same is that we split the string out into words (I use a space as the delimiter).  If the word is a hyperlink make a HyperlinkButton, if not make it a TextBlock.  Once you make the control add it to a WrapPanel.  

This concept however, can work with whatever you are looking for in a string and when you find it make whatever control you want to replace it.


Below is the code I wrote to make this concept work in the Loaded event of the UserControl.

string myText = "RT @DanWahlin Blogged: Creating a Silverlight DataContext Proxy to Simplify Data Binding in Nested Controls http://tinyurl.com/mmv3mf";

            string[] myTextWords = myText.Split(new Char[] { ' ' });

            List<int> linkIndexes = new List<int>();

            //find the elements in the array that match what we are looking for
            //and add them to our List<>
            for (int i = 0; i < myTextWords.Length; i++)
            {
                if (myTextWords[i].Contains("http://") || myTextWords[i].Contains("https://") || myTextWords[i].Contains("@"))
                {
                    linkIndexes.Add(i);
                }
            }

            //if i (the index) is not in the List then it is a normal string
            //otherwise it is a hyperlink
            for (int i = 0; i < myTextWords.Length; i++)
            {
                if (!linkIndexes.Contains(i))
                {
                    TextBlock txt = new TextBlock();
                    txt.Text = myTextWords[i].ToString();

                    myWrap.Children.Add(txt);
                }
                else
                {
                    if (myTextWords[i].Contains("@"))
                    {
                        //this is used for the username
                        HyperlinkButton lnk = new HyperlinkButton();
                        lnk.NavigateUri = new Uri("http://twitter.com/" + myTextWords[i].ToString().Replace("@", string.Empty));
                        lnk.TargetName = "_blank";
                        lnk.Content = myTextWords[i].ToString();

                        myWrap.Children.Add(lnk);
                    }
                    else //use for normal hyperlink
                    {
                        HyperlinkButton lnk = new HyperlinkButton();
                        lnk.NavigateUri = new Uri(myTextWords[i].ToString());
                        lnk.TargetName = "_blank";
                        lnk.Content = myTextWords[i].ToString();

                        myWrap.Children.Add(lnk);
                    }                    
                     
                }
            }


This code block above has a little extra in it for a twitter client use.  You'll notice I also look for "@" because in Twitter that is a username/screename. You'll notice my sample text is a tweet I grabbed from my twitter feed.

The XAML for this is the following:

<UserControl xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"  x:Class="TestSL3.LinkInText"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300" Background="Black">
    <Grid x:Name="LayoutRoot" Background="Beige">
        <controlsToolkit:WrapPanel x:Name="myWrap" Width="280" Background="Gray"></controlsToolkit:WrapPanel>
    </Grid>
</UserControl>


This can be improved by using Regular Expressions to find what you are looking for. Again this code above is only for concept purposes. How you implement the concept in your application is up to you. I will be implementing this in a ListBox.  Comments or suggestions let me know.

Tags:

Silverlight

blog comments powered by Disqus



My Random Thought

I think the OCW is a great thing to have available to those who are in school, just finished school or just want to educate themself

http://ocwconsortium.org/

John On Twitter

Discounts