Swapping images based on variable

Question

I have an application that is using XAML and C# (MVVM) to create a interface that allows you to start and stop a camera feed.

What I would like to do is to switch between a OFF and ON image depending on the variable IsOn.

I know how to set the image in the UI Manually,

<Image Source="/MyApp.WpfUI;component/Resources/Images/Webcasting.png" />

but I am not sure how to best change the image dynamically based on conditions. I have considered IF statements, but am not sure how to go about that.

Does anyone have any advice or ideas?

I am, I am using vs2010 pro, – Robert Dickey Jul 30 '13 at 14:41 — Robert Dickey, Jul 30 '13 at 14:41

score 2 · Accepted Answer · edited May 23 '17 at 11:56

One answer would be: Binding the IsEnabled attribute of your control that displays the stream to a property in your code that returns a boolean.
In your View:

<Image IsEnabled={Binding IsOn} Source="/MyApp.WpfUI;component/Resources/Images/Webcasting.png" />

In this property's getter, put your conditional statements to determine whether or not to return a true or false.
In your ViewModel:

public bool IsOn 
{
    get
    {
        if(<some condition>)
            return true;
        else
            return false;
    }
}

Notes:

Don't forget to use your implementation of INotifyPropertyChanged to alert the UI when necessary.
If you implement a setter, you could have a button on the View that would toggle the value giving you manual control.
Binding can be used to alter the Source of the stream as well using the same technique as above. I.e., the getter would return the path to the video stream or the path to a static image that says "Video Off". However, this is dependent on whether or not the control you're using can handle that. Instead of the IsEnabled attribute, you would use binding with the Source attribute.
Here a couple links that will show you some similar implementations of this:
- High Overview of WPF (MVVM) w/Binding
- Simple Binding Example

Good luck.

I do like this idea, but being very new at XAML I am not sure how to implement this. Could you provide an example of what the XML element would look like? — Robert Dickey, Jul 30 '13 at 15:03
There is a XAML example in my answer above - first code snippet. — Tyler Morrow, Jul 30 '13 at 15:05
`` is what I currently have, but it is bound to nothing. I do see the options for static and relative sources - but I fear I might be going in the wrong direction — Robert Dickey, Jul 30 '13 at 15:07
You should be setting the DataContext to a ViewModel in the code-behind of your View. Once you've done that, see my code example above (I have modified it). — Tyler Morrow, Jul 30 '13 at 15:08

score 1 · Answer 2 · answered Jul 30 '13 at 14:46

You have two options here. You can either perform this manually using an if statement as you mentioned in your question, or you can create a DataTrigger & assign it to your control's ControlTemplate.

DataTriggers allow you to set property values when the value of a particular data object matches certain conditions you specify in the XAML. I'd recomend reading the MSDN documentation on DataTriggers for some basic examples of how these work.

I am looking into it now. Thank you! – Robert Dickey Jul 30 '13 at 14:48 — Robert Dickey, Jul 30 '13 at 14:48

Swapping images based on variable

2 Answers2