Silverlight data binding and value converters

July 30, 2008

If you are working with Silverlight and data you most likely are going to leverage data binding at some point and run into some needs to format the data in the XAML. Luckily this can be done using value converters, which have been available for WPF since it’s inception as well. Let’s explore what I’m talking about using a common formatting need: dates.

Consider this list box output binding:

        1: <ListBox x:Name="FeedList">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   2:</span>     <span style="color: #0000ff">&lt;</span><span style="color: #800000">ListBox.ItemTemplate</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   3:</span>         <span style="color: #0000ff">&lt;</span><span style="color: #800000">DataTemplate</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   4:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">StackPanel</span> <span style="color: #ff0000">Orientation</span><span style="color: #0000ff">="Vertical"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   5:</span>                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">FontFamily</span><span style="color: #0000ff">="Arial"</span> <span style="color: #ff0000">FontWeight</span><span style="color: #0000ff">="Bold"</span> <span style="color: #ff0000">Foreground</span><span style="color: #0000ff">="Red"</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="{Binding Title.Text}"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   6:</span>                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">FontFamily</span><span style="color: #0000ff">="Arial"</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="{Binding PublishDate}"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   7:</span>             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">StackPanel</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   8:</span>         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">DataTemplate</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   9:</span>     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ListBox.ItemTemplate</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  10:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ListBox</span><span style="color: #0000ff">&gt;</span></pre>

Assume this XAML binds to SyndicationFeed.Items data coming from an RSS feed. If we simply bind it the result would be this:

