Xamarin形式:如何处理flowlistview所选项目的可见性? [英] Xamarin forms: How to handle the flowlistview selected item visibility?
问题描述
我在flowlistview中有一些图像，最初只显示问号图像.当点击问号图像时，将显示真实图像而不是问号图像.我已经完成了下面的操作，但是问题是，当点击所有真实图像而不是所选图像时，这些可见图像是可见的.我只需要在问号图像下显示真实图像即可.
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);
}
});
}
}
最初，我设置了ImageVisibility和TopImageVisibility值，如下所示:
Initially I have set ImageVisibility and TopImageVisibility value like below:
ImageVisibility = false;
TopImageVisibility = true;
点击问号图像时，我更改了这些值(在ShowMemoryMatchImage上添加了此代码):
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.
推荐答案
原因:似乎您绑定了listView中每个项目的相同源 TopImageVisibility .因此，当您更改属性的值时，所有项目都会同时更改.
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 .
解决方案:
您应该在Model中定义属性.检查以下代码.
You should define the property in Model . Check the following code .
<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);
}
});
}
}
这篇关于Xamarin形式:如何处理flowlistview所选项目的可见性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
