Xamarin 表单：如何处理 flowlistview 所选项目的可见性？

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>

视图模型

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

原因：您似乎在 listView 中绑定了每个项目的相同来源 TopImageVisibility 。所以当你改变属性的值时，所有的项目都会同时改变。

解决方案：

您应该在 Model 中定义属性。检查以下代码。

在xml中

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

在视图模型中

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