Question

I am creating a User Interface in WPF and I need to have an image control in the View that changes to a specific image depending on the value returned from the ViewModel. For my particular case is just a traffic light so it can be red, yellow or green and depending on this value the corresponding image must be loaded.

so in the View I have the next image control…

<Image Source="{Binding Path=ServerStatus, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" HorizontalAlignment="Left" Width="41" Height="34"/>

The ViewModel on the other hand has this code…

    //...

     // The status of the server represented as a traffic light
    public enum m_Enumeration_ServerStatus { Red, Yellow, Green };

    private m_Enumeration_ServerStatus p_ServerStatus;

    //...

    /// <summary>
    /// The status of the server represented as a traffic light
    /// Red: stopped
    /// yellow: starting
    /// Green: Started
    /// </summary>
    public m_Enumeration_ServerStatus ServerStatus
    {
        get { return p_ServerStatus; }

        set
        {
            base.RaisePropertyChangingEvent("ServerStatus");
            p_ServerStatus = value;
            base.RaisePropertyChangedEvent("ServerStatus");
        }
    }

So the View will be “informed” of the PropertyChange.

What code do I need to add in order to load the corresponding image for the setted property value?

Answer 1

what about a datatemplate for you enum types? in your datatemplate you can set your right image.

<DataTemplate DataType="{x:Type local:m_Enumeration_ServerStatus}">
<TextBlock x:Name="valueText"/>
<DataTemplate.Triggers>
    <DataTrigger Binding="{Binding}" Value="{x:Static local:m_Enumeration_ServerStatus.Red}">
        <Setter TargetName="valueText" Property="Text" Value="First Value" />
    </DataTrigger>
</DataTemplate.Triggers>
<DataTemplate.Triggers>
    <DataTrigger Binding="{Binding}" Value="{x:Static local:m_Enumeration_ServerStatus.Red}}">
        <Setter TargetName="valueText" Property="Text" Value="Second Value" />
    </DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

instead of textblock you have to set your image of course