Maybe we don’t want our date to be formatted in such ‘system’ looking format and we want something like “July 16.” Enter the IValueConverter class. First we’ll add a class to our Silverlight application, let’s call it Formatter. Once we add that class we need to implement the IValueConverter interface which gives us Convert and ConvertBack functions we have to implement:

       1: public class Formatter : IValueConverter
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   2:</span> {</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   3:</span>     <span style="color: #cc6633">#region</span> IValueConverter Members</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   4:</span>  </pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   5:</span>     <span style="color: #0000ff">public</span> <span style="color: #0000ff">object</span> Convert(<span style="color: #0000ff">object</span> <span style="color: #0000ff">value</span>, Type targetType, <span style="color: #0000ff">object</span> parameter, System.Globalization.CultureInfo culture)</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   6:</span>     {</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   7:</span>         <span style="color: #0000ff">throw</span> <span style="color: #0000ff">new</span> NotImplementedException();</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   8:</span>     }</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   9:</span>  </pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  10:</span>     <span style="color: #0000ff">public</span> <span style="color: #0000ff">object</span> ConvertBack(<span style="color: #0000ff">object</span> <span style="color: #0000ff">value</span>, Type targetType, <span style="color: #0000ff">object</span> parameter, System.Globalization.CultureInfo culture)</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  11:</span>     {</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  12:</span>         <span style="color: #0000ff">throw</span> <span style="color: #0000ff">new</span> NotImplementedException();</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  13:</span>     }</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  14:</span>  </pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  15:</span>     <span style="color: #cc6633">#endregion</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  16:</span> }</pre>

You can see that the Convert function gets some good information that we can use to do the conversion. The parameter value is the formatter passed into the argument. For example in our desire to display “July 16” we want to use the date formatter shortcut of “M” for the parameter. Let’s start the conversion.

       1: public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   2:</span> {</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   3:</span>     <span style="color: #0000ff">if</span> (parameter != <span style="color: #0000ff">null</span>)</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   4:</span>     {</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   5:</span>         <span style="color: #0000ff">string</span> formatterString = parameter.ToString();</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   6:</span>  </pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   7:</span>         <span style="color: #0000ff">if</span> (!<span style="color: #0000ff">string</span>.IsNullOrEmpty(formatterString))</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   8:</span>         {</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   9:</span>             <span style="color: #0000ff">return</span> <span style="color: #0000ff">string</span>.Format(culture, formatterString, <span style="color: #0000ff">value</span>);</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  10:</span>         }</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  11:</span>     }</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  12:</span>  </pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  13:</span>     <span style="color: #0000ff">return</span> <span style="color: #0000ff">value</span>.ToString();</pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  14:</span> }</pre>

What we are doing here is ensuring that a parameter is passed in and then using the String object to handle the formatting for us. Great, now we have our Convert function (in this sample we are doing one-way binding so I’m going to leave ConvertBack alone for now). Let’s compile our code and then move back to the XAML. In XAML we now want to make our converter available for use. The first step is to add the CLR namespace to our root XAML node:

       1: xmlns:converter="clr-namespace:TypeConverter_CS"
  

The next step is to add our converter class as a resource to our XAML control so that we can use it throughout the control later:

       1: <UserControl.Resources>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   2:</span>     <span style="color: #0000ff">&lt;</span><span style="color: #800000">converter:Formatter</span> <span style="color: #ff0000">x:Key</span><span style="color: #0000ff">="FormatConverter"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   3:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">UserControl.Resources</span><span style="color: #0000ff">&gt;</span></pre>
  

Now if we go back to our XAML where we are data binding the date we can implement this and pass in the converter parameter (format) we want to use. The end result full XAML looks like this:

       1: <UserControl x:Class="TypeConverter_CS.Page"
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   2:</span>     <span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span> </pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   3:</span>     <span style="color: #ff0000">xmlns:x</span><span style="color: #0000ff">="http://schemas.microsoft.com/winfx/2006/xaml"</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   4:</span>     <span style="color: #ff0000">xmlns:converter</span><span style="color: #0000ff">="clr-namespace:TypeConverter_CS"</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   5:</span>     <span style="color: #ff0000">Width</span><span style="color: #0000ff">="400"</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="300"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   6:</span>     <span style="color: #0000ff">&lt;</span><span style="color: #800000">UserControl.Resources</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   7:</span>         <span style="color: #0000ff">&lt;</span><span style="color: #800000">converter:Formatter</span> <span style="color: #ff0000">x:Key</span><span style="color: #0000ff">="FormatConverter"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   8:</span>     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">UserControl.Resources</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">   9:</span>     <span style="color: #0000ff">&lt;</span><span style="color: #800000">Grid</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="LayoutRoot"</span> <span style="color: #ff0000">Background</span><span style="color: #0000ff">="White"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  10:</span>         <span style="color: #0000ff">&lt;</span><span style="color: #800000">ListBox</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="FeedList"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  11:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">ListBox.ItemTemplate</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  12:</span>                 <span style="color: #0000ff">&lt;</span><span style="color: #800000">DataTemplate</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  13:</span>                     <span style="color: #0000ff">&lt;</span><span style="color: #800000">StackPanel</span> <span style="color: #ff0000">Orientation</span><span style="color: #0000ff">="Vertical"</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  14:</span>                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">FontFamily</span><span style="color: #0000ff">="Arial"</span> <span style="color: #ff0000">FontWeight</span><span style="color: #0000ff">="Bold"</span> <span style="color: #ff0000">Foreground</span><span style="color: #0000ff">="Red"</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="{Binding Title.Text}"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  15:</span>                         <span style="color: #0000ff">&lt;</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">FontFamily</span><span style="color: #0000ff">="Arial"</span> <span style="color: #ff0000">Text</span><span style="color: #0000ff">="{Binding PublishDate, Converter={StaticResource FormatConverter}, ConverterParameter=\{0:M\}}"</span> <span style="color: #0000ff">/&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  16:</span>                     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">StackPanel</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  17:</span>                 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">DataTemplate</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  18:</span>             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ListBox.ItemTemplate</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  19:</span>         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ListBox</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  20:</span>     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Grid</span><span style="color: #0000ff">&gt;</span></pre>

<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #606060">  21:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">UserControl</span><span style="color: #0000ff">&gt;</span></pre>

Notice how we made a reference to our StaticResource (using the key name we provided) and then passed in the ConverterParameter of {0:M} to format our date. The resulting output is now:

And you’ll notice the date formatting. Now in our converter we could have been real explicit in our Convert function and looked for a date and converted it specifically, but our converter code is generic enough that it can handle some other input types like more complex date formats or numbers. If we used this same converter code on a number we could pass in the ConverterParameter of {0:c} for currency formatted information.

If you use Expression Blend as well, you can also use some of the user interface properties to specify the binding values that will get output as XAML…here’s a screenshot of the converter settings UI in blend:

This method is useful when you may have custom conversion needs for your data. Hope this helps! You can download this sample here: TypeConverter_CS.zip

Powerline equipping my dungeon

July 29, 2008

I’ve been working a lot more from my home office lately and it was getting increasingly challenging during this summer with both kids at home. Okay, let’s be honest, my wife was probably more the distraction :-). When we built our home 4 years ago we were both working from home and built an office specifically for the both of us. 3 dedicated power circuits to the room, hard-wired ethernet to that room x 4, wireless printing, split desks, tile floor, etc., etc. – everything I wanted in my office for convenience.

Fast-forward 4 years. Add 2 kids. Add wife who isn’t working anymore, but maintains a full-time job managing the local community stuff she’s involved in and of course, our family…which she does a fantastic job at I might add! It was just getting too difficult for me. I’ve been relegated to the basement back bedroom. I didn’t want to work in our basement because there were no geek creature comforts and where I put the wireless wasn’t ideal for the room where I would work anyway (hindsight is 20/20 right?). Well, I couldn’t fight it anymore. One trip to Ikea to get a desk add-on to a piece of furniture she already had in her scrapbook/activity room and I had a desk (and a new chair). It hasn’t been the best. The lighting sucks and it isn’t as comfortable peripherally speaking as my designed office for me. Recently I’ve anticipated adding more network stuff (NAS, VOIP device, etc.). The wireless only solution wasn’t going to cut it for me.

