如何制作圆角入口控件 Xamarin.Forms答案

【问题标题】：How to make Round corner Entry Control Xamarin.Forms如何制作圆角入口控件 Xamarin.Forms
【发布时间】：2019-12-20 02:05:04
【问题描述】：

我必须在 Xamarin.Forms 中使用圆角条目，但对此我没有任何解决方案。

我正在尝试获得这种外观和感觉：

请帮我解决这个问题。

【问题讨论】：

标签： xamarin xamarin.ios xamarin.android xamarin.forms

【解决方案1】：

我不确定这种方法是否有问题，因为它看起来很简单但没有人建议。

但我不明白为什么不能只使用 Frame 并将 IsClippedToBounds 设置为 true。这为您提供了一个内置的圆角半径，然后您可以根据需要进行调整。

        <Grid>               
             <Frame
                   Padding = "0"
                   CornerRadius     ="20"
                   IsClippedToBounds="true">
                <Editor [...whatever...]/>
            </Frame>
         </Grid>

我目前正在使用这个解决方案，它对我有用。

【讨论】：

IsClippedToBounds 到底是做什么的？
此解决方案有效，但您也需要将框架的填充设置为 0。
这是一个很好的解决方案！
@JamesWestgate，谢谢你，你是对的。我已经编辑了帖子以反映这一点。
@GarthSebastian 我不是专家，但我相信它使框架和其中的所有内容仅显示框架本身边界内的内容。一个框架首先可以显示其边界之外的东西似乎很奇怪，但我认为默认情况下它可以。因此，当您设置 IsClippedToBounds = "true" 时，您使框架内的任何内容仅显示您刚刚设置的圆角半径内的内容，如果您将其保留为“false”，您实际上不会看到更改半径的任何效果。

【解决方案2】：

我有完全相同的要求，并决定创建名为EntryEx 的自定义控件。可以找到源代码HERE。

这是此控件支持的功能列表。

设置边框颜色
设置边框宽度
设置圆角半径
您还可以设置左右填充以从左右插入条目内容。

我已经为 iOS 和 Android 创建了自定义渲染器来支持这些属性。要使用该控件，只需执行以下操作。

将EntryEx 添加到您的表单项目中。
在相应项目中添加了适用于 iOS 和 Android 的 EntryExRenderer-s。
对于 android，您还需要添加 BorderRenderer。
调整命名空间。

就是这样。享受吧。

【讨论】：

感谢@kyurkchyan 的帮助。
@kyurkchyan 它工作正常。当用户开始输入时，如何在大部分条目右侧放置一个十字图标以清除输入字段。
你可以使用网格。设置Entry的右边（如果你想要x在右边）填充属性（这将确保条目内的文本不会与x按钮重叠），然后在网格中创建两列。将 entry 的 columnspan 设置为 2，并在网格的第二列中放置一个带有 x 图标的按钮。
如果您不指定背景颜色，@kyurkchyan 可以工作。一旦你这样做了，你就会失去圆角。

【解决方案3】：

kyurkchyan 的解决方案是 bang on，只需将 Android entryRendere 中的 UpdateBackground 方法更改为：

private void UpdateBackground(XEntry xEntry)
    {
        if (_renderer != null)
        {
            _renderer.Dispose();
            _renderer = null;
        }
        var oldBg = xEntry.BackgroundColor;
        xEntry.BackgroundColor = Xamarin.Forms.Color.Transparent;
        _renderer = new BorderRenderer();
        Control.SetBackground(_renderer.GetBorderBackground(xEntry.BorderColor, oldBg, xEntry.BorderWidth, xEntry.BorderRadius));

    }

它也可以在 Android 上运行！

【讨论】：