How to use the viewmodel, model, command classes with Data Binding in the Window.Resources tags?

Question

If WPF MVVM is supposed to have no code behind, why does when you use the ICommand, do you need the DataContext property instantiated in the Window.xaml.cs code behind? I've watched and followed side by side YouTube WPF MVVM, data binding, ICommand, INotifyPropertyChanged videos and am confused.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new ViewModel.VM_CalcRblAmt();
    }
}

How to use the view model, model, command classes with data binding in the Window.Resource tag? If that is the correct mvvm pattern? Something like this below (but does not work)in the Window.Resource tag? I ask this because going side by side on WPF MVVM tutorials from different Authors, I do not see how to plug the view model, model, and Command classes into an xml namespace in the UI(Window in this case). For example below:

<Window...
         xmlns:nsviewmodel="clr-namespace:Wpf_MVVVM_Rbr.ViewModel" />
<Window.Resources>
<nsrbrvm:RbrCoreViewModel x:Key="objRbrTemp"
  <Button x:Name="btnRebalancer" 
     Command="{Binding CalcRbrAmtCommand}" 
     Content="Rebalance"/>
  <TextBox x:Name="txtAmtDaily" Text="{Binding model_Rblr_Temp.AmtDaily, UpdateSourceTrigger=PropertyChanged}" />
</Window.Resources>

The above code, again, is not actually between the Window.Resources tags currently. It is in the UI XAML code outside the Window.Resources tags. Which currently does work. But does not the MVVM pattern require it in Window.Resources or Page.Resources tags referencing an xmlns namespace and giving it an x:Key="someKeyName" and using data binding inside the Resources tags?

So if this is the right MVVM practice, how do I put Window.Resources data binding, view model, command, and model classes together using data binding?

Thanks in Advance! Sincerely, Me

"supposed to have no code behind" doesn't mean zero code behind; it means as little as possible. — Robert Harvey
Indeed. The goal is to avoid code-behind, but not remove it. At work, we avoid event handlers etc. in favor of attached properties and blend behaviors, but for almost every dialog we end up changing the constructor to pass in the ViewModel as the sole argument to the dialog. Not all code-behind is bad, but we do actively try to minimize it. — zastrowm
I concur that less is more with code-behind in WPF in a lot of cases but that doesn't mean completely eliminating it either. There's much more usefulness to markup but one of the relevant parts here is it greatly reduces the amount of code such as fields that'd be in the way of the logic you want to focus on. The Xaml files usage in WPF is very much like a header file in C++. — Hawkeye4040

StepUp StepUp · Accepted Answer · 2016-03-25T06:22:41

1. If WPF MVVM is supposed to have no code behind, why does when you use the ICommand, do you need the DataContext property instantiated in the Window.xaml.cs code behind? There are many approaches to set DataContext:

The first approach. In view:

<Window.DataContext>
   <local:MainWindowViewModel/>
</Window.DataContext>

The second approach. You should override OnStartUp() method of App.xaml.cs

public partial class App : Application
{
     protected override void OnStartup(StartupEventArgs e)
    {
            base.OnStartup(e);
            MainWindow app = new MainWindow();
            ProductViewModel context = new ProductViewModel();
            app.DataContext = context;
            app.Show();
     }
}

The third approach. In constructor of Windows:

public partial class MainWindow : Window
{
     public MainWindow()
     {
          InitializeComponent();
          DataContext=new MainWindowViewModel();
     }
}

The fourth approach. You can set DataContext through DependencyInjection by UnityContainer. But DependencyInjection, Prism and UnityContainer are other questions and goes from this scope of the question. Just for example:

protected override void RegisterTypes()
{ 
    unityContainer.RegisterType<object, ItemControl>("ModuleAUpper");
    unityContainer.RegisterType<IViewModelItemControl, ViewModelItemControl>();
    unityContainer.RegisterTypeForNavigation<ItemControl>();
}

2. How to use the view model, model, command classes with data binding in the Window.Resource tag? If that is the correct mvvm pattern? Something like this below (but does not work)in the Window.Resource tag?

Resources are just chance to store data. To set binding between property placed in viewModel and XAML, you should:

private string message="helloWorld";    

public string Message
{
    get { return message;}
    set { message = value;}
}

and XAML:

Binding Button in scope of MVVM:

<Button Command="{Binding ClickCommand}" Width="100" Height="100" Content="wefwfwef"/>

and ViewModel:

private ICommand _clickCommand;
public ICommand ClickCommand
{
   get
   {
     return _clickCommand ?? (_clickCommand = new CommandHandler(() => MyAction(), _canExecute));
   }
}
private bool _canExecute;

public class CommandHandler : ICommand
{
  private Action _action;
  private bool _canExecute;
  public CommandHandler(Action action, bool canExecute)
  {
      _action = action;
      _canExecute = canExecute;
  }

  public bool CanExecute(object parameter)
  {
     return _canExecute;
  }

  public event EventHandler CanExecuteChanged;

  public void Execute(object parameter)
  {
     _action();
  }
}

Update:

I recommend you to read the best MVVM tutorial by Rachel Lim which I've ever read.

How to use the viewmodel, model, command classes with Data Binding in the Window.Resources tags?

2 Answers