Netgear Powerline HD Kit As such I never expected to be down there, I never wired for anything beyond the one port for the wireless access point. I had a cabling guy stop by last night to talk with me about my options. I didn’t like the 15-20 drywall hole option too much and said I’d think about it. I remembered seeing something about ethernet over power lines. I did some research and found the HomePlug Alliance which provided some good general information for me. Enough to convince me that it wasn’t something I should just disregard as an option. Today I went to Fry’s Electronics to peruse my options. There were many. From manufacturers I didn’t know to those that you recognize: Netgear, D-Link, Linksys, etc. I didn’t really seek out any advice in the beginning on what would be best, so I fell into the marketing scheme – bigger numbers is better right? So I bypassed the 14MBPS, skipped over the 85MBPS, and opted for the 200MPBS (I couldn’t find any higher). I purchased the Netgear Powerline HD Network Kit. It was on sale as well which made it more attractive (picked it up for $110). I was skeptical but figured I had nothing to lose. $110 or hundreds more in cabling and drywall repair jobs. The kit comes with two adapters. Plug one into an outlet, connect it to your router and plug the other where you need ethernet connectivity. I did just that.

I’m happy to report I don’t notice anything different…which is to be expected. It literally did “just work” for me. I went to no configuration screens, installed no software, etc. One blue light lit up on one box…a few seconds later the other blue light on the other box was blinking indicating they’ve found each other. Happy times. My speedtest.net rating showed the same speeds I expected to get and I don’t experience any noticeable lag between requests or anything. I haven’t noticed anything in my home network going awry at all either. My XBOX just died, but I think that is more of a coincidence than a side effect. If it turns out it isn’t I’ll report back.

Anyhow, a cheap alternative to wiring. Sure if you want fiber or gigabit connections, this isn’t going to work. But for the average joe, the older home, etc. – so far it is turning out to be a simple alternative that works. Simple to set up too which always is a plus.

Silverlight at Gamefest

July 23, 2008

This week I had the privilege of attending and helping with some Silverlight in casual games presentations at the XNA Gamefest conference happening in Seattle. I say helping because the real game experts were there.

Two Silverlight presentations were given. One by Bill Reiss/Joel Neubeck and the other by Mike Snow. Between the two sessions we covered concepts in Silverlight game development as well as a walk-through of starting out to create a simple game. I consider these guys to be the foremost experts on the topic given their experience in creating games like Dr. Popper, Stack Attack, Zero Gravity, Zombomatic and Tunnel Trouble. Mike also will be posting some game frameworks as well as demonstrating some multi-player aspects.

It was a decent turnout for those interested in learning where Silverlight plays in casual games. We also were able to talk with the MSN Games teams that gave us an understanding of what would be needed to implement a game in Silverlight. I was surprised to see how simple the initial process is to get a game in the pipeline for consideration of MSN Games. So if you have some thoughts on writing a game in Silverlight and want a distribution channel…consider MSN Games!

Silverlight Game Contest!

Need some incentive? How about a Silverlight game contest? TeamZone Sports is sponsoring a contest…with some cash prizes. Official rules are coming soon, but you can sign up to be notified here. I’m excited to see what comes out of the contest!

XNA and Silverlight?

With the announcement at XNA that the XNA Community games are going to be opened up wider so that anyone can essentially write an XBOX game and have other community members consume it, I suspect people will be jumping at those opportunities! Maybe you want a game in multiple channels: XBOX, Windows, Zune, Web. There are going to be things you may want to know in advance. Bill did a demonstration of a single code base that ran on Windows (XNA), Zune (XNA for Zune) and Silverlight. It was pretty cool to see the same experience in all those different platforms. Bill had some good advice on things to look for when developing for this goal…maybe he’ll append those to the post (hint, hint). You can download his sample code here.

Thanks to MSN Casual Games for inviting Silverlight to the conference (and for the sweet swag). Thanks to Bill and Joel as our MVPs in this area for representing their experiences and sharing their knowledge with us. Thanks to Mike for sharing his expertise and be on the lookout for him to provide some source on how he accomplished some multi-player game play within Silverlight using sockets.

Providing startup parameters for Silverlight

July 17, 2008

One of the things that makes Silverlight 2 great is the ability to create a very flexible framework application that others can use and can be embeddable with some dynamic properties. This is the method used in the SL2 Video Player to provide a completely dynamic player that is portable.

How? Using the initParams property of the plugin. There are a few ways you can do this. I’ve just uploaded a video demonstrating three of them:

