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:

<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">

           </TabControl>
       </ScrollViewer>
   </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

<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">

       </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 have 2 buttons to show User control-1 and User Control-2. ollow 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 in 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.