Xamarin forms: How to handle the flowlistview selected item visibility?

Question

I have some images in a flowlistview, initially show only question mark image. When tap on the question mark image, the real image will visible instead of the question mark image. I have done like below, but the problem is, when tapping all real images are visible instead of the selected image. I need to show only the real image under the question mark image.

XAML

<flv:FlowListView 
    x:Name="MemoryMatchList"
    FlowItemsSource="{Binding ImageItems}"
    FlowColumnCount="2"
    HasUnevenRows="true">
    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>
            <StackLayout>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                        <ffimageloading:CachedImage 
                             Grid.Row="0"
                             Aspect="AspectFill"
                             IsVisible="{Binding Path=BindingContext.ImageVisibility,Source={x:Reference Name=MemoryMatchList}}"
                             Source="{Binding imageUrl, Converter={StaticResource urlJoinConverter}}"/>

                        <Image 
                            Grid.Row="0"
                            Aspect="AspectFill"
                            IsVisible="{Binding Path=BindingContext.TopImageVisibility,Source={x:Reference Name=MemoryMatchList}}"
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand"
                            Source="ic_memory_match_image.png">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                                    Command="{Binding Path=BindingContext.ShowMemoryMatchImage,Source={x:Reference Name=MemoryMatchList}}"
                                    CommandParameter="{Binding imageUrl, Converter={StaticResource urlJoinConverter}}"
                                    NumberOfTapsRequired="1" />
                            </Image.GestureRecognizers>
                        </Image>
                    </Grid>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>

ViewModel

private bool _imagevisibility = false;
public bool ImageVisibility
{
    protected set
    {
        if (_imagevisibility != value)
        {
            _imagevisibility = value;
            OnPropertyChanged("ImageVisibility");
        }
    }
    get { return _imagevisibility; }
}

private bool _topImageVisibility = false;
public bool TopImageVisibility
{
    protected set
    {
        if (_topImageVisibility != value)
        {
            _topImageVisibility = value;
            OnPropertyChanged("TopImageVisibility");
        }
    }
    get { return _topImageVisibility; }
}

public ICommand ShowMemoryMatchImage
{
    get
    {
        return new Command(async (e) =>
        {
            try
            {
                ImageVisibility = true;
                TopImageVisibility = false;
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine("Exception:>>" + ex);
            }
        });
    }
}

Initially I have set ImageVisibility and TopImageVisibility value like below:

ImageVisibility = false;
TopImageVisibility = true;

When tapping the question mark image I change these values(Added this code on ShowMemoryMatchImage):

ImageVisibility = true;
TopImageVisibility = false;

I need to show only selected image under question mark image, but all images are showing.

Answer 1

Cause: It seems that you bound the same source TopImageVisibility of each items in listView . So when you change the value of the property , all items will change at same time .

Solution:

You should define the property in Model . Check the following code .

in xaml

<ffimageloading:CachedImage 
            Grid.Row="0"
            Aspect="AspectFill"
            IsVisible="{Binding ImageVisibility}"
            Source="{Binding imageUrl, Converter={StaticResource urlJoinConverter}}">
             //...                           
</ffimageloading:CachedImage>

<Image 
         Grid.Row="0"
         Aspect="AspectFill"
         IsVisible="{Binding TopImageVisibility}"
         HorizontalOptions="FillAndExpand"
         VerticalOptions="FillAndExpand"
         Source="ic_memory_match_image.png">
         //...                               
         <Image.GestureRecognizers>
              <TapGestureRecognizer
                   Command="{Binding Path=BindingContext.ShowMemoryMatchImage,Source={x:Reference Name=MemoryMatchList}}"
                   CommandParameter="{Binding imageUrl}"
                   NumberOfTapsRequired="1" />
         </Image.GestureRecognizers>
</Image>

in Model

  public class NameMatchList : INotifyPropertyChanged
    {
        public string imageUrl { get; set; }
        public string name { get; set; }

        private Color bgColor;
        public Color BGColor
        {
            set
            {
                if (value != null)
                {
                    bgColor = value;
                    NotifyPropertyChanged();
                }
            }
            get
            {
                return bgColor;
            }
        }

        private bool _imagevisibility = false;
        public bool ImageVisibility
        {
            set
            {
                if (_imagevisibility != value)
                {
                    _imagevisibility = value;
                    NotifyPropertyChanged("ImageVisibility");
                }
            }
            get { return _imagevisibility; }
        }

        private bool _topImageVisibility = false;
        public bool TopImageVisibility
        {
             set
            {
                if (_topImageVisibility != value)
                {
                    _topImageVisibility = value;
                    NotifyPropertyChanged("TopImageVisibility");
                }
            }
            get { return _topImageVisibility; }
        }


        public NameMatchList()
        {
            ImageVisibility = false;
            TopImageVisibility = true;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

in ViewModel

 public ICommand ShowMemoryMatchImage
    {
        get
        {
            return new Command(async (e) =>
            {
                try
                {

                    var path = e as string;

                    foreach (NameMatchList items in NameMatchImagItems)
                    {


                        if (items.imageUrl == path)
                        {
                            items.ImageVisibility = true;
                            items.TopImageVisibility = false;
                        }
                        else
                        {
                            items.ImageVisibility = false;
                            items.TopImageVisibility = true;
                        }
                    }


                }
                catch (Exception ex)
                {
                    System.Diagnostics.Debug.WriteLine("Exception:>>" + ex);
                }
            });
        }
    }