Infragistics(R) NetAdvantage(R) : WPF 2012.1
Navigating Pages Using xamMenu
E-mail your feedback on this topic.
Shared XAML > Menus > xamMenu > Using xamMenu > Navigating Pages Using xamMenu

Glossary Item Box

Before You Begin

The xamMenu™ control takes advantage of WPF navigation feature by providing the NavigationUri and NavigationElement properties. If you would like to navigate to different pages in your application, set the XamMenuItem object's NavigationUri to the location of a page and the NavigationElement as a Frame control.

What You Will Accomplish

You will learn how to navigate to a new XAML page using the xamMenu control.

Follow these Steps

  1. Create a new WPF application in Microsoft® Visual Studio®.
  2. Add references to the following assemblies.
    • InfragisticsWPF4.v12.1.dll
    • InfragisticsWPF4.Controls.Menus.XamMenu.v12.1.dll
    • System.Windows.Controls.Navigation
  3. Add the following namespace declarations inside the opening UserControl tag.

    In XAML:

  4. Add the xamMenu control to the User Control.
  5. Add a menu item and call it Pages.

    In XAML:

    <ig:XamMenu x:Name="xamMenu1" Height="23">
       <ig:XamMenuItem Header="Pages">
           <!-- TODO: add nested menu item that links to a XAML page -->
  6. Add a Frame control under the xamMenu control to display the new page.

    In XAML:

    <navigation:Frame Grid.Row="1" x:Name="menuFrame"></navigation:Frame>
  7. Create a new Page control in your application.
    1. Right-click the current project in the Solution Explorer and highlight Add.
    2. Select New Item in the submenu. An Add New Item dialog appears.
    3. Select WPF Page.
    4. Name the page NavigationPage.xaml and click Add.
  8. Make the background light blue and add a TextBlock control with the text "New Page" to NavigationPage.xaml.

    In XAML:

    <Grid x:Name="LayoutRoot" Background="LightBlue">
       <TextBlock Text="New Page" />
  9. Add the nested menu item that links to the page created above using the Frame control.
    1. Set the NavigationUri property to the relative path of the page.
    2. Set the NavigationElement property to the Frame control.
    3. Set the NavigationOnClick property to True.

    In XAML:

    <ig:XamMenuItem Header="New Page" 
    NavigationOnClick="True" NavigationElement="{Binding ElementName=menuFrame}"
  10. Run your application. Highlight the Pages menu item and click on the New Page item. The new page displays under the menu.
Related Topics

Layout Settings

Binding to Data

Adding and Removing Items

Adding Separators between XamMenuItems

Adding Icons to XamMenuItems

Adding Check Boxes to XamMenuItems