Building a Universal XAML Twitter stream: TextBlock vs RichTextBlock vs WebView

This morning I was using my Windows Phone’s Twitter application and I was curious why the twitter stream was plain text, why did the developer choose to go with plain text for tweets … (notice in the picture below the @’s, #’s, url’s are all just plain text)

Windows Phone Tweet Stream

[notice : You’ll notice the coloured smileys, this is a feature of the OS where “coloured fonts” is supported 🙂 ..  You’ll see below that even Windows OS supports coloured fonts too!]

So I decided to prototype 3 different approaches to rendering a “tweet”

1. Xaml Textblock
2. Xaml RichTextBlock
3. Xaml WebView that renders tweets in HTML (within a xaml app)

Twitter Library to retrieve tweets

To make things easy I used the LinqToTwitter  library.

There is a brilliant library already written that works for Universal XAML apps, its called LinqToTwitter.

It’s simple to use it ..

1. Nuget in the library into your universal apps

2. Create Authentication

3. Retrieve Tweets

4. Massage tweets into a form the UI can use

Approach 1 : using a Textblock

The first approach I used was a Listbox that renders tweets in a Textblock. This Listbox is bound to the Tweet’s ObservableCollection defined above

When the app renders the listbox it looks like this ..

using XAML Textblock’s to render tweets

What you’ll notice is the Textblock renders the raw tweets and all the @’s , #’s or url’s are NOT clickable/highlighted. This pretty much resembles Windows Phones Twitter app.

Performance of this approach, using a twitter stream of 100 tweets …

On several runs using a Textblock to render tweets, it averaged around 38-41MB footprint

Approach 2: using a RichTextBlock

The second approach I  wanted to highlight the @’s, #’s and url’s . So I turned the Textblock into a RichTextBlock and implemented a binding helper to turn the raw text into Paragraph and Runs.

The binding logic for RichTextBlock looks like this, what’s important to point out is the “ParseForRichTextParagraph” method where the translation from raw twitter text to ‘paragraph’ occurs.

And here is what the finished render looks like

using XAML RichTextblock’s to render tweets

Performance of this approach, using a twitter stream of 100 tweets …

On several runs using a RichTextBlock to render tweets, it averaged around 44-46MB footprint

Approach 3: using a WebView

The 3rd approach I wanted to take a completely different approach of rendering the completely dynamic content of tweets with HTML .

I have always believed that the perfect UI framework would let you mix xaml/html/DirectX together. The closest we can get to that today is hosting a webview in a xaml app 🙂

So like my examples above, ill replace the Listbox with a WebView.

And I have a BindingHelper that turns the Tweets collection into HTML. Also I hooked to the Tag property so that I could bind to something.

Here is what a WebView rendering a tweet stream in xaml looks like.

using a XAML WebView to render the tweet stream

[note: it appears the WebView does not support coloured fonts 😦 ]

Performance of this approach, using a twitter stream of 100 tweets …

On several runs using a WebView to render tweets, it averaged around 46-49MB footprint

Demo Code

You can download the sample code here

note: I wrote this sample on Windows 10 – 9926, VS 2015 CTP 5

Conclusion

1. Listbox – Textblock :  38-41MB
2. Listbox  – RichTextBlock :  44-46MB
3. WebView – HTML/CSS/JS :  46-49MB

I can see why the Windows Phone Twitter app would want to go with a “Raw Tweet” stream (approach 1). Every megabyte of memory footprint saved is a big deal on mobile devices.

However I personally would of taken the approach 3 (using a WebView within the xaml app) as I truly believe something as dynamic in content as a twitter stream makes more sense rendered as HTML .. 🙂

And the argument for turning the entire app into a WinJS app, sorry BUT I truly believe XAML apps are the way to go.  If you need HTML content, we have the WebView control for that 🙂