Introduction
This article demonstrates how to bind a WPF UserControl with MainWindow and also call a UserControl inside another UserControl.
Description
An application consists of many forms. Creating a MainWindow for every form is not an ideal solution, we can achieve the same thing with a MainWindow along with many UserControls and call UserControl inside MainWindow. We can also call a UserControl inside another UserControl.
Steps
Before moving forward you should have minimum knowledge of xaml design. In this example, I will be creating one MainWindow and 3 user controls and adding those user controls depending on requirements.
Step 1. Creating a Main Window
The MainWindow xaml code is as follows.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="1" BorderBrush="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Background="AliceBlue" Name="BtnUser1" Click="BtnUser1_Click">Add UserControl 1</Button>
<Button Grid.Column="1" Background="AliceBlue" Name="BtnUser2" Click="BtnUser2_Click">Add UserControl 2</Button>
</Grid>
</Border>
<ScrollViewer Grid.Row="1">
<TabControl x:Name="MainTab" Background="Beige">
<!-- Content of TabControl goes here -->
</TabControl>
</ScrollViewer>
</Grid>
After Implementing this and running it will look like the below image.
![Implementing]()
Step 2. (Creating a User Controls)
As per the above image, we will be creating 2 user controls and add them on button click.
User Control 1: XAML Design
<Grid>
<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="14"
FontWeight="Bold"
Foreground="Chocolate">
I am in UserControl-1
</TextBlock>
</Grid>
User Control 2: XAML Design
This contains a button to add another UserControl.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Background="AliceBlue" Name="BtnSubUser1" Click="BtnSubUser1_Click">Add Sub User Control 1</Button>
<TabControl Grid.Row="1" Name="SubPage">
<!-- Content of TabControl goes here -->
</TabControl>
</Grid>
User Control 3: XAML Design
<Grid>
<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="14"
FontWeight="Bold"
Foreground="Chocolate">
Hello C-Sharp Conner User
<LineBreak/>
I am in Sub User Control-1
</TextBlock>
</Grid>
Step 3. Code to User Controls
The below code has to be added in MainWindow.cs as this window has 2 buttons to show User control-1 and User Control-2. allow the commented lines or better understanding.
TabItem _tabUserPage;
private void BtnUser1_Click(object sender, RoutedEventArgs e)
{
MainTab.Items.Clear(); // Clear previous Items in the user controls which is my tabItems
var userControls = new MainUserControl1();
_tabUserPage = new TabItem { Content = userControls };
MainTab.Items.Add(_tabUserPage); // Add User Controls
MainTab.Items.Refresh();
}
private void BtnUser2_Click(object sender, RoutedEventArgs e)
{
MainTab.Items.Clear(); // Clear previous Items in the user controls which is my tabItems
var userControls = new MainUserControl2();
_tabUserPage = new TabItem { Content = userControls };
MainTab.Items.Add(_tabUserPage); // Add User Controls
MainTab.Items.Refresh();
}
The below code will be added to the UserControl2.cs page to show sub-user control.
TabItem _tabUserPage;
private void BtnSubUser1_Click(object sender, RoutedEventArgs e)
{
SubPage.Items.Clear();
var userControls = new Sub_UserControl1();
_tabUserPage = new TabItem { Content = userControls };
SubPage.Items.Add(_tabUserPage);
SubPage.Items.Refresh();
}
Note. You can find the attached sample solution for the reference.