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

Posted 2023-02-21

【中文标题】Xamarin 表单：如何处理 flowlistview 所选项目的可见性？

【英文标题】：Xamarin forms: How to handle the flowlistview selected item visibility?

【发布时间】：2020-04-04 09:32:09

【问题描述】：

我在 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;

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

【问题讨论】：

拜托，你可以尝试在<StackLayout>之前添加<flv:FlowViewCell>吗？

您似乎绑定了 listView 中每个项目的相同来源TopImageVisibility。

@LucasZhang-MSFT 我很快就会给你一个样品，

@LucasZhang-MSFT 是的，我在 listView 中为每个项目绑定了相同的源 TopImageVisibility，我怎样才能将绑定更改为仅选择的项目？

您应该在 Model 中定义属性。您可以使用本地静态数据创建一个示例，我会在我这边进行测试。

【参考方案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);
                
            );
        
    

【讨论】：

***.com/questions/59284414/…