I recently wanted to put together a portfolio page of the various code and samples that I've worked on over the last few years.  To do so, I created a very simple xml file, which you can see here.  Then, I decided to create two different UI experiences to display the UI, one in ASP.NET and one as a WPF .XBAP.  I added a page that uses javascript to detect if a user has .NET 3.0 and, if they do, I send them to the .XBAP.  If they don't, I send them to the ASP.NET page.

Each implementation turned out to be pretty simple to create and have quite a few similarities.

I like how both data models have something in place to handle nested hierarchies.  In ASP.NET, it is done by using a Repeater inside a Repeater, setting the DataSource with an XPathSelect.  In WPF, it is done by nesting an ItemsControl inside the DataTemplate, setting the ItemsSource to the right XPath.

I also had to handle the case where I didn't have a string value. For example, not all samples have videos, which in the XML looks like this: <VideoUri/>.  In ASP.NET, if I had an empty string,  the syntax I used to not display the URL was to put an expression in the Visible field:

Visible='<%#XPath("VideoUri") != string.Empty %>'

In WPF, I first thought that the built-in BooleanToVisibilityConverter would do the trick, but because you can't do expressions in WPF databinding, I had to whip up a quick converter:

    public class EmptyStringToVisibilityConverter : IValueConverter  
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            string strValue = string.Empty;
            if (string.IsNullOrEmpty((string)value))
                return Visibility.Collapsed;
                return Visibility.Visible;

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            return null;

And then in the XAML, I used the converter as such:

Visibility="{Binding Mode=Default, XPath=VideoUri, Converter={StaticResource StringToVis}}"

Here's some little lessons learned and gotchas:

  • ASP.NET: When using the asp:HyperLink tag in conjunction with the #XPath syntax, I had to use single quotes (') instead of double quotes (") to make the parser happy.
  • WPF: Remember to wrap your ItemsControl in a ScrollViewer, since scrolling doesn't come for free with ItemsControl.
  • WPF: I used the LinkLabel control by Lubo Blagoev which was quite nifty. 
  • WPF: To download the XML from the server to the XBAP, I used the pack://siteoforigin:,,,/ syntax.

So, recursively, I've added the code for my portfolio to my portfolio, which is where you can get the code. The next thing I want to do is add a tag cloud to the application, probably using LINQ. I also want to make the WPF page more interesting to show what you can do above and beyond just displaying the information.