How to handle image visibility using MVVM Xamarin Forms

Question

I have a image which I was able to bind with my Image property on XAML,the problem is, when I pop up my View I want that image stays invisible, and then when o click my button appears again so far I got this in m ViewModel :

private string imageSource;

public string ImageSource
{
    get { return imageSource; }
    set { imageSource = value; Notify("ImageSource"); }
}
public bool State { get { return false; }}


private Image visibleImage;

public Image VisibleImage
{
    get { return new Image {IsVisible = State,Source = ImageSource }; }
    set { visibleImage = value; Notify("VisibleImage"); Notify("State"); }
}

In my BindingContext the property IsVisible is set as false, but doesn't work!

rdoubleui rdoubleui · Accepted Answer · 2016-10-20T05:34:04

You could simplify your sample by avoiding to hold on to the Image reference in the view model at all. Modify your State flag like that:

private boolean _state;
public boolean State { 
    get { return _state; } 
    set { _state = value; Notify("State"); } 
}

In XAML declare the Image with its source and visibility binding:

<Image Source="{Binding ImageSource}" IsVisible="{Binding State}" />

Upon initialization of the view model set your State to false. The button click would then need to set the flag to true to make the image visible.

How to handle image visibility using MVVM Xamarin Forms

1 Answers