时间戳

首页 > 解决方案 > 如何处理 Xamarin 表单中搜索栏的更改

xamarin.forms - 如何处理 Xamarin 表单中搜索栏的更改

问题描述

我在 Xamarin.Forms 中有一个搜索栏，在 3.4 版中它曾经看起来像这样：在此处输入图像描述

但是在我更新到 Xamarin.Forms 4.4.0.991477 之后，它看起来像这样： 在此处输入图像描述

我认为发生的事情是搜索栏决定在它周围创建一个轮廓，但没有摆脱它曾经有的下划线，所以现在底线正在覆盖。我已经看到了使用自定义渲染器的建议，但这似乎有点矫枉过正+我不知道如何摆脱一个我不知道关键字的元素..

有人可以帮我摆脱边框或下划线吗？如果可能的话，我想知道两者。

谢谢！（这是安卓应用，运行安卓9）

编辑：忘记添加代码

<SearchBar Placeholder="Search"
            FontSize="Medium"
            HeightRequest="50"
            Text="{Binding SearchText}"/>

标签： xamarin.forms

解决方案

SearchBar 的 iOS 和 Android 实现是不同的，在 iOS 中 SearchBar 没有下划线，并且在 Android 上不能删除下划线，除非您使用自定义渲染器，这并不是矫枉过正，实际上非常简单。

1 - 为您的自定义控件创建一个文件夹并创建一个类并从 SearchBar 扩展它，如下所示：

MyApp.Mobile >在此处创建文件夹> SearchBarNoUnderline.cs

public class SearchBarNoUnderline : SearchBar
{

}

在此之后，您只需要适用于 Android 的自定义渲染器。

2 - 在您的 Android 项目中为您的 Android 自定义渲染器创建一个文件夹，并创建一个从 Android SearchBarRenderer 扩展的类，如下所示：

MyApp.Android >在此处创建文件夹> SearchBarNoUnderlineRenderer.cs

using MyApp.Mobile.Controls;
using MyApp.Mobile.Droid.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(SearchBarNoUnderline), typeof(SearchBarNoUnderlineRenderer))]
namespace MyApp.Mobile.Droid.CustomRenderers
{
    public class SearchBarNoUnderlineRenderer : SearchBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                var plateId = Resources.GetIdentifier("android:id/search_plate", null, null);
                var plate = Control.FindViewById(plateId);
                plate.SetBackgroundColor(Android.Graphics.Color.Transparent);
            }
        }
    }
}

就是这样！现在您可以像这样在 XAML 中使用自定义 SearchBar：

<controls:SearchBarNoUnderline Placeholder="Search"
                               FontSize="Medium"
                               HeightRequest="50"
                               Text="{Binding SearchText}"/>

并且不要忘记为您的自定义控件文件夹添加参考：

xmlns:controls="clr-namespace:MyApp.Mobile.Controls"

为了删除 SearchBar 的边框，我使用了这个小技巧：

<StackLayout Spacing="0" BackgroundColor="Red" Padding="0">
    <controls:SearchBarNoUnderline Placeholder="Search"
                                   FontSize="Medium"
                                   BackgroundColor="Transparent"
                                   HeightRequest="50"
                                   Text="{Binding SearchText}"/>
</StackLayout>

现在您的边框应该消失了，您可以使用父 StackLayout 为您的 SearchBar 定义 BackgroundColor

推荐阅读