Setup template for image based on bool value within a Data Template

Question

Here is my Customer class and its collection that I want to display in a page.

public class Customer
{
    public string Name { get; set; }
    public bool Validated { get; set; }
    public string Details { get; set; }
}

List<Customer> Customers = new List<Customer>()
            {
                new Customer() { Validated = false, Name = "Dude", Details = "some details" },
                new Customer() { Validated = false, Name = "Person", Details = "some details" },
                new Customer() { Validated = true, Name = "Friend", Details = "some details" },
                new Customer() { Validated = false, Name = "Buddy", Details = "some details" },
            };

I am trying to create a data template for this data in a list control. For the Image, I want to display different image based on Validated field. Below is what I have done so far but I don't know how to set up template for image.

<Page x:Class="MyTestPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
     d:DesignHeight="250" d:DesignWidth="500"
    Title="MyTestPage" >

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="5*" />
            <RowDefinition  />
        </Grid.RowDefinitions>

        <ListBox x:Name="lst1"  Grid.Row="0">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                            <StackPanel Orientation="Vertical">
                                <StackPanel Orientation="Horizontal">
                                    <Label FontFamily="Tahoma" FontSize="20" Content="Name" />
                                    <Label FontFamily="Tahoma" FontSize="18" Content="{Binding Name}" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <Label FontFamily="Tahoma" FontSize="14" Content="Details" />
                                    <Label FontFamily="Tahoma" FontSize="12" Content="{Binding Details}" />
                                </StackPanel>
                            </StackPanel>
                        <Image Source="{Binding Image}"  Height="100" Stretch="UniformToFill" />

                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>


        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="5" Grid.Row="1" >
            <Button Content="Close" Margin="5" Width="60" Click="Close_Click" />
        </StackPanel>

    </Grid>
</Page>

Any ideas about how can I setup image template within this data template?

Answer 1

Create a custom converter implementing the IValueConverter interface, which returns the wanted BitmapImage based on the binding value, you probably only need to create the logic for the Convert method so you can leave the ConvertBack method as is

add your converter to the resources like so

<Page.Resources> <myConverters:MyValueConverter x:Key="MyCustomValueConverter"/> <!-- dont forget to add the xmlns to the page --> </page.Resources>

and add it to the binding of your image

your xaml image will look something like this:

<Image Source="{Binding Validated, Converter={StaticResource MyCustomValueConverter}" Height="100" Stretch="UniformToFill"/>