Call User Controls In Main Window Using WPF

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:
  1. <Grid>  
  2.        <Grid.RowDefinitions>  
  3.            <RowDefinition Height="*"/>  
  4.            <RowDefinition Height="5*"/>  
  5.        </Grid.RowDefinitions>  
  6.        <Border Grid.Row="0" BorderThickness="1" BorderBrush="Aqua">  
  7.            <Grid>  
  8.                <Grid.ColumnDefinitions>  
  9.                    <ColumnDefinition Width="*"/>  
  10.                    <ColumnDefinition Width="*"/>  
  11.                </Grid.ColumnDefinitions>  
  12.                <Button Grid.Column="0" Background="AliceBlue" Name="BtnUser1" Click="BtnUser1_Click">Add UserControl 1</Button>  
  13.                <Button Grid.Column="1" Background="AliceBlue" Name="BtnUser2" Click="BtnUser2_Click">Add UserControl 2</Button>  
  14.            </Grid>  
  15.        </Border>  
  16.        <ScrollViewer Grid.Row="1">  
  17.            <TabControl x:Name="MainTab" Background="Beige">  
  18.                  
  19.            </TabControl>  
  20.        </ScrollViewer>  
  21.    </Grid> 
 After Implementing this and running it will look like the below image:

 

Step 2: 
(Creating a User Controls)
 
 As per the above image we will be creating 2 user controls and add then on button click
 
User Control 1: XAML Design
  1. <Grid>  
  2.        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" FontWeight="Bold" 
  3.                   Foreground="Chocolate">I am in UserControl-1</TextBlock>    
  4.    </Grid> 
User Control 2: XAML Design
 
This contains a button to add another UserControl
  1. <Grid>  
  2.        <Grid.RowDefinitions>  
  3.            <RowDefinition Height="*"/>  
  4.            <RowDefinition Height="5*"/>  
  5.        </Grid.RowDefinitions>  
  6.        <Button Grid.Row="0" Background="AliceBlue" Name="BtnSubUser1" Click="BtnSubUser1_Click">Add Sub User Control 1</Button>  
  7.        <TabControl Grid.Row="1" Name="SubPage">  
  8.              
  9.        </TabControl>  
  10.    </Grid> 
User Control 3: XAML Design
  1. <Grid>  
  2.         <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" FontWeight="Bold" 
  3.             Foreground="Chocolate">Hello C-Sharp Conner User <LineBreak/>  
  4.             I am in Sub User Control-1</TextBlock>  
  5.     </Grid>   
Step 3: Code to User Controls
 
The below code has to be added in MainWindow.cs as this window have 2 buttons to show User control-1 and User Control-2. ollow the commented lines or better understanding.
  1. TabItem _tabUserPage;     
  2. private void BtnUser1_Click(object sender, RoutedEventArgs e)    
  3. {    
  4.     MainTab.Items.Clear(); //Clear previous Items in the user controls which is my tabItems    
  5.     var userControls = new MainUserControl1();     
  6.     _tabUserPage = new TabItem { Content = userControls };    
  7.     MainTab.Items.Add(_tabUserPage); // Add User Controls    
  8.     MainTab.Items.Refresh();    
  9. }    
  10. private void BtnUser2_Click(object sender, RoutedEventArgs e)    
  11. {    
  12.     MainTab.Items.Clear(); //Clear previous Items in the user controls which is my tabItems    
  13.     var userControls = new MainUserControl2();    
  14.     _tabUserPage = new TabItem { Content = userControls };    
  15.     MainTab.Items.Add(_tabUserPage); // Add User Controls    
  16.     MainTab.Items.Refresh();    
  17. }   
The below code will be added in the UserControl2.cs page to show sub User control.
  1. TabItem _tabUserPage;    
  2. private void BtnSubUser1_Click(object sender, RoutedEventArgs e)    
  3. {    
  4.     SubPage.Items.Clear();    
  5.     var userControls = new Sub_UserControl1();    
  6.     _tabUserPage = new TabItem { Content = userControls };    
  7.     SubPage.Items.Add(_tabUserPage);    
  8.     SubPage.Items.Refresh();    
  9. }   
Note: You can find the attached sample solution for the reference.

Up Next
    Ebook Download
    View all
    Learn
    View all