Dynamically Render And Bind One User Control In Another User Control Using MVVM Pattern In WPF

In this blog, you will learn how to dynamically render and bind one User Control in another User Control using MVVM Pattern in WPF.

Let us have a scenario where we need to render any User Control in Main UserControl on the basis of items present in a list.

• Main UserControl  and MainViewModel
• Child UserControl and ChildViewModel.

XAML for ChildUserControl

<UserControl x:Class="DynaUserControlFromAnotherUsercontrolMVVM.ChildUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="100" d:DesignWidth="100">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Border x:Name="BlockService" Grid.Column="0"
            BorderThickness="0"
            BorderBrush="#406E7B"
            Padding="5"
            Height="auto" Cursor="Hand"
            Margin="0"
            CornerRadius="30">
            <Border x:Name="MainBlock" Grid.Column="0"
                BorderThickness="1"
                BorderBrush="Transparent"
                Padding="0"
                Margin="0"
                CornerRadius="30">

                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition Height="auto"></RowDefinition>
                    </Grid.RowDefinitions>

                    <Border Name="ImageControlBlock"
                        Visibility="Hidden"
                        Grid.RowSpan="3"   Grid.Column="0"
                        BorderBrush="Transparent"
                        Margin="0">
                        <Image Name="imageControl" Stretch="Fill"
                                   />
                    </Border>



                    <Border x:Name="BlockInside"
                        Grid.Column="0"
                        VerticalAlignment="Stretch"
                        BorderThickness="1"
                        Grid.Row="1"

                    BorderBrush="Transparent"   Margin="0" CornerRadius="30">
                        <StackPanel>
                            <Border Name="ServiceNameBlock" Grid.Column="0" VerticalAlignment="Top" BorderThickness="1" Grid.Row="1" Opacity=".5" Background="Black"
                    BorderBrush="Transparent"   Margin="10" CornerRadius="10" >
                                <TextBlock x:Name="LabelServiceName" Text="{Binding ServiceName}"  Foreground="White" HorizontalAlignment="Center" FontSize="19" Padding="0 5"></TextBlock>
                            </Border>

                        </StackPanel>
                    </Border>

                </Grid>
            </Border>
        </Border>
    </Grid>
</UserControl>

ChildViewModel: In the beggining, ChildViewModel should look like below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;

namespace DynaUserControlFromAnotherUsercontrolMVVM
{
   public class ChildViewModel
    {
       private string serviceName;


       public string ServiceName
       {
           get
           {
               return serviceName;
           }
           set
           {
               if (serviceName != value)
               {
                   serviceName = value;
                   RaisePropertyChanged("ServiceName");
               }
           }
       }

    }
}

Main UserControl should be as below.

<UserControl x:Class="DynaUserControlFromAnotherUsercontrolMVVM.MainUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>

    </Grid>
</UserControl>

Now, let's have a list of records in MainViewModel according to which we need to display the child User Control in main UserControl and pass the datacontext for child control. We need to use ChildViewModel as the property of our MainViewModel and then, bind the ChildUserControl directly from XAML.

MainViewModel

public class MainViewModel
   {

       private List<Service> serviceList;


       public string ServiceList
       {
           get
           {
               return serviceList;
           }
           set
           {
               if (serviceList != value)
               {
                   serviceList = value;
                   RaisePropertyChanged("ServiceList");
               }
           }
       }




   }

Now, let's render ChildUserControl  in MainUserControl.

<Grid>
       <ItemsControl Name="ControlCanvas"  ItemsSource="{Binding ServiceList}">
           <ItemsControl.ItemsPanel>
               <ItemsPanelTemplate>
                   <Canvas/>
               </ItemsPanelTemplate>
           </ItemsControl.ItemsPanel>
           <ItemsControl.ItemTemplate>
               <DataTemplate>
                   <local:ChildUserControl DataContext="{Binding chilViewModel}"/>
               </DataTemplate>
           </ItemsControl.ItemTemplate>
           <ItemsControl.ItemContainerStyle>
               <Style TargetType="ContentPresenter">
                   <Setter Property="Canvas.Height" Value="{Binding Anyproperty}"/>
                   <Setter Property="Canvas.Width" Value="{Binding Anyproperty}"/>
                   <Setter Property="Canvas.Left" Value="{Binding Anyproperty}"/>
                   <Setter Property="Canvas.Top" Value="{Binding Anyproperty}"/>
               </Style>
           </ItemsControl.ItemContainerStyle>

       </ItemsControl>
   </Grid>

Now, as you can see in above block that we used childViewModel property to bind the ChildUserControl, so how do we  get it in ViewModel? The MainViewModel should look like below.

public class MainViewModel
  {

      private List<Service> serviceList;


      public List<Service> ServiceList
      {
          get
          {
              return serviceList;
          }
          set
          {
              if (serviceList != value)
              {
                  serviceList = value;
                  RaisePropertyChanged("ServiceList");
              }
          }
      }

      public class Service
      {
          public string Anyproperty { get; set; }
          public string serviceName { get; set; }
          public ChildViewModel chilViewModel { get; set; }
      }

      public void BindProperties()
      {
          Service serviceControl = new Service();
          serviceControl.Anyproperty = "1";
          serviceControl.serviceName = "test";
          serviceControl.chilViewModel = new ChildViewModel(serviceControl);
          ServiceList.Add(serviceControl);
      }

  }

And the childViewModel will be changed to,

public class ChildViewModel
    {
       private string serviceName;
       private MainViewModel.Service serviceControl;

       public ChildViewModel(MainViewModel.Service serviceControl)
       {
           // TODO: Complete member initialization
           this.serviceControl = serviceControl;
           BindProperty();
       }


       public string ServiceName
       {
           get
           {
               return serviceName;
           }
           set
           {
               if (serviceName != value)
               {
                   serviceName = value;
                   RaisePropertyChanged("ServiceName");
               }
           }
       }

       public void BindProperty()
       {
           ServiceName = serviceControl.serviceName;

       }

    }

We do not need to do anything in ChildUserControl.cs page. And in mainUsercontrol.cs page, directly bind the datacontext using main ViewModel as below.

public partial class MainUserControl : UserControl
   {
       public MainUserControl()
       {
           InitializeComponent();
           this.DataContext = new MainViewModel();
       }
   }

Feel free to ask questions on MVVM.

Thank you.