Blog

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"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:igmenu="clr-namespace:Infragistics.Silverlight.XamWebMenu;
        assembly=Infragistics.Silverlight.XamWebMenu.v9.1"
    xmlns:navigation="clr-namespace:System.Windows.Controls;
        assembly=System.Windows.Controls.Navigation">
    <Grid x:Name="LayoutRoot" 
        Background="{StaticResource ApplicationBackgroundColorBrush}">

        <Grid Style="{StaticResource NavigationContainerStyle}">
            <igmenu:XamWebMenu NavigationElement="{Binding ElementName=Frame}">
                <igmenu:XamWebMenuItem 
                       NavigationOnClick="True" 
                       NavigationUri="/Views/HomePage.xaml" 
                       Header="Home"  />
                <igmenu:XamWebMenuItem 
                       NavigationOnClick="True" 
                       NavigationUri="/Views/AboutPage.xaml" 
                       Header="About"  />
            </igmenu:XamWebMenu>
            
            <!-- 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}"/>
                </StackPanel>
            </Border>-->

            <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}"/>
                </StackPanel>
            </Border>
        </Grid>

        <Border Style="{StaticResource FrameContainerStyle}">
            <Border Style="{StaticResource FrameInnerBorderStyle}">
                <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                    <navigation:Frame x:Name="Frame" Source="/Views/HomePage.xaml"
                                  HorizontalContentAlignment="Stretch"
                                  VerticalContentAlignment="Stretch"
                                  Padding="15,10,15,10"/>
                </ScrollViewer>
            </Border>
        </Border>
    </Grid>
</UserControl>

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.