Rookie questions on WPF MVVM and user controls - wpf

Question

I am beginning WPF, and I am having a bit of a hard time implementing data binding.
Specifically, I have created a simple user control which holds a Label and a Button.
For this user control, I have created a ViewModel which holds just two properties, string "Text" and SimpleEnum "Status".
The point of the control is to display a status of something, like "Connected" yes/no, etc. The background color of the button indicates the status.
My XAML looks something like this
<Control.DataContext>
<vm:OnOffStatusViewModel />
</Control.DataContext>
<Label x:Name="label1" Height="Auto" HorizontalAlignment="Left" Content="{Binding Text}" Width="280" />
<Button Style="{StaticResource GlassButton}" Height="14" Width="14" Background="{Binding Status}" Grid.Column="1" />
with xmlns:vm="clr-namespace:Controls"
The code-behind has a property ViewModel exposing the view model, implementing INotifyPropertyChanged, and initializes as _viewModel = (OnOffStatusViewModel) DataContext;
Now, in my view that is using this control, I have managed to set the Text to something, as I in my implementing view code-behind have onOffStatus1.ViewModel.Text = ..., however, the status is set by enum, and is as such not really bindable to the background property of the button.
My questions related to this:
Is the way I have done the control correct? If not, what is the proper way of implementing data binding in user controls?
How can I have my enum status update the background property of the button using binding?

Answer 1

How can I have my enum status update the background property of the button using binding?
It's recommended to use a value converter for this task, returning a brush for every possible value of the enumeration. This way, your view model does not need to know anything about colors or brushes, and you can use the converter wherever you would like to visualize the status.
XAML
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1">
<UserControl.Resources>
<local:StatusColorConverter x:Key="StatusColorConverter" />
</UserControl.Resources>
<Button Background="{Binding Status, Converter={StaticResource StatusColorConverter}" />
</UserControl>
Converter
public enum Status
{
Connected
}
public class StatusColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
switch ((Status)value)
{
case Status.Connected: return new SolidColorBrush(Colors.Green);
}
return new SolidColorBrush(Colors.Black);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Is the way I have done the control correct? If not, what is the proper
way of implementing data binding in user controls?
Your implementation seems fine to me. You might want to eliminate the coupling between the view model and the view (which currently holds a reference to the view model) via dependency injection. But this depends on your use-cases and the architecture you want to use.

Answer 2

I would take a slightly different approach than the other answers here, I like to put the code and logic into my view models directly, so here's how I would do it:
<Control.DataContext>
<vm:OnOffStatusViewModel />
</Control.DataContext>
<Label x:Name="label1" Height="Auto" HorizontalAlignment="Left" Content="{Binding Text}" Width="280" />
<Button Style="{StaticResource GlassButton}" Height="14" Width="14" Background="{Binding ButtonBg}" Grid.Column="1" />
In the VM:
public MyStatus Status
{
get { return _status; }
set
{
_status = value;
OnPropertyChanged("Status");
ButtonBg = Colors.Red;
}
}
public Color ButtonBg
{
get { ... }
set { ... }
}
Since your button background is bound to a property on your view model, then you have the freedom to change that in reaction to whatever is going on in your view model without needing to move logic or code out to converters and templates.

Answer 3

Personally, I have NOT been able to use custom UserControls with MVVM. Either my mind hasn't wrapped around how to use them together or they just don't mix. I use DataTemplates for everything that's not a Window.
Keeping it concise...
OnOffStatusVM : INPC
string Status
Color Color (or Brush)
(set Color when enum value updates)
(OnOffStatus DataTemplate)
<DataTemplate DataType="{x:Type ViewModel:OnOffStatusVM}" x:Shared="False" x:Key="rezOnOffStatus">
<Grid>
<Label Height="Auto" HorizontalAlignment="Left" Content="{Binding Status}" Width="280" />
<Button Style="{StaticResource GlassButton}" Height="14" Width="14" Background="{Binding Color}" Grid.Column="1" />
</Grid>
</DataTemplate>
Usage if DataContext derives from OnOffStatusVM
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource rezOnOffStatus}" />
Usage if DataContext has a OnOffStatusVM OnOffStatus property
<ContentPresenter Content="{Binding OnOffStatus}" ContentTemplate="{StaticResource rezOnOffStatus}" />
Clarification provided if needed..