如何使用图标、占位符标签和带弯角的边框构建自定义 Xamarin 表单条目？

Question

我是 Xamarin 的新手，想知道从哪里开始。

我需要创建一个 Xamarin Forms 自定义条目。该条目需要一个图标和一个带圆角的边框以及一个占位符标签。这是所需内容的模型："

行为是文本 "Input" 将显示占位符文本，直到用户开始键入，然后 "Label" 将与占位符文本一起出现。所以 "Label" 将被隐藏，直到用户开始输入。

（带占位符文本）

那么是否可以在没有自定义条目呈现器的情况下构建此条目？如果需要，如何将标签放入自定义渲染器中。

我会在开始这方面寻求任何帮助。

Answer 1

您可以自己滚动，但其他人已经为您完成了所有艰苦的工作。看看 Xfx.Controls library. The XfxEntry 看起来正是您要找的东西。您需要做的就是：

获取 nuget package，并将其安装到您的主项目和平台项目中。
确保您 initialize the library 在您的 Android 和 iOS 项目中。
在 xaml 页面的顶部，使用 xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls".

使用控件，像这样：

<xfx:XfxEntry Placeholder="Email"
      Text="{Binding Email}" />

之后您需要创建自己的自定义控件并将控件放入其中。要获得圆角，您需要从框架继承控件。这可能看起来像

<Frame x:Class="App1.MyCustomEntry"
   xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
   BorderColor="LightBlue"
   CornerRadius="15" HorizontalOptions="FillAndExpand">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="8*" />
    </Grid.ColumnDefinitions>
    <Image Grid.Column="0" Source="email.png" />
    <xfx:XfxEntry Grid.Column="1" Placeholder="Email*" />
</Grid>

注意 BorderColor 和 CornerRadius 属性。此外，如果您只是添加一个新的内容视图，您将需要更改代码隐藏文件以从框架继承：public partial class MyCustomEntry : Frame.

从那里开始，将控件插入您的页面是一件简单的事情：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:App1"
         x:Class="App1.MainPage">

    <local:MyCustomEntry VerticalOptions="Center" HorizontalOptions="Center" />

</ContentPage>

这应该给你这样的东西：

您可以根据需要调整布局选项。

如何使用图标、占位符标签和带弯角的边框构建自定义 Xamarin 表单条目？

How to build Custom Xamarin Forms Entry with Icon, placeholder label and border with curved corners?

c#

xaml

xamarin.forms

custom-renderer