12 Days of RIA – Day 4 – Navigation

12 Days of RIA – Day 4 – Navigation

  • Comments 2

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.

clip_image002

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:

clip_image004

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.”

clip_image006

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:

clip_image008

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:

clip_image010

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

clip_image012

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

clip_image014

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

clip_image015

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

clip_image017

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:

clip_image019

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

clip_image020

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

  • 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:

    <UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

    x:Class="TesteFrameWork.MainPage"

    Width="640" Height="480">

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

    <Grid.RowDefinitions>

    <RowDefinition/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

    <ColumnDefinition/>

    </Grid.ColumnDefinitions>

    <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"/>

    </Grid>

    </UserControl>

    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???

  • 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.

Page 1 of 1 (2 items)
Leave a Comment
  • Please add 4 and 7 and type the answer here:
  • Post