如何删除 collectionview 中的一个或多个条目的 "horizontal scroll bar"？

Question

我已将 Xamarin Forms 项目更新到 4.2，并且我正在为每个数据模板使用一个带有条目的 CollectionView。 "problem" 是当我点击一个条目时，我会在列表中的所有条目下方看到一个奇怪的小下划线。

老实说，我不知道这条下划线是从哪里来的！

在这里你可以看到“00”

下面有一条灰色的小下划线

编辑：

我发现这是一个小的水平滚动条，我在这里创建了另一个集合视图（是的，绑定是完全随机的，但我想要一个快速示例）并且我设置了 HorizontalScrollBarVisibility="Never"但它仍然显示（它是一个 CollectionView 属性不是条目...）。

代码：

<StackLayout>
    <CollectionView x:Name="ItemsListView"
                    ItemsSource="{Binding Items}"
                    VerticalOptions="FillAndExpand"
                    HorizontalScrollBarVisibility="Never"
                    ItemsUpdatingScrollMode="KeepScrollOffset">
        <d:CollectionView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>First Item</x:String>
                <x:String>Second Item</x:String>
                <x:String>Third Item</x:String>
                <x:String>Fourth Item</x:String>
                <x:String>Fifth Item</x:String>
                <x:String>Sixth Item</x:String>
            </x:Array>
        </d:CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <StackLayout Orientation="Horizontal"
                                 BackgroundColor="AntiqueWhite"
                                 Padding="10"
                                 Margin="10">
                        <Entry WidthRequest="50" />
                        <Entry WidthRequest="50" />
                    </StackLayout>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

有办法去除吗？或至少使其仅出现在所选条目中？

P.S。我想我没有提到它，它只出现几秒钟（当点击一个条目时）然后消失。

Answer 1

您可以使用自定义渲染来自定义条目，例如：

自定义条目 MyEntry :

public class MyEntry :Entry
{
}

然后在 Android 项目中，创建一个条目渲染 AndroidEntry :

[assembly: ExportRenderer(typeof(MyEntry), typeof(AndroidEntry))]
namespace App18.Droid
{
  class AndroidEntry:EntryRenderer
   {
     public AndroidEntry(Context context) : base(context)
      {
      }
     protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
      {
          base.OnElementChanged(e);
          if (Control !=null)
           {
             Control.SetSingleLine(true);
             Control.HorizontalScrollBarEnabled = false;
           }
      }
   }
}

然后在 axml 中使用您的自定义条目：

<CollectionView.ItemTemplate>
    <DataTemplate>
       <StackLayout>
         <StackLayout Orientation="Horizontal"
             BackgroundColor="AntiqueWhite"
             Padding="10"
             Margin="10">
            <local:MyEntry WidthRequest="50" />
            <local:MyEntry WidthRequest="50" />
         </StackLayout>
       </StackLayout>
    </DataTemplate>
</CollectionView.ItemTemplate>

Answer 2

Leo 的解决方案很棒，但在我看来这是对 CustomRenderer 的过度使用。这不是您使用 CustomRenderer 的目的。

一个 Effect 足以实现您想要的 - 并且可以跨其他类型重用。

在您的共享项目中创建一个 NoHorizontalScrollbarEffect.cs 文件：

namespace YourAppName.Effects 
{
    public class NoHorizontalScrollbarEffect : RoutingEffect
    {
        public NoHorizontalScrollbarEffect() : base($"MyApp.{nameof(NoHorizontalScrollbarEffect)}")
        {
        }
    }
}

请注意，"MyApp" above 和 below 需要匹配，但它可以是任何类型的文本。

现在在对应的平台专有项目中添加NoHorizontalScrollbarEffect_Android.cs：

[assembly: ResolutionGroupName("MyApp")]
[assembly: ExportEffect(typeof(NoHorizontalScrollbarEffect), nameof(NoHorizontalScrollbarEffect))]
namespace YourAppName.Android.Effects
{
    public class NoHorizontalScrollbarEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            Android.Views.View view = this.Control ?? this.Container //Control is null for Layouts
            view.HorizontalScrollBarEnabled = false;
        }

        protected override void OnDetached()
        {
        }
    }
}

然后在添加 xmlns:effects="clr-namespace:YourAppName.Effects"（共享项目的效果 class 的命名空间）后，您可以在从视图（包括条目）派生的任何 XAML 元素上使用此效果页面顶部：

...
<AnyControl ...>
    ...
    <AnyControl.Effects>
         <effects:NoHorizontalScrollbarEffect />
    </AnyControl.Effects>
</AnyControl>
...

如何删除 collectionview 中的一个或多个条目的 "horizontal scroll bar"？

How to remove "horizontal scroll bar" of one or more entry in collectionview?

android

xamarin

collectionview