Xamarin Forms CollectionView:无法提供 SelectedItem 透明背景 [英] Xamarin Forms CollectionView: Cannot give SelectedItem Transparent background

问题描述

我正在使用 CollectionView 并且当用户选择一个项目时，我根本不希望 SelectedItem 显示背景颜色.我试图通过按照 Xamarin 文档中的说明使用 VisualStateManager 将 BackgroundColor 属性设置为透明来实现这种效果.但是，项目的背景不是不可见，而是在选择时变灰.该代码有效.如果我将它设置为红色，我会看到红色.但我无法让背景完全消失.

I am using a CollectionView and when a user selects an item, I don't want the SelectedItem to show background color at all. I have tried to achieve this effect by setting the BackgroundColor property to transparent with the VisualStateManager per the instructions in Xamarin's documentation. However, rather than the Item's Background being invisible it just becomes grayed-out when selected. The code works. If I set it to red, I see red. But I can't get the background to go away altogether.

iOS 正在发生这种情况.

This is happening in iOS.

谁能告诉我怎么做?

这是我的代码:

<Style TargetType="ContentView">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor"
                                        Value="Transparent" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

<CollectionView Grid.Row="0" ItemsSource="{Binding Lessons}"  BackgroundColor="Transparent"
                  SelectedItem="{Binding SelectedLesson, Mode=TwoWay}" HorizontalOptions="FillAndExpand"

                        SelectionMode="Single"
                        cal:Message.Attach="[Event SelectionChanged] = [Action ActivateLesson]">
            <CollectionView.ItemTemplate >
                <DataTemplate x:DataType="engineVm:LessonViewModel">
                    <ContentView BackgroundColor="Transparent" cal:View.Model="{Binding}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0, 0, 0, 20" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

推荐答案

这可以通过使用自定义渲染器

using UIKit;
using Xamarin.Forms.Platform.iOS;
using Xamarin.Forms;

using App7.iOS;

[assembly:ExportRenderer(typeof(ViewCell),typeof(MyViewCellRenderer))]

namespace App7.iOS
{
    public class MyViewCellRenderer: ViewCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var cell= base.GetCell(item, reusableCell, tv);

            cell.SelectedBackgroundView = new UIView
            {
                BackgroundColor = Color.Transparent.ToUIColor(),
            };
            cell.SelectionStyle = UITableViewCellSelectionStyle.None;

            return cell;
        }

        
    }
}

在 xaml 中

<CollectionView.ItemTemplate >
  <DataTemplate >
     <ViewCell>
         <ContentView BackgroundColor="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0, 0, 0, 20" />
     </ViewCell>
  </DataTemplate>
</CollectionView.ItemTemplate>

更新

您可以使用 Nuget 的插件 FlowListView.它提供了类似 CollectionView 的功能.

Update

You could use the plugin FlowListView from Nuget . It provides the similar function like CollectionView .

并且您可以在禁用 ListView 行突出显示的平台特定项目中为 FlowListViewInternalCell 创建自定义渲染器.

And you could create a custom renderers for FlowListViewInternalCell in platforms specific projects which disable ListView row highlighting.

using System;
using DLToolkit.Forms.Controls;
using DLToolkitControlsSamples.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(FlowListViewInternalCell), typeof(FlowListViewInternalCellRenderer))]
namespace DLToolkitControlsSamples.iOS
{
    // DISABLES FLOWLISTVIEW ROW HIGHLIGHT
    public class FlowListViewInternalCellRenderer : ViewCellRenderer
    {
        public override UIKit.UITableViewCell GetCell(Xamarin.Forms.Cell item, UIKit.UITableViewCell reusableCell, UIKit.UITableView tv)
        {
                    tv.AllowsSelection = false;
            var cell = base.GetCell(item, reusableCell, tv);
            cell.SelectionStyle = UITableViewCellSelectionStyle.None;

            return cell;
        }
    }
}

安卓

using System;
using DLToolkit.Forms.Controls;
using DLToolkitControlsSamples.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(FlowListViewInternalCell), typeof(FlowListViewInternalCellRenderer))]
namespace DLToolkitControlsSamples.Droid
{
    // DISABLES FLOWLISTVIEW ROW HIGHLIGHT
    public class FlowListViewInternalCellRenderer : ViewCellRenderer
    {
        protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, Android.Views.ViewGroup parent, Android.Content.Context context)
        {
            var cell = base.GetCellCore(item, convertView, parent, context);

            var listView = parent as Android.Widget.ListView;

            if (listView != null)
            {
                listView.SetSelector(Android.Resource.Color.Transparent);
                listView.CacheColorHint = Android.Graphics.Color.Transparent;
            }

            return cell;
        }
    }
}

有关插件的更多详细信息和用法，您可以查看 https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView/

For more details and usage of the plugin you could check https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView/

这篇关于Xamarin Forms CollectionView:无法提供 SelectedItem 透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！