How to update multiple instances of user control using MVVM databinding WPF? - wpf

Question

I have created a UserControl with a ProgressBar and a Label.
<Label Content="{Binding ElementName=UserControl, Path=StatusProperty}" Grid.Row="1" Height="28" HorizontalAlignment="Left" Margin="76,0,0,32" Name="lblStatus" VerticalAlignment="Bottom" Grid.RowSpan="2" />
<ProgressBar Grid.Row="2" Height="20" HorizontalAlignment="Left" Margin="12,3,0,0" Name="pbCheckProgress" Style="{DynamicResource ProgressBarStyle}" Maximum="{Binding ElementName=UserControl, Path=MaximumProperty}" Minimum="{Binding ElementName=UserControl, Path=MinimumProperty}" Value="{Binding ElementName=UserControl, Path=ValueProperty}" VerticalAlignment="Top" Width="156" />
Then I have created the following DependencyProperties:
// Dependency Properties for labels
public static readonly DependencyProperty StatusProperty = DependencyProperty.Register("Status", typeof(string), typeof(UserControl1), new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
// Dependency Properties for progress bar properties
public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register("Minimum", typeof(double), typeof(UserControl1), new FrameworkPropertyMetadata(0.0d, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
public static readonly DependencyProperty MaximumProperty = DependencyProperty.Register("Maximum", typeof(double), typeof(UserControl1), new FrameworkPropertyMetadata(0.0d, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(double), typeof(UserControl1), new FrameworkPropertyMetadata(0.0d, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
Now I would like to create multiple instances of this UserControl in the same page and update the ProgressBar from code behind using MVVM. But I could not figure this out. Do I need to have a ViewModel for the UserControl so that every instance will have its own copy of ViewModel.
Is there a way to update all the instances from the page ViewModel?
Thanks & Regards,
Bharat

Answer 1

If I understand what you correctly, it sounds like you want to create a ViewModel for this UserControl and then have multiple instances of that ViewModel (one for each instance of the UserControl on the View). If you had a single ViewModel with multiple UserControls bound to it, they would all show exactly the same thing.
It sounds like you already have a ViewModel for the Page, so you can simply add the ViewModel for the UserControl as a property of the Page ViewModel, like this:
public class PageViewModel : INotifyPropertyChanged
{
private UCViewModel _ucViewModel;
//Other ViewModel Code
public UCViewModel UserControlViewModel
{
get { return _ucViewModel; }
}
}
Where UCViewModel is the ViewModel for your UserControl. Then, in your XAML, you simply bind to the properties on the UCViewModel, like this:
<local:myControl Status="{Binding UserControlViewModel.Status}"... />
If you have a collection of UCViewModels, you'd need to handle it a little differently, but the concept is still the same.