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

Question

我是 Xamarin 的新手，想知道从哪里开始。我需要制作一个 Xamarin Forms 自定义条目。该条目需要一个图标和一个带圆角的边框和一个占位符标签。这是对所需内容的模拟：”行为是文本“输入”将显示占位符文本，直到用户开始键入，然后“标签”将显示占位符的文本。所以“标签”将被隐藏，直到用户开始输入。那么是否可以在没有自定义条目渲染器的情况下构建此条目？如果需要，如何将标签放在自定义渲染器中。我会在开始这个过程中获得任何帮助。

Answer 1

您可以自己滚动，但其他人已经为您完成了所有艰苦的工作。看看Xfx.Controls库。该XfxEntry看起来是你在寻找什么。您需要做的就是：

获取nuget 包，并将其安装在您的主项目和平台项目中。

确保在 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属性。此外，如果您只是添加一个新的内容视图，则需要更改文件隐藏代码以继承 Frame: 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>

这应该给你类似的东西：

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