12 Days of RIA – Day 4 – Navigation

Now that I had a model built over the Chinook database tables, the next step I planned to take was to make use of it in the client. The client app generated by the Silverlight Business Application template functions just as the Silverlight Navigation apps do on Silverlight 3. The white area of MainPage.xaml contains a navigation frame, which hosts the Home.xaml and About.xaml navigation pages.

MainPage.xaml is intended to be extended and customized to add new views over the data entities provided by the service. Rather than pave over the Home view, I attempted to do the right thing and quickly show you how to add an additional page (and show off some new features of VS2010 XAML designer in the process.) I wanted to make a view that allows me to find artists and the find albums and tracks linked to them. I did this by adding a new Silverlight Page to the Views folder – I called it Artists.xaml:

The VS2010 XAML designer offers access to the Document Outline view, which you can access by right-clicking an element on the design surface and selecting “Document Outline.”

The generated layout is just a Page with a Grid element as its child. To match the other pages, I changed the Grid into a StackPanel (directly in the XAML) and added a pair of left-aligned TextBlocks (via drag+drop from the Toolbox onto the design surface) to yield the following:

The TextBlocks don’t look the same as the ones on Home.xaml because they haven’t had that style applied. The VS2010 XAML Designer made it easy to do this though. Clicking on a TextBlock and then selecting its Style property pops up a set of possible styles:

Setting Style properties to HeaderTextStyle and ContentTextStyle yield a look consistent with the other views.

The client-side project generated by the Silverlight Business Application template is a little more robust than that though. The strings that appear in the other views come from a resource called ApplicationStrings.resx

In here, I added strings for the Artists page and adjust a couple other (like ApplicationName) to more appropriate values

I then wired up the TextBlock by copying and tweaking analogous content from Home.xaml

To connect the view to the navigation system in MainPage.xaml took a little additional work. In MainPage.xaml, I just followed the pattern shown for the menu bar by adding another hyperlink button and spacer in the XAML and changing their names to remove the collision:

The app then now navigated to Artists.xaml when the Artists HyperlinkButton is clicked. Code for this step is posted here.

I’m now ready to make use of the data on Artists.xaml in the next step.