Xamarin表单：如何处理flowlistview所选项目的可见性？xaml在模型中在ViewModel中

我在flowlistview中有一些图像，最初只显示问号图像。当点击问号图像时，将显示真实图像而不是问号图像。我已经完成了下面的操作，但是问题是，当点击所有真实图像而不是所选图像时，它们都是可见的。我只需要在问号图像下显示真实图像即可。

XAML

x:Name="MemoryMatchList"
FlowItemsSource="{Binding ImageItems}"
FlowColumnCount="2"
HasUnevenRows="true">








Grid.Row="0"
Aspect="AspectFill"
IsVisible="{Binding Path=BindingContext.ImageVisibility,Source={x:Reference Name=MemoryMatchList}}"
Source="{Binding imageUrl,COnverter={StaticResource urlJoinConverter}}"/>
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">

Command="{Binding Path=BindingContext.ShowMemoryMatchImage,Source={x:Reference Name=MemoryMatchList}}"
commandparameter="{Binding imageUrl,COnverter={StaticResource urlJoinConverter}}"
NumberOfTapsRequired="1" />










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;


我只需要在问号图像下显示选定的图像，但是所有图像都在显示。

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

解决方案：

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

xaml

Grid.Row="0"
Aspect="AspectFill"
IsVisible="{Binding ImageVisibility}"
Source="{Binding imageUrl,COnverter={StaticResource urlJoinConverter}}">
//...

Grid.Row="0"
Aspect="AspectFill"
IsVisible="{Binding TopImageVisibility}"
HorizOntalOptions="FillAndExpand"
VerticalOptiOns="FillAndExpand"
Source="ic_memory_match_image.png">
//...

Command="{Binding Path=BindingContext.ShowMemoryMatchImage,Source={x:Reference Name=MemoryMatchList}}"
CommandParameter="{Binding imageUrl}"
NumberOfTapsRequired="1" />




在模型中

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