Creating App Resources
Passing into the root visual constructor
Using URI query string parameters

What? Query string params? Yep, the HTML bridge gives us a nice object model actually to inspect those parameters too. Take a look at the latest video on the Silverlight community site!

Low-cost SSL Providers

July 17, 2008

In IIS7 you can do very simple testing for SSL related site hosting. It literally is like a 2 click process:

Enter a name for the cert and done, you now have SSL on your box. Of course this is a self-issued/signed certificate so it will do you know good in the real world, but for most of the developer world it will work fine. There may be those times, however, where things may not be quite working right and you want to eliminate the self-signed cert form the equation to make sure it isn’t the issue.

This was the need in my case. I’ve been doing some messing around with secure services and Silverlight scenarios and ran into one issue that I needed to eliminate the self-signed cert and get a ‘real’ one. Self-signed certs have a quirky behavior in browsers and I just wanted to eliminate that in my test.

I shouted out on Twitter an ask of “cheap ssl providers?” and got a few responses:

I always forget about GoDaddy when it comes to anything but domain registrations but they do have a lot of other services and this reminded me that they do have a good price on SSL certs ($30/year). Having had previous experience (and happy with) InstantSSL I knew of their offering as well. My goal was not to secure a beefy e-commerce system, or help secure personal information, etc. I needed “https:” and that little icon :-) -- that’s it. So for me, low cost was what I was seeking – I had no need for any of the deluxe offerings.

With that in mind I didn’t want to purchase a cert from each on of these just to see what the deal was. That being said, this isn’t all too fair of a comparison of them all, but only 2. Please keep that in mind. GeoTrust was by far the most expensive and I can’t quite tell why to be honest. RapidSSL was pretty on par with everyone else. OpenSSL. Well, it’s free if your time is. I mean it isn’t necessarily integrated into every server environment (yes I know it likely is in Linux), so be aware that there is some setup there. Remember my goal: fast and cheap.

GoDaddy was offering $15/year SSL certs and InstantSSL had 90-day free ones. Both perfect for my needs. I didn’t find out about GoDaddy’s deal until after I started down the path of InstantSSL (which you’ll see was quick). GoDaddy’s $30 price tag for my purposes was enough for me to consider just doing the free 90-day one from InstantSSL.

Both processes would require me to create a request from my server. I’m taking that part out of the equation. The time I’m talking about is from request to issuer to installation and operational.

IntantSSL had a simple form. I input my CSR text added my contact information and clicked submit.

I was told I’d get two emails: one verifying me as the domain owner (pulling contact information from WHOIS…another reason to ensure you always keep this updated correctly) and once complete a second one with my cert. By the time I was done reading that sentence, the verification email was in my inbox. Click on a link, cut/paste a code, click submit. Inbox now contained my cert and instructions. Installation was a breeze as i just processed the request and pointed the file. Seriously, the total time was < 8 minutes. 2 emails, one click. Having been a previous customer I can assure you that the process is the same should I have opted for their 1 year basic SSL at $80. Just as quick (adding the purchase step in).

In that time I saw a twitter that GoDaddy had a $15 deal promotion. I figured, what the heck, that price removed any barrier for even my test use of the cert. So I started their process. It went something like this:

Buy cert, add to cart
Go through 3 screens of add-on service (clicking ‘no thanks’ each time)
Checking out (fast/simple)
Received email – instructions weren’t too clear on next step
Logged into account
Navigate to certificates…realized i bought a “credit”
Activate “credit”
Go to cert manager
Enter request
Wait for verification
Recieve certs.

It still didn’t take very long, but was noticeably more steps and not clear direction for a lay person I’d have to say. I received the cert in my email with a link to instructions. I was warned of this on Twitter that there would be an extra step. It isn’t that bad, but is an extra step. GoDaddy needs some intermediate authorities to be on the box before your certificate is trusted. They ship these with your cert so you don’t have to go digging. This step does involve opening Management Console, etc. and then going to finalize the request in the IIS manager. Overall time for GoDaddy – I’d estimate 15-20 minutes. Still not bad…and the price is right.

I’ll stick with my GoDaddy cert of course because at the $15 price I got a full year so no reason to change now. I would have to say that GoDaddy and InstantSSL both offered the easiest and fastest route to request –> operational I could have hoped for in the process. I imagine by the name ‘RapidSSL’ that they’d be similar.

One Twitter comment was:

instantssl is actually the best quality for the price I've seen.

And having seen their offerings and been through their process, I’d have to agree. Either way there is a list of folks to look at. I’d recommend InstantSSL first, then GoDaddy based on my experiences.

Oh yeah, OpenSSL is free…if someone can convince me that I could have set it up in < 10 minutes I would have tried. It took me longer than that to figure out what I might even have to do!