Silverlight 3 and Navigation Applications

I’ve had a quick experiment with Silverlight 3 and navigation applications.

There are some new classes in the assembly System.Windows.Controls.Navigation.dll – specifically one called a Frame and a base class to derive from called Page along with some helpers of which the most key appears to be NavigationSource.

I built a little sample out of this. I wrote some .NET code that ran around my music library on my NAS and sucked out all the MP3 file information it could find and then I bundled that into an XML file and built a Silverlight app which shows that data.

You can wander into the app by doing;

https://mtaulty.com/downloads/SLMusic/music.html

which is the same as visiting my artists page as in;

https://mtaulty.com/downloads/SLMusic/music.html#/Pages/Artists.xaml

but then there’s also my albums page which you can visit with;

https://mtaulty.com/downloads/SLMusic/music.html#/Pages/Albums.xaml

but you can also augment that query string as in;

https://mtaulty.com/downloads/SLMusic/music.html#/Pages/Albums.xaml?artist=U2

and only see a list of albums for U2 and then you can also visit my songs page (note to self – how are these things being ordered?!?!? :-));

https://mtaulty.com/downloads/SLMusic/music.html#/Pages/Songs.xaml

but you can also augment that query string as in;

https://mtaulty.com/downloads/SLMusic/music.html#/Pages/Songs.xaml?artist=U2

https://mtaulty.com/downloads/SLMusic/music.html#/Pages/Songs.xaml?artist=U2&album=Pop

What’s very cool about this for me is that all of these URLs are being served up by the very same Silverlight application – there’s only one application on the page but it’s able to pick up the portion of the URI after the # and use that to index into content. This makes it possible to do deep linking into a Silverlight application the way that we expect to with content on the web and I think it’s really, really cool.

You should find that this integrates properly with browser history so you can go Back/Forward between content.

In terms of how the application’s built, I just have a regular MainPage.xaml file and in that MainPage.xaml file I just have a Frame;

<nav:Frame
         x:Name="navFrame"
         HorizontalContentAlignment="Stretch"
         VerticalContentAlignment="Stretch"
         HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch"/>

when the XML data file has loaded, I ask that Frame to navigate to the artists.xaml page which is one of three pages in the application. Note – there’s no real need to have 3 pages in this particular application as they are all kind of “the same” but I wanted to have Pages in order to explore the Navigation framework. So, the code looks like;

navFrame.Navigate(new Uri("/Pages/Artists.xaml", UriKind.Relative));

Each of my Artists.xaml, Albums.xaml, Songs.xaml is a separate page which is a XAML file and code-behind producing something that derives from Page.

So, when a request comes in that indicates a particular page, the framework ensures that request is sent to the page in question. Beyond that, Page has a nice override called OnNavigatedTo which receives a NavigationEventArgs which has a Uri property on it and I can then pick up that Uri and try and pull out the arguments on the query string like artist and album. The URI’s passed are always (AFAICT) relative URI’s and, to date, I’ve not found a great way of parsing those in SL and so I end up just using string manipulation to do it.

Update – there’s a class called NavigationContext with a QueryString property that makes that easy.

That’s all there is to it – I think this makes a huge difference to the kinds of applications that can be built on Silverlight as deep-linking is often a problem for Rich Internet Apps so I’m really pleased to see this stuff in the framework.

I was trying to make the UI of the app;

image

look a little bit like the UI I have on the head-unit in my car for playing media but I don’t think I got “quite” there ( I guess the people who designed the UI in my car spent more than 20 mins on it – hope so!! 🙂 ).

Update – I published this app and then realised that you could navigate into a page before its data had loaded. Bit of a mistake and so I updated it quickly to try and stop that happening – the async nature of Silverlight can always catch me out 🙂