Binding UserControl Model View on MainWindow with MVVM
I am new to WPF and MVVM and I am trying to find out how WPF works with MVVM. For this I made a sample as follows
UserControl1.xaml
<StackPanel>
<TextBox Text="{Binding MyString}" />
</StackPanel>
UserControl1ViewModel.cs
class UserControl1ViewModel
{
public string MyString { get; set; }
}
MainWindow.xaml
<StackPanel>
<local:UserControl1 DataContext="{Binding UC1Property}"/> //tried binding the Usercontrol1VM obj on MainWindowVM
<Button Command="{Binding ShowMeOne}" Height="30" Content="ShowOne"/>
<Button Command="{Binding ShowMeAnother}" Height="30" Content="ShowAnother" />
</StackPanel>
MainWindow.xaml.cs
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainWindowViewModel();
}
MainWindowViewModel.cs
class MainWindowViewModel
{
public MainWindowViewModel()
{
ShowMeOne = new RelayCommand(Prompt_ShowMeOne);
ShowMeAnother = new RelayCommand(Prompt_ShowMeAnother);
UC1Property.MyString = "Initial";
}
private void Prompt_ShowMeAnother(object obj)
{
global::System.Windows.MessageBox.Show("Another Should be shown");
UC1Property.MyString = "Last Clicked: Another";
}
private void Prompt_ShowMeOne(object obj)
{
global::System.Windows.MessageBox.Show("One Should be shown");
UC1Property.MyString = "Last Clicked: One";
}
public ICommand ShowMeOne { get; set; }
public ICommand ShowMeAnother { get; set; }
//UserControl1 View Model for MainWindow
public UserControl1ViewModel UC1Property { get; set; }
}
Problem: Now, how can I pass the Datacontext Usercontrol to the MainWindow?
-----------------------------In MainWindow.xaml----------------------
<local:UserControl1 DataContext="{Binding UC1Property}"/> //tried binding the Usercontrol1VM obj on MainWindowVM
-----------------------------In MainWindowViewModel.cs---------------
//UserControl1 View Model for MainWindow
public UserControl1ViewModel UC1Property { get; set; }
The above code I tried does not work as expected. What is the standard way to give datacontext user control over a window?
source to share
You are having a common misunderstanding about MVVM, Views and UserControls.
A UserControl
is a reusable piece of code that is not specific to one type of application. It is not UserControl1ViewModel
when you create a new one UserControl
.
A UserControl
is self-sustaining and all the logic your user control needs is inside the code. To be clear, this is not a violation of the MVVM pattern. The MVVM pattern applies to Views and ViewModels and how they interact.
There is a subtle difference between View
(pure XAML, no logic). Views are also often inherited from UserControl
, but are View
only good for the application you are developing right now. You can hardly reuse this in another application.
This is the difference between UserControl
. For example, a custom calendar control is reusable, and all the logic for selecting and displaying a calendar is part of its control code, and you can use it in many applications.
When you create UserControl
that uses data binding, you need to identify a dependency property in the user control, at the date of the selection by the user management it may be MinDate
, MaxDate
, SelectedDate
, FirstDayOfTheWeek
(Sunday or Monday) and / or properties that control the format and hide all other properties within your UserControl
XAML (without exposing them to dependency properties).
source to share