UWP C#: In codebehind, how do I reference an image in a Liest view column to set visibility

Question

I have a listview with 3 columns. 1 is Text data, 2 just a spacer, 3 image. This works. I see my text and I can select..etc. I want to either show or hide its the image depending on a condition, so set Visibility = Visibility.Collapsed/Visible It is used to show that that the "Screen" is completed or not.

XAML
    <Grid.ColumnDefinitions>
          <ColumnDefinition Width="60"/>
          <ColumnDefinition Width="4"/>
          <ColumnDefinition Width="20"/>
       </Grid.ColumnDefinitions>

        <TextBlock **Grid.Column="0"** Text="{Binding}" FontSize="14" 
                    Foreground="Black"
                    Margin="20,0,0,0"  FontFamily="Courier "/>

         <Image **Grid.Column="2"**  Source= 
                                 "Assets/Images/Other/SquashedySmiley_7.png" >
             <Image.RenderTransform>
                <CompositeTransform ScaleX=".9" ScaleY=".9"/>
              </Image.RenderTransform>
          </Image>

The control is being populated in C# code behind. There is a list of screen numbers in a string. In a while loop, I split off the screen value into strWork. The sub to determine if something is visible isnt coded yet. The images are showing on every row. I want to make it show or not. So, for testing I may do a counter and if statement so as to not show the first 5.

C# Code Behind

   strWork      = strScreens.Substring(0, 5);
   strScreens  = strScreens.Substring(6);
   listViewOfScreens.Items.Add(strWork);  **//<<<<<<THis line**

How do I add both the strWork data and also reference the Image to
set its visibility property.

I tried using a ListView item, and then adding it, failed.
I found some code using SubItems, but I think that is old and doesn't work here.
I made a stab a doing binding. I really dont know what I'm doing with that. I didn't get very far. Binding is used on the TextBlock, but it was from an example. I dont really know what is going on. Yeah, I need to figure that out.
I am not doing MVVM, or whatever.

I do seem seem to be close.

Answer 1

You can use a converter to calculate the visibility of the Image.

Declare a converter like that, implement your logic

class ObjectToVisibilityConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        bool someCondition;

        // Cast value to the right class, and write the logic to set someCondition
        [...]

        return someCondition ? Visibility.Visible : Visibility.Collapsed;
    }

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

Referece ObjectToVisibilityConverter in your Page.Resources

<Page.Resources>
    <converters:ObjectToVisibilityConverter x:Key="ObjectToVisibilityConverter"/>
</Page.Resources>

use the converter with Image

<Image Grid.Column="2" Source="Assets/Images/Other/SquashedySmiley_7.png" Visibility="{Binding Converter={StaticResource ObjectToVisibilityConverter}}">
  <Image.RenderTransform>
    <CompositeTransform ScaleX=" .9" ScaleY=" .9"/>
  </Image.RenderTransform>
</Image>

Answer 2

I decided to simply append 2 spaces with an extended Ascii char after.

See the above solution from danielescipioni. It is probably a better way to do it and (I have not explored it) will handle the graphic.

My solution does not. So it is not really the solution to the question.