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.

4 Comments

Join the conversation! Your thoughts help the community grow.

Keyur Gamit8y ago
Can you explain how to change usercontrol dynamically ? i mean i have 3 usercontrol and i want to show single at a time.and if the condition change. i want to replace it by another Usercontrol.
Himani Sharma8y ago
Where to call Bind Properties method of mainviewmodel
Rohit Nair8y ago
Hello,Will you please help me out in creation of ribbon groups dynamically using mvvm approach
Jasbeer Singh9y ago
Good Blog Neha, Easy to understand