Accessing UserControls in a ViewModel - wpf

Question

The View : I have UserControl, which has a TextBox and a Label. When the "Enter" key is down, I want the Label to be updated with the value form the text box. For the sake of this example, I created a CarUserControl. I will be hosting a list of these in an ItemsControl in the MainWindow.
The Model : I have class Car, which will be the model.
The ViewModel : I do not have a ViewModel for the CarUserControl and the Car. I have one for the MainWindow instead - lets call this the MainViewModel.
I can get the commands propogated from the individual usercontrols to the MainViewModel, but I'm unsure about getting the values from the textboxes in the MainViewModel?
Here are some of the assumptions I'm making from what I`ve read online about MVVM (there are ofcourse some sources which say the assumptions are wrong).
1] Usercontrols should not have a ViewModel.
2] Usercontrols should only expose dependency properties, and not public properties with INotifyChanged or events.
So, the question is, how do I update the label, and access the TextBox value in the MainViewModel.
Here is the test code :
-----CarUserControl.xaml----
<UserControl x:Class="TestMVVM.CarUserControl"
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"
xmlns:local="clr-namespace:TestMVVM"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="300" x:Name="thisUC">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">--</Label>
<TextBox Grid.Column="1" Background="#FFE8D3D3" BorderThickness="0">
<TextBox.InputBindings>
<KeyBinding Key="Enter"
Command="{Binding KeyDownCommand, ElementName=thisUC}"
CommandParameter="{Binding}"/>
</TextBox.InputBindings>
</TextBox>
</Grid>
</UserControl>
-----CarUserControl.cs-----
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace TestMVVM
{
/// <summary>
/// Interaction logic for CarUserControl.xaml
/// The Usercontrol
/// </summary>
public partial class CarUserControl : UserControl
{
private static readonly DependencyProperty StrValueProperty = DependencyProperty.Register("StrValue", typeof(float), typeof(CarUserControl), new PropertyMetadata(null));
private static readonly DependencyProperty KeyDownCommandProperty = DependencyProperty.Register("KeyDownCommand", typeof(ICommand), typeof(CarUserControl), new PropertyMetadata(null)); //Enter key down in the text box
public CarUserControl()
{
InitializeComponent();
}
public string StrValue
{
get { return (string)GetValue(StrValueProperty); }
set { SetValue(StrValueProperty, value); }
}
/// <summary>
/// "Enter" key down
/// </summary>
public ICommand KeyDownCommand
{
get { return (ICommand)GetValue(KeyDownCommandProperty); }
set { SetValue(KeyDownCommandProperty, value); }
}
}
}
//---The Model--Car.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace TestMVVM
{
/// <summary>
/// A simple model
/// </summary>
class Car : INotifyPropertyChanged
{
public Car(string name) {
this.name = name;
}
private string name;
public event PropertyChangedEventHandler PropertyChanged;
public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged("Name");
}
}
public void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
}
-----Main View Model---
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
namespace TestMVVM
{
/// <summary>
/// The Main View Model
/// </summary>
class MainViewModel : INotifyPropertyChanged
{
/// <summary>
/// The main view model
/// </summary>
public MainViewModel()
{
//Create some test data
cars = new ObservableCollection<Car>();
cars.Add(new Car("Audi"));
cars.Add(new Car("Toyota"));
cars.Add(new Car("Subaru"));
cars.Add(new Car("Volvo"));
}
public event PropertyChangedEventHandler PropertyChanged;
private ObservableCollection<Car> cars; //List of tensioner spools
private ICommand enterDownCommand;
public ObservableCollection<Car> Cars
{
get { return cars; }
set
{
cars = value;
OnPropertyChanged("Cars");
}
}
public ICommand EnterDownCommand
{
get
{
if (enterDownCommand == null)
{
enterDownCommand = new RelayMCommand<Car>(OnEnterDownCommand);
}
return enterDownCommand;
}
}
/// <summary>
/// Called when "Enter" key is down.
/// </summary>
/// <param name="obj"></param>
private void OnEnterDownCommand(Car obj)
{
//How do I get the text box value here?
Console.Write(">>"+obj.Name);
}
public void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
}
-----MainWindow---
<Window x:Class="TestMVVM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestMVVM"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MainViewModel x:Name ="MainVM"/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Viewbox>
<ItemsControl ItemsSource="{Binding Cars}" Margin="5" Width="200">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:CarUserControl Margin="5"
KeyDownCommand="{Binding Path=DataContext.EnterDownCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Viewbox>
</Grid>
</Grid>
</Window>
---Relay Command---
using System;
using System.Threading;
using System.Windows.Input;
namespace TestMVVM
{
/// <summary>
/// Same as the Relay Command, except this handles an array of generic type <T>
/// </summary>
/// <typeparam name="T">Generic type parameter</typeparam>
public class RelayMCommand<T> : ICommand
{
private Predicate<T> _canExecute;
private Action<T> _execute;
public RelayMCommand(Action<T> execute, Predicate<T> canExecute = null)
{
_execute = execute;
_canExecute = canExecute;
}
private void Execute(T parameter)
{
_execute(parameter);
}
private bool CanExecute(T parameter)
{
return _canExecute == null ? true : _canExecute(parameter);
}
public bool CanExecute(object parameter)
{
return parameter == null ? false : CanExecute((T)parameter);
}
public void Execute(object parameter)
{
_execute((T)parameter);
}
public event EventHandler CanExecuteChanged;
public void RaiseCanExecuteChanged()
{
var temp = Volatile.Read(ref CanExecuteChanged);
if (temp != null)
{
temp(this, new EventArgs());
}
}
}
}

Answer 1

A UserControl may inherit its DataContext from a parent window or the current item in an ItemsControl.
So if you bind your ItemsControl to an IEnumerable<Car>, each instance of the CarUserControl can bind directly to the Name property of the corresponding Car object:
<TextBox Text="{Binding Name}"
Grid.Column="1" Background="#FFE8D3D3" BorderThickness="0">
<TextBox.InputBindings>
<KeyBinding Key="Enter"
Command="{Binding KeyDownCommand, ElementName=thisUC}"
CommandParameter="{Binding}"/>
</TextBox.InputBindings>
</TextBox>
This is because the UserControl automatically inherits the DataContext from its parent element which is the corresponding Car object in the ItemsControl in this case.