As Jesse Liberty has suggested, since the Silverlight 2 beta has not yet been released I decided to do a WPF implementation of ScottGu’s excellent Silverlight 2 “Digg client” tutorial (thanks Scott!).  It turned out to be a bit harder than I expected, but I did learn things.  Below I list the changes I had to make to translate Scott’s Silverlight 2 app to WPF.  Scott already lists some of these in step 8 of his tutorial.

You can download my working WPF VS-2008 solution here.

Converting to a WPF “Navigation App”:

To create a browser-like experience similar to Silverlight I wrote my version as a WPF “navigation app”.  Another way would be as an XBAP, but since Scott used a full WPF desktop app, so did I.  To make it a WPF “navigation app” I had to replace Scott’s outer Window with a NavigationWindow.  Scott’s original Silverlight UserControl subclass has the name Page, but WPF already has a general Page class used by navigation apps.  Therefore I replaced his UserControl base class with a WPF Page base class, and named the derived class Page1.

Emulating Silverlight 2’s HyperlinkButton:

Since WPF does not have an exact equivalent of Silverlight 2’s HyperlinkButton class, Scott replaces it with a TextBlock.  I’m not sure if Scott wrote the extra WPF code to do it, but I decided to make the TextBlock actually behave like a “hyperlink”.  Therefore when clicked it must actually navigate to the target HTML page, and it must expose bindable dependency properties (DPs) that emulate HyperlinkButton’s DPs.  I ended up creating a UserControl called HyperlinkButton_ForWPF to encapsulate this functionality and wrap the TextBlock. 

To support data binding I needed to add two custom DPs to HyperlinkButton_ForWPF: Content2 and NavigateUri.  Why call it Content2 and not Content like Silverlight does?  Because UserControl already has a DP named Content.  There might be a way to “repurpose” the UserControl.Content DP, but the things I tried didn’t work, so I just added the custom Content2 DP instead.

Once the HyperlinkButton_ForWPF was working, I was able to click on the title text for an individual Digg HTML article and have the outer NavigationWindow get filled with that HTML page.  Initially pressing the back button did return me to the original Page, but all the existing Digg content was gone.  That is the default behavior of a WPF navigation app.  It recreates each page from scratch whenever it is reentered.   But we want the state of the Page saved, so that we don’t need to requery Digg each time.  By setting Page.KeepAlive to true, we get the desired state-retaining behavior.

Calling the Digg Web API:

Scott uses a WebClient object to query the Digg web API.  I needed to make several changes before it would work correctly under WPF.  The original version returned HTTP error code 403 in response to my queries.  Digg’s documentation says that our HTTP query request must include a User-Agent HTTP Header.  Adding that fixed the 403 errors.  Another problem was that apostrophes in stories were displayed with strange characters.  The fix for that was to explicitly tell the WebClient object to assume UTF-8 encoding.

I modified Scott’s original Digg query a little also.  Instead of just requesting 20 random stories from a given topic (/stories/topic/{topic name}), I used a different endpoint (/stories/topic/{topic name}/popular).  The added  “popular” part asks for the most popular stories.  I also added a “sort” parameter, so the most popular stories are at the top of the list.  By the way, there are only about 50 “topics” that this endpoint queries for, so don’t expect to be able to put any arbitrary phrase in the search box (as if it were Google).  The list of topics is here: http://apidoc.digg.com/Topics.  For example, “basketball”, “microsoft” or “music”.

What was my conclusion from all this?  That it will be great when we actually get the real Silverlight 2 beta to play with, rather than trying to approximate it :).

Alan Cobb