The IsVisible property is not working for Images or ImageButtons in MAUI.NET for Android from the code behind

Question

I'm building an app with MVVM in MAUI .NET, but when I try to hide an Image or an ImageButton, the IsVisible property doesn't seem to work (or I don't know how to use it). It works for other elements like Buttons:

This is my code, the XAML:

<ImageButton x:Name="previewImage"
    HeightRequest="48"
    WidthRequest="48"
    Aspect="AspectFill"
    Source="{Binding PreviewImageSource}"
    IsVisible="{Binding IsPreviewVisible}"
    Clicked="OnDeleteClicked"
    BackgroundColor="Transparent" />

<Button ImageSource="trash_can.png"
        WidthRequest="48"
        HeightRequest="48"
        Clicked="OnDeleteClicked"
        IsVisible="{Binding IsDeleteButtonVisible}"/>

And this is a portion of my C# code.:

private bool _isPreviewVisible;
public bool IsPreviewVisible
{
    get => _isPreviewVisible;
    set
    {
        _isPreviewVisible = value;
        OnPropertyChanged(nameof(IsPreviewVisible));
    }
}

private bool _isDeleteButtonVisible;
public bool IsDeleteButtonVisible
{
    get => _isDeleteButtonVisible;
    set
    {
        _isDeleteButtonVisible = value;
        OnPropertyChanged(nameof(IsDeleteButtonVisible));
    }
}

public void UpdateDeleteButtonVisibility()
{
    // Check if gallery has any images
    IsDeleteButtonVisible = Images.Any(); // _images is the ObservableCollection used for the gallery
}

public void UpdatePreviewImage()
{
    IsPreviewVisible = false;
    /*string folderPath = Path.Combine(FileSystem.AppDataDirectory, "Downloads");
    var imagePaths = Directory.GetFiles(folderPath, "*.jpg").ToList();

    if (imagePaths.Count > 0)
    {
        PreviewImageSource = imagePaths.First(); // Set the latest image
        IsPreviewVisible = true;
    }
    else
    {
        PreviewImageSource = null; // Clear the image source
        IsPreviewVisible = false; // Hide the button
    }*/
}

public event PropertyChangedEventHandler PropertyChanged;

protected virtual void OnPropertyChanged(string propertyName)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

In the example function UpdatePreviewImage, as you might have seen, I have set it intentionally as false, but the ImageButton is still visible. I'm not sure what I'm doing wrong since for the button it works and I can hide it. Any suggestion?

Answer 1

The problem is not reproducible with the supplied code snippet:

1. Started a new .NET MAUI application
2. Replaced MainPage.xaml with your code snippet
3. Replaced MainPage.xaml.cs with your view model
4. Set BindingContext
5. Set x:DataType for compiled bindings
6. To test the property I added CheckBox with TwoWay bindings to test the setters

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MauiMvvmTest.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiMvvmTest"
    x:Name="this"
    x:DataType="local:MainPage"
    BindingContext="{Reference this}">
    <ScrollView>
        <VerticalStackLayout Padding="30,0" Spacing="25">
            <HorizontalStackLayout HorizontalOptions="Center">
                <CheckBox IsChecked="{Binding IsPreviewVisible, Mode=TwoWay}" />
                <CheckBox IsChecked="{Binding IsDeleteButtonVisible, Mode=TwoWay}" />
            </HorizontalStackLayout>
            <ImageButton
                x:Name="previewImage"
                Aspect="AspectFill"
                BackgroundColor="Transparent"
                Clicked="OnDeleteClicked"
                HeightRequest="48"
                IsVisible="{Binding IsPreviewVisible}"
                Source="{Binding PreviewImageSource}"
                WidthRequest="48" />
            <Button
                Clicked="OnDeleteClicked"
                HeightRequest="48"
                ImageSource="trash_can.png"
                IsVisible="{Binding IsDeleteButtonVisible}"
                WidthRequest="48" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

namespace MauiMvvmTest;

public partial class MainPage : ContentPage
{
    private bool _isPreviewVisible = false;
    public bool IsPreviewVisible
    {
        get => _isPreviewVisible;
        set
        {
            _isPreviewVisible = value;
            OnPropertyChanged(nameof(IsPreviewVisible));
        }
    }

    private bool _isDeleteButtonVisible = true;
    public bool IsDeleteButtonVisible
    {
        get => _isDeleteButtonVisible;
        set
        {
            _isDeleteButtonVisible = value;
            OnPropertyChanged(nameof(IsDeleteButtonVisible));
        }
    }

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnDeleteClicked(object sender, EventArgs e)
    {

    }
}

GitHub source: https://github.com/stephenquan/MauiMvvmTest

Also, as I mentioned in the comments, the CommunityToolkit.Mvvm can help reduce the code complexity of your view model with source generators:

• Commit diff: https://github.com/stephenquan/MauiMvvmTest/commit/a0f60baf879957c73cef1048666b4ab6ed99ab1c
• Feature branch: https://github.com/stephenquan/MauiMvvmTest/tree/feature/ct-mvvm