Using the Silverlight 3 Navigation Framework with the XamWebMenu

[Infragistics] Devin Rader / Friday, May 15, 2009

Silverlight 3 introduces a new navigation framework that makes it much easier to easily implement navigation between UserControls in a Silverlight application, interacts with the Browser History journal and provides Uri mapping.

The XamWebMenu easily integrates into this framework by simply setting a few properties on the control and its menu items.  Below is an example where I have taken the default MainPage.xaml template that is created when you start a Silverlight Navigation Application, and I have replaced the navigation Buttons that are included by default with the XamWebMenu:

<UserControl x:Class="MenuNavigationDemo.MainPage"
    <Grid x:Name="LayoutRoot" 
        Background="{StaticResource ApplicationBackgroundColorBrush}">

        <Grid Style="{StaticResource NavigationContainerStyle}">
            <igmenu:XamWebMenu NavigationElement="{Binding ElementName=Frame}">
                       Header="Home"  />
                       Header="About"  />
            <!-- This is the original navigation content that is no longer needed -->
            <Border Style="{StaticResource NavigationBorderStyle}">
                <StackPanel Style="{StaticResource NavigationPanelStyle}">
                    <Button Click="NavButton_Click" Tag="/Views/HomePage.xaml" Content="home" 
                            Style="{StaticResource PageLinkStyle}"/>
                    <Button Click="NavButton_Click" Tag="/Views/AboutPage.xaml" Content="about" 
                            Style="{StaticResource PageLinkStyle}"/>

            <Border Style="{StaticResource BrandingBorderStyle}">
                <StackPanel Style="{StaticResource BrandingPanelStyle}">
                    <TextBlock Text="your." Style="{StaticResource BrandingTextNormalStyle}"/>
                    <TextBlock Text="application." Style="{StaticResource BrandingTextHighlightStyle}"/>
                    <TextBlock Text="name" Style="{StaticResource BrandingTextNormalStyle}"/>

        <Border Style="{StaticResource FrameContainerStyle}">
            <Border Style="{StaticResource FrameInnerBorderStyle}">
                <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                    <navigation:Frame x:Name="Frame" Source="/Views/HomePage.xaml"

You can see that on the main XamWebMenu control I use the NavigationElement property to tell the menu which element it should target when a menu item is clicked.  In this case, I am binding to the the Frame element further down in the page.  Then, on each XamWebMenuItem, I have set two properties, the NavigationOnClick property and the NavigationUri property.  The NavigationOnClick property, when set to True, tells the menu that I want to use the Silverlight navigation framework when a menu item is clicked. The NavigationUri property tells the menu what Uri I want the target Frame to navigate to when I click the menu item.  Running the project, you can see that  as expected, clicking on the menu items causes the content in the Frame to change.