Change user control appearance based on state - wpf

Question

I have a user control that consists of four overlapping items: 2 rectangles, an ellipse and a lable
<UserControl x:Class="UserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="50.1" Height="45.424" Background="Transparent" FontSize="24">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3.303*" />
<RowDefinition Height="40*" />
<RowDefinition Height="2.121*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5.344*" />
<ColumnDefinition Width="40.075*" />
<ColumnDefinition Width="4.663*" />
</Grid.ColumnDefinitions>
<Rectangle Name="Rectangle1" RadiusX="5" RadiusY="5" Fill="DarkGray" Grid.ColumnSpan="3" Grid.RowSpan="3" />
<Ellipse Name="ellipse1" Fill="{Binding State}" Margin="0.016,0.001,4.663,0" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Stroke="Black" IsEnabled="True" Panel.ZIndex="2" />
<Label Name="lblNumber" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" FontWeight="Bold" FontSize="24" Grid.Column="1" Grid.Row="1" Padding="0" Panel.ZIndex="3">9</Label>
<Rectangle Grid.Column="1" Grid.Row="1" Margin="0.091,0,4.663,0" Fill="Blue" Name="rectangle2" Stroke="Black" Grid.ColumnSpan="2" Panel.ZIndex="1" />
</Grid>
Here is my business object that I want to control the state of my user control:
Imports System.Data
Imports System.ComponentModel
Public Class BusinessObject
Implements INotifyPropertyChanged
Public logger As log4net.ILog
Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Private _state As States
Public Enum States
State1
State2
State3
End Enum
Public Property State() As States
Get
Return _state
End Get
Set(ByVal value As States)
If (value <> _state) Then
_state = value
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("State"))
End If
End Set
End Property
Protected Sub OnPropertyChanged(ByVal name As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(name))
End Sub
I want to be able to change the state of a business object in the code behind and have that change the colors of multiple shapes in my usercontrol. I'm not sure about how to do the binding. I set the datacontext of the user control in the code behind but not sure if that's right. I'm new to WPF and programming in general and I'm stuck on where to go from here. Any recommendations would be greatly appreciated!!

Answer 1

A simple way would be to use a value converter. Basically this is a class that allows you to bind on a value in your BusinessObject, and depending on what the value is, you return a different brush.
Here is an example showing you exactly how to do it.
[ValueConversion(typeof(States), typeof(Brush))]
public class ColorConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
/* return a different brush depending on the state */
}
}
Then you bind it like this:
<Ellipse Fill="{Binding State, Converter={StaticResource colorConverter} />
Look at the link I provided above to see the full example.
The advantage of this way over Rachel's answer is that it is a generic implementation, so you don't have to create a template for each of your shapes if you want to have this apply to different objects (rectangle, ellipse, etc...). But Rachel's answer - i.e. using a template, is nice too, because it doesn't require any code.

Answer 2

You would create a trigger based on State property, and if it is equal to StateX you would change the color. For example:
<Rectangle>
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Style.Triggers>
<DataTrigger Binding="{Binding State} "
Value="{x:Static localNamespace:States.State1}">
<Setter Property="Fill" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
The localNamespace you'd have to define yourself in the <UserControl> tag. Something like <UserControl xmlns:localNamespace="clr-namespace:MyNamespace.MyClassWithStateEnum;assembly=MyNamespace"