Data Triggers: Hide placeholder if data is available

Question

Currently I have two images: placeholder image, real image. I want to hide the placeholder image if a thumbnail path for the real image is available. Therefore I thought I could use Data Triggers:

<Image x:Name="placeholder" Aspect="AspectFit" HorizontalOptions="Center" WidthRequest="60" IsVisible="False">
    <Image.Triggers>
        <DataTrigger TargetType="Image"
                     Binding="{Binding ThumbnailFilePath}"
                     Value="{x:Null}">
            <Setter Property="IsVisible" Value="True" />
        </DataTrigger>
        <DataTrigger TargetType="Image"
                     Binding="{Binding ThumbnailFilePath, Path=Text.Length}"
                     Value="0">
            <Setter Property="IsVisible" Value="True" />
        </DataTrigger>
    </Image.Triggers>
</Image>
<Image x:Name="preview" Aspect="AspectFit" HorizontalOptions="Center" WidthRequest="60" Source="{Binding ThumbnailFilePath, Converter ={StaticResource ImageSourceConverter}}"/>

If I do this some items in my list view have no image at all (ThumbnailFilePath = null;). For some the thumbnail is shown, for some the placeholder. The source for the placeholder is set in code, because there are some conditions to check. Through scrolling in the list view (items get out of sight and then back in), the placeholder is then shown.

If the path is updated the two images should be visible accordingly:

ThumbnailFilePath = null;
ThumbnailFilepath = "path/to/file.jpg";

Desired action: Placeholder should disappear, thumbnail should be shown.

ThumbnailFilePath = "old/path/to/file.jpg";
ThumbnailFilepath = "path/to/file.jpg";

Desired action: Placeholder should stay hidden, new thumbnail should be shown.

ThumbnailFilePath = "path/to/file.jpg";
ThumbnailFilepath = null;

Desired action: Placeholder should be visisble, thumbnail should be hidden.

Can this be managed with data trigger? How?

I tried to set the visibility through code (code behind file), but the item in the list view is not updated (placeholder is shown, despite a thumbnail is available, only scrolling in the list brings the thumbnail to the front).

Furthermore, I use the placeholder because when I have a binding and then I change the source of the image in code, the binding is gone ...

Answer 1

Now I use View-To-View Bindings:

<Image x:Name="placeholder"
       BindingContext="{x:Reference Name=preview}"
       Aspect="AspectFit"
       HorizontalOptions="Center"
       WidthRequest="60"
       IsVisible="{Binding Path=Source, Converter ={StaticResource IsNullConverter}">
<Image x:Name="preview" 
       Aspect="AspectFit" 
       HorizontalOptions="Center"
       WidthRequest="60" 
       Source="{Binding ThumbnailFilePath, Converter ={StaticResource ImageSourceConverter}}"/>

The above seems to work. I also had to remove all manual settings of IsVisible in code.

Here is the IValueConverter I used:

class IsNullOrEmptyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string)
            return string.IsNullOrEmpty((string)value);

        return (value == null);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new InvalidOperationException("IsNullOrEmptyConverter can only be used one way.");
    }
}