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.

Comments (2)
  1. drikaferreira says:

    I just want to do a very basic thing: to show two different XAML pages, say, Page1.xaml and Page2.xaml in two lateral areas of the MainPage.xaml.

    As far as I understood from the manual, the container for the “Page” element is Frame. So, the code in the MainPage.xaml is the following:




    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:local="clr-namespace:TesteFrameWork"


    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">







    <navigation:Frame HorizontalAlignment="Left" Margin="0,0,0,8" Width="177" Source="/Page1.xaml"/>

    <TextBlock Height="49" Margin="216,73,313,0" VerticalAlignment="Top" Text="Some text" TextWrapping="Wrap"/>

    <navigation:Frame HorizontalAlignment="Right" Width="186" Source="/Page2.xaml"/>



    Unfortunately, the system fails to show the second page Page2.xaml, showing Page1.xaml instead.

    Is there any way to walk around this difficulty — use a container other than Frame or something else???

  2. Bruce Kyle says:

    My colleague Jared responded —

    When using page based navigation you only need one NavigationFrame. The “Source” property indicates the path to the initial starting page, and then you can navigate from page to page in code by setting the Source property to something else.

    If you just want to display two pieces of content side by side, they should probably be just Control or UserControl instead of pages.

    Having said all that, I don’t see why your sample wouldn’t work unless your grid column definitions don’t allow for the second frame to be shown. Try replacing the two NavigationFrames with different colored rectangles and make sure you see both of them.

Comments are closed.

Skip to main content