CODEWITHSUNDEEP
c#wpfimagexamlmvvm
Mare Infinitus
Mare Infinitus

Reputation: 8192

Show alternating images for changing ViewModel states

For different user interfaces I want to show an image depending on a state of a ViewModel object.

For example:

I have a database connection, if connected, I want to show a green database image, if not connected I want to display a red database image.

In the ViewModel there is a bool that represents the state.

Possibilities are:

This state depending image can be more often of use, e.g. in a TreeView as ItemImage.

Is there a more clever way to accomplish that?

Upvotes: 0

Views: 614

Answers (3)

Jason Massey
Jason Massey

Reputation: 1088

You can also do it with solely with data triggers. Here's a sample from one of my projects for a button that changes it's image depending on whether or not the form is in an Edit mode or not:

<Button x:Name="EditOrSaveJob"
                    Width="32"
                    Height="32"
                    Margin="10,0,0,0"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch">
                <Image>
                    <Image.Style>
                        <Style TargetType="Image">
                            <Setter Property="Source" Value="/AAAA;component/Resources/Images/edit.png" />
                            <Setter Property="ToolTip" Value="Edit Order" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsEditing}" Value="True">
                                    <Setter Property="Source" Value="/AAAA;component/Resources/Images/32_save.png" />
                                    <Setter Property="ToolTip" Value="Save Order" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
</Button>

Upvotes: 3

Yaur
Yaur

Reputation: 7452

I use a valueconverter like so:

public class BoolToImageConverter: DependencyObject, IValueConverter
{

    public BitmapImage TrueImage
    {
        get { return (BitmapImage)GetValue(TrueImageProperty); }
        set { SetValue(TrueImageProperty, value); }
    }
    public static DependencyProperty TrueImageProperty = DependencyProperty.Register("TrueImage", typeof(BitmapImage), typeof(BoolToImageConverter), null);


    public BitmapImage FalseImage
    {
        get { return (BitmapImage)GetValue(FalseImageProperty); }
        set { SetValue(FalseImageProperty, value); }
    }
    public static DependencyProperty FalseImageProperty = DependencyProperty.Register("FalseImage", typeof(BitmapImage), typeof(BoolToImageConverter), null);

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (bool)value ? TrueImage : FalseImage;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var img = (BitmapImage)value;
        return img.UriSource.AbsoluteUri == TrueImage.UriSource.AbsoluteUri;
    }

}

and in XAML

<my:BoolToImageConverter x:Key="converterName" FalseImage="{StaticResource falseImage}" TrueImage="{StaticResource trueImage}"/>

Upvotes: 1

Jakub Jarzabek
Jakub Jarzabek

Reputation: 189

The solution would be using converter (class that implements IValueConverter):

class ImageStateConverter : IValueConverter
{
    public Object Convert(  Object value, Type targetType, Object parameter,    CultureInfo culture)    
    {
        bool state = (bool) value;
        return state ? "img1.png" : "img2.png";
    }
}

Then in your XAML write binding like this:

<Image Source="{Binding Path=State, Converter={StaticResource myConverter}}" />

Object myConverter is declared somewhere in Resources section.

Upvotes: 1

Related Questions