Toggle image visibility using MVVM in Xamarin forms

Question

I have 2 images visibility using MVVM in Xamarin forms. 1 image represents nothing selected and the other should turn first image off and turn on second image when a selection is made on the form.

XAML:

<Image x:Name="greenCheckImage" BackgroundColor="#F5E9E9" Source="GreenCheckmark.gif" Grid.Row="4" Grid.Column="2" HeightRequest="50" WidthRequest="50" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" IsVisible="{Binding GreenCheck}"></Image>
<Image x:Name="grayCheckImage" BackgroundColor="#F5E9E9" Source="GrayCheckmark.gif" Grid.Row="4" Grid.Column="2" HeightRequest="50" WidthRequest="50" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" IsVisible="{Binding GrayCheck}"></Image>

Model:

public bool GrayCheck { get; set; }
public bool GreenCheck { get; set; }

View Model:

    private bool grayCheck;
    
    public bool GrayCheck
    {
      get
      {
         return grayCheck;
      }
    
      set
      {
         if (grayCheck != value)
         {
            grayCheck = value;
            OnPropertyChanged();
         }
      }
    }

private bool greenCheck;

public bool GreenCheck
{
  get
  {
     return greenCheck;
  }

  set
  {
     if (greenCheck!= value)
     {
        greenCheck= value;
        OnPropertyChanged();
     }
  }
}

Here is my implementation of INotifyPropertyChanged which should be handling the page update right?

public class BaseViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string name = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

Everything is getting set properly when page loads and clicking on the a selection is also firing correctly and the true/false on IsVisible is also being set properly; however the unslected image still remains on the graycheck rather than what should be being displayed is the greencheck and the graycheck should not be visible anymore.

What am I missing here? TIA! Rick...

you didn't post the code that actually toggles the properties, but I assume that you need to set GreyCheck = false whenever you set GreenCheck = true — Jason
How do you trigger the Selected and UnSelected statues? We need more details for that. — Wendy Zang - MSFT
Oh sorry I missed that. Yes Jason that is what is happening in my code. Yes Wendy it is on an imagebutton when clicked it fires the code to do the sets Jason pointed out. Again it goes through this code setting the image visibility properly but it doesnt refresh or show on the screen. — Rick
I want to how do you trigger the Selected and UnSelected statues. Do you try to use the VisualStateManager or TapGestureRecognizer? — Wendy Zang - MSFT

Shubham Tyagi Shubham Tyagi · Accepted Answer · 2021-02-09T04:25:58

If binding is working properly do not use/maintain two boolean variables for gray and green. If only one will be visible at one time.

Use greenCheckImage Xaml as it is and use Data Trigger for grayCheckImage

<Image x:Name="grayCheckImage" BackgroundColor="#F5E9E9" Source="GrayCheckmark.gif" Grid.Row="4" Grid.Column="2" HeightRequest="50" WidthRequest="50" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">
    <DataTrigger TargetType="Image" Binding="{Binding GreenCheck}" Value="False">
        <Setter Property="IsVisible" Value="True"/>
    </DataTrigger>
    <DataTrigger TargetType="Image" Binding="{Binding GreenCheck}" Value="True">
        <Setter Property="IsVisible" Value="False"/>
    </DataTrigger>
</Image>

You can also write a converter if doing this in multiple places.

Toggle image visibility using MVVM in Xamarin forms

1 Answers