Change user control appearance based on state

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 开发者_JAVA技巧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!!

---

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.

---

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"