Navigation Application using User Control in WPF

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

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

</Menu>

</Grid>

</Window>

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.



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()

{

InitializeComponent();

}

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

{

AboutUs aboutus = new AboutUs();

grid2.Children.Clear();

grid2.Children.Add(aboutus);

}

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

{

Partners partners = new Partners();

grid2.Children.Clear();

grid2.Children.Add(partners);

}

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

{

ContactUs contactus = new ContactUs();

grid2.Children.Clear();

grid2.Children.Add(contactus);

}

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

{

MainWindow main = new MainWindow();

main.Show();

this.Close();

}

}

}

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

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