从 CollectionView 中移除涟漪效应

Question

如何消除 CollectionView 选择项目的连锁反应？当我点击一个项目时自动添加涟漪效果这是我的代码

 protected override void OnAppearing()
    {
        base.OnAppearing();
        var t = new List<Test>
        {
            new Test
            {
                Title="Test"
            },
            ...
        };
        testCollection.ItemsSource = t;
    }


           <CollectionViewx:Name="testCollection" SelectionMode="Single" HeightRequest="75"  >
                 <CollectionView.ItemsLayout>
                   <LinearItemsLayout Orientation="Horizontal"  />
                 </CollectionView.ItemsLayout>
                 <CollectionView.ItemTemplate >
                   <DataTemplate  >
                      <Frame >
                        <Frame  CornerRadius="20" WidthRequest="60"  BorderColor="#f1f1f1" Padding="11,0,11,0"   Margin="9,10,0,0" >
                             <StackLayout Orientation="Horizontal" >
                               <Label Margin="5,2,0,0"   Text="{Binding Title}"/>
                              </StackLayout>
                            </Frame>
                         </Frame>
                     </DataTemplate>

                            </CollectionView.ItemTemplate>
                        </CollectionView>

Answer 1

您可以使用 Custom Renderer

来实现它

在表格中

创建一个StackLayout的子类（或者Grid，Frame，由你决定）

public class MyStackLayout:StackLayout
{
}

在Android

在 Resource->drawable 文件夹中创建一个 xml 文件 my_cell_style.xml

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <color android:startColor="@android:color/transparent"/>
</shape>


using Android.Content;

using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;

using App32;
using App32.Droid;
using Android.Support.V4.Content.Res;

[assembly:ExportRenderer(typeof(MyStackLayout),typeof(MyLayoutRenderer))]

namespace App32.Droid
{
    public class MyLayoutRenderer : ViewRenderer
    {
        public MyLayoutRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
        {
            base.OnElementChanged(e);

            if(e.NewElement!=null)
            {
                this.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.my_cell_style, null));
            }

        }

    }
}

现在 xaml 您可以像

一样使用它

 <CollectionView >

        <CollectionView.ItemTemplate>

            <DataTemplate>

                <local:MyStackLayout>
                    
                    //...put the element here
                    
                </local:MyStackLayout>


            </DataTemplate>

        </CollectionView.ItemTemplate>

    </CollectionView>

更新

你好像在单元格上添加了一个按钮，对吧？如果是这样，你需要在Android平台设置按钮的背景。

在表格中

创建自定义按钮

public class MyButton:Button
{
}

在Android

[assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRenderer))]
namespace App11.Droid
{
 public class MyButtonRenderer:ButtonRenderer
 {
   public MyButtonRenderer(Context context):base(context)
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if(Control!=null)
        {
            Control.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.my_cell_style, null));
        }

    }
  }
}

在xaml

<local:MyButton Text="xxx" ...   />

更新 2：

在Resources -> value ->style.xml

中添加以下行

<item name="android:colorControlHighlight">@android:color/transparent</item>

从 CollectionView 中移除涟漪效应

Remove Ripple Effect from CollectionView

xamarin

xamarin.forms

xamarin.android

collectionview

ripple-effect

在表格中

在Android

更新

在表格中

在Android

在xaml

更新 2：