Navigation Application using User Control in WPF

We know that we can navigate from one page to another page by using "Navigation window " class. Another way to do so is by using user controls. Here I explained how to navigate from one user control to another from Master Page.

Go to visual studio and open new project as shown below:

new WPF project

When we open a new project in wpf we will get Mainwindow.xaml for design and Mainwindow.cs to write code.

In xaml section by default we will get one grid.Inside that grid insert one UserControl as Shown below.

<Window x:Class="UserControlNavigation.MainWindow"



Title="MainWindow" Height="558" Width="718" Background="AliceBlue">

  <Grid Name="grid1">

    <UserControl Margin="74,184,118,133" Background="Aqua" Height="190" Width="490">

      <Grid Name="grid2" Height="185" Width="485" Background="Bisque">

        <TextBlock Height="30" HorizontalAlignment="Left" Margin="78,31,0,0" Name="textBlock1"

        Text="Home Page" VerticalAlignment="Top" FontFamily="Times New Roman" FontSize="22"

        Background="#FFFFCD00" Width="112" />



    <Image Height="80" HorizontalAlignment="Left" Margin="12,12,0,0" Name="image1" Stretch="Fill"

    VerticalAlignment="Top" Width="654" Source="/UserControlNavigation;component/Images/images.jpg" />

    <Image Height="83" HorizontalAlignment="Left" Margin="111,404,0,0" Name="image2" Stretch="Fill"

    VerticalAlignment="Top" Width="420" Source="/UserControlNavigation;component/Images/imagesCAKWLCYT.jpg" />

    <Menu Height="33" HorizontalAlignment="Left" Margin="76,110,0,0" Name="menu1"

    VerticalAlignment="Top" Width="343" FontFamily="Times New Roman" FontSize="20" Background="#FF00F500">

      <MenuItem Header="Home" Click="MenuItem_Click_1" />

      <MenuItem Header="AboutUs" Click="MenuItem_Click" />

      <MenuItem Header="Partners" Click="MenuItem_Click_3" />

      <MenuItem FontFamily="Times New Roman" FontSize="20" Header="Contact Us" Click="MenuItem_Click_4" />




Content which is present outside of UserControl is Master Page Content we can navigate it to any pages. In this example I have taken One Menu Bar and two images as masterpage content. Inside User control we have to take one grid which will replace with usercontrol during navigation.

Below picture shows the design part of Main Window.

design part of Main Window

This is home page and we have one user control for it. Now For Each Menu Item Add one User Control as shown Below.

Solutionexplorer-> add -> usercontrol.

Double click on each item which is present in Menu Bar and we will get menuitem click events as shown below in mainwindow.cs file as shown Below.

Code Bihind

private void MenuItem_Click(object sender, RoutedEventArgs e) //For About Us User Control




private void MenuItem_Click_3object sender, RoutedEventArgs e)//For partners User Control




private void MenuItem_Click_4(object sender,RoutedEventArgs e)/For ContactUs User Control



private void MenuItem_Click_5(object sender,RoutedEventArgs e)/For Home Page UserControl



Now we just want to replace the grid which is present inside Home Page Usercontrol with required usercontrols as shown below.

namespace UserControlNavigation


    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window


        public MainWindow()




        private void MenuItem_Click(object sender, RoutedEventArgs e)// For About Us UserControl


            AboutUs aboutus = new AboutUs();





        private void MenuItem_Click_3(object sender, RoutedEventArgs e)//For Partners User Control


            Partners partners = new Partners();




        private void MenuItem_Click_4(object sender, RoutedEventArgs e)//For Contact Us User Control



            ContactUs contactus = new ContactUs();




        private void MenuItem_Click_1(object sender, RoutedEventArgs e)//For HomePage UserControl


            MainWindow main = new MainWindow();






Run the program and we can observe navigation property of user control.

navigation property

navigation property of user control

Navigation in WPF

Here we can observe that only the content inside usercontrol is changing and master page content is not changing.

Up Next
    Ebook Download
    View all
    View all