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.
Posted
05-15-2009 11:25 AM
by
[Infragistics] Devin Rader