Xamarin形式：如何在flowlistview中更改所选项目的背景颜色？

Question

我正在使用flowlistview在UI中显示项目。当点击flowlistview中的项目时，我需要更改背景颜色或突出显示所选的项目。我尝试了FlowTappedBackgroundColor的FlowRowBackgroundColor和flowlistview属性。但是它没有按预期工作。我经历了此blog，但这仅适用于普通列表视图。我该怎么做？

Answer 1

如果检查FlowViewCell的源代码，则会发现FlowViewCell的超类不是ViewCell，而是ContentView。因此，如果您关注该博客，它将无法正常工作。

namespace DLToolkit.Forms.Controls
{
    //
    // Summary:
    //     FlowListView content view cell.
    [Preserve(AllMembers = true)]
    public class FlowViewCell : ContentView, IFlowViewCell
    {
        //
        // Summary:
        //     Initializes a new instance of the DLToolkit.Forms.Controls.FlowViewCell class.
        public FlowViewCell();

        //
        // Summary:
        //     Raised when cell is tapped.
        public virtual void OnTapped();
    }
}

在FlowListView.FlowColumnTemplate内部的控件的背景上创建绑定，在FlowItemTappedCommand中进行更改。

后面的代码

public class Model : INotifyPropertyChanged 
 {
    public string Title
    {
        get;set;
    }


    private Color bgColor;
    public Color BGColor
    {
        set { 
        if(value != null)
            {
                bgColor = value;
                NotifyPropertyChanged();
            }
        }
        get
        {
            return bgColor;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

}

public class ViewModel
{
    public ObservableCollection<Model> List { set; get; }

    public ICommand ItemTappedCommand { get; set; }


   public ViewModel()
    {
        List = new ObservableCollection<Model>();
        List.Add(new Model() { Title = "1" ,BGColor = Color.White });
        List.Add(new Model() { Title = "2" , BGColor = Color.White });
        List.Add(new Model() { Title = "3", BGColor = Color.White });
        List.Add(new Model() { Title = "4", BGColor = Color.White });

        ItemTappedCommand = new Command((obj)=> {

            //reset the bg color 
            foreach(var model in List)
            {
                model.BGColor = Color.White;
            }

            Model mo = obj as Model;
            int index = List.IndexOf(mo);           
            mo.BGColor = Color.Red;

            List.RemoveAt(index);
            List.Insert(index, mo);
        });
    }
} 

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();

        ViewModel vm = new ViewModel();
        BindingContext = vm;
    }
}

在xaml中

<flv:FlowListView FlowColumnCount="3" 
                  SeparatorVisibility="None" HasUnevenRows="false"
                  FlowItemTappedCommand="{Binding ItemTappedCommand}"
                  FlowItemsSource="{Binding List}"   >

    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate> 
            <Label HorizontalOptions="Fill"
                   BackgroundColor="{Binding BGColor}"
                   VerticalOptions="Fill" 
                   XAlign="Center" 
                   YAlign="Center" 
                   Text="{Binding Title}"/>
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>

</flv:FlowListView>

此外，CollectionView在XF 4.3之后可用。您可以使用它来代替第三方库。检查https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/introduction。