image source in xaml depends on code behind variable

Question

I have Image

<Image HorizontalAlignment="Left"  VerticalAlignment="Top" Source="" Width="20" Height="20" />

and I have variable bool IsOk in codebehind. How can I bind it to source property and have condition that when it is true source will be "../Shared/Images/ok.png" and when false "../Shared/Images/cancel.png"? Can I use to it triggers?

Answer 1

No need for a trigger.

Just bind the Image's Source property to a property on your ViewModel that returns either the ok image or the cancel image.

Modify your code so that whenever IsOk changes, a PropertyChanged event for your button image property is fired. This way, the image will be updated automatically whenever you change the IsOk property. Something like this:

public bool IsOk
{
    get
    {
        return _isOk;
    }
    set
    {
        if (_isOk != value)
        {
            _isOk = value;
            RaisePropertyChanged("IsOk");
            RaisePropertyChanged("ButtonImage");
        }
    }
}

public Image ButtonImage
{
    get
    {
        if (_isOk)
            return _okImage;
        else
            return _cancelImage;
    }
}

.. and then in your XAML:

<Image Source="{Binding ButtonImage}" ... />

Answer 2

Marty's answer is clean, but if you really just feel like using a trigger...something like this might work also, but like I said, Marty's is cleaner. :)

<Image HorizontalAlignment="Left"  VerticalAlignment="Top" Source="" Width="20" Height="20">
          <i:Interaction.Triggers>
                <ei:DataTrigger Value="False"
                                Binding="{Binding BooleanValueBinding}">
                  <ei:ChangePropertyAction PropertyName="Source"
                                           Value="../Shared/Images/cancel.png" />
                </ei:DataTrigger>
                <ei:DataTrigger Value="True"
                                Binding="{Binding BooleanValueBinding}">
                  <ei:ChangePropertyAction PropertyName="Source"
                                           Value="../Shared/Images/ok.png" />                  
                </ei:DataTrigger>
          </i:Interaction.Triggers>
    </Image>