Xamarin формы: как обрабатывать видимость выбранного элемента в списке потоков?

Question

У меня есть несколько изображений в flowlistview, изначально показываю только изображение с вопросительным знакомПри нажатии на изображение со знаком вопроса, вместо изображения со знаком вопроса будет видно реальное изображение. Я сделал, как показано ниже, но проблема в том, что при нажатии все реальные изображения видны вместо выбранного изображения. Мне нужно показать только реальное изображение под изображением вопросительного знака.

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);
            }
        });
    }
}

Изначально я установил значения ImageVisibility и TopImageVisibility, как показано ниже:

ImageVisibility = false;
TopImageVisibility = true;

При нажатии на изображение вопросительного знака я изменяю эти значения (Добавлен этот код в ShowMemoryMatchImage):

ImageVisibility = true;
TopImageVisibility = false;

Мне нужно показать только выбранное изображение под изображением вопросительного знака, но все изображения отображаются.

Answer 1

Причина: Кажется, что вы связали один и тот же источник TopImageVisibility каждого элемента в listView. Поэтому, когда вы изменяете значение свойства, все элементы будут меняться одновременно.

Решение:

Вы должны определить свойство в Model. Проверьте следующий код.

в 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>

в модели

  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));
        }
    }

в 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);
                }
            });
        }
    }