WPF Changing Binded Value from Integer to Image

Question

I am trying to load a ListView thats binded to a database that brings a list of items. In the ListView i am showing two colums, "Items" and "Status." I am able to bring the values, but now I want to replace the value in Status to an Image.

Example:

1 = images/green.png
2 = images/red.png
3 = images/orange.png

And I would like to show the Image in the list, so as the user navigates, they see all the images automatically. I found something similar in another question but that has the image tag built in which I can't do in a ListView. WPF Convert Integer to Image without DB Binding

Thanks for Help.

EDIT

Partial Class ImgConverter
    Implements IValueConverter

    Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object
        Dim imageIndex As Integer
        If Integer.TryParse(value.ToString(), imageIndex) Then
            Select Case imageIndex
                Case 1
                    Return BitmapSource = "Images/green.png"
                Case 2
                    Return BitmapSource = "Images/red.png"
            End Select
        End If
    End Function

    Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object
        Throw New NotImplementedException()
    End Function

End Class

With this code I am getting a IntelliSense error BitmapSource and Implements IvalueConverter saying that I need to implement a ConvertBack, which I did but it still bugs me.

EDIT #3

OK THE BITMAPSOURCE ERROR WAS BC I DIDN'T DECLARE THE VARIABLE. THATS SOLVED.

The IValueConverter error says: Error 2 Class 'ImgConverter' must implement 'Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object' for interface 'System.Windows.Data.IValueConverter'. ...\Config (ABM,20)\RangoPage.xaml.vb 14 Cogent

Answer 1

Use an IValueConverter,

Which will take an integer as a parameter, and return a BitmapSource

<ListView ItemsSource="{Binding Collection}">
   <ListView.ItemTemplate>
      <DataTemplate>
         <StackPanel Orientation="Horizontal">
            <Textblock Text="{Binding Item}" />
            <Image Source="{Binding Status, Converter={StaticResource ValueConverter}}" />
         </StackPanel>
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

public class IntToImageConverter : IValueConverter
{
          public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            int imageIndex;
            if(int.TryParse(value.ToString(), out imageIndex))
            {
               switch(imageIndex)
               {
                 case 1:
                  return new ImageSource("images/red.png")

                 etc...
               }
            }

            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
}

Answer 2

Just in case if yo need to use it in UWP app there is working approach.

C#

 public sealed class IntStateToImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            try
            {
                var imagePath = "ms-appx:///Assets/Buttons/";
                DeviceNodeTechStateEnum state = value.ObjectToEnums<DeviceNodeTechStateEnum>();
                switch (state)
                {
                    case DeviceNodeTechStateEnum.OK:
                        imagePath += "correct.png";
                        break;
                    case DeviceNodeTechStateEnum.BAD:
                        imagePath += "incorrect.png";
                        break;
                    default:
                        imagePath += "unknown.png";
                        break;
                }

                Uri imageUri = new Uri(imagePath, UriKind.Absolute);
                BitmapImage imageBitmap = new BitmapImage(imageUri);
                return imageBitmap;
            }
            catch (Exception)
            {
            }

            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return !(value is bool && (bool)value);
        }
    }

Where is ms-appx:///Assets/Buttons/ is your project folder to keep images.

XAML of UserControl

   <Image  Source="{Binding State, Converter={StaticResource intStateToImageConverter}}" Width="20" Height="20" ></Image>

Where is State is a field of the class has type DeviceNodeTechStateEnum.

XAML of APP

<Application.Resources>
  <ResourceDictionary>
    <common:IntStateToImageConverter x:Key="intStateToImageConverter" />

C# Enums

public enum DeviceNodeTechStateEnum
{
        Undefined = 1,
        OK = 2,
        BAD = 3,
}

Method to convert object to enums.

public static class Extensions
{
        public static T ObjectToEnums<T>(this object o)
        {
            T enumVal = (T)Enum.Parse(typeof(T), o.ToString());
            return enumVal;
        }
}