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"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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"
/>
</Grid>
</UserControl>
<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"
/>
</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.
![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.
![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.