Xamarin Forms:如何在flowlistview中更改所选项目的背景颜色? [英] Xamarin Forms: How to change the background color of selected item in flowlistview?

问题描述

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

I am using flowlistview for showing items in UI. When taps on an item in the flowlistview, I need to change the background color or highlight the selected item. I tried FlowTappedBackgroundColor and FlowRowBackgroundColor properties of flowlistview. But it is not working as expected. I go through this blog, but this works only for the normal listview. How can I do this feature?

推荐答案

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

If you check the source code of the FlowViewCell , you will find that the super-class of FlowViewCell is not ViewCell ,but ContentView . So it won't work if you follow the blog.

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内部的控件的Background上创建绑定，在FlowItemTappedCommand中进行更改.

Create binding on the Background of the control inside FlowListView.FlowColumnTemplate , change in 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;

        });
    }
} 

[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 .

In addition, CollectionView is available after XF 4.3. You can use it instead of the third-party library . Check https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/introduction .

这篇关于Xamarin Forms:如何在flowlistview中更改所选项目的背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！