How to update multiple instances of user control using MVVM databinding 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.