Version

Navigating Pages Using xamMenu

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 a reference to the following NuGet package:

    • Infragistics.WPF.Menus

      Additionally, add a reference to the following Microsoft assembly:

    • System.Windows.Controls.Navigation

    For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

  1. Add the following namespace declarations inside the opening UserControl tag.

In XAML:

xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
  1. Add the xamMenu control to the User Control.

  2. 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 -->
   </ig:XamMenuItem>
</ig:XamMenu>
  1. 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>
  1. 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.

  1. 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" />
</Grid>
  1. 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}" NavigationUri="/NavigationPage.xaml"/>
  1. Run your application. Highlight the Pages menu item and click on the New Page item. The new page displays under the menu.

SL xamMenu Navigating Pages Using xamMenu 01.png
SL xamMenu Navigating Pages Using xamMenu 02.png