如何使用图标、占位符标签和带弯角的边框构建自定义 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"&nbsp; &nbsp; &nbsp; Text="{Binding Email}" />之后，您需要创建自己的自定义控件并将控件放入其中。要获得圆角，您需要从框架继承控件。这可能看起来像<Frame x:Class="App1.MyCustomEntry"&nbsp; &nbsp;xmlns="http://xamarin.com/schemas/2014/forms"&nbsp; &nbsp;xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"&nbsp; &nbsp;xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"&nbsp; &nbsp;BorderColor="LightBlue"&nbsp; &nbsp;CornerRadius="15" HorizontalOptions="FillAndExpand"><Grid>&nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="2*" />&nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="8*" />&nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; <Image Grid.Column="0" Source="email.png" />&nbsp; &nbsp; <xfx:XfxEntry Grid.Column="1" Placeholder="Email*" /></Grid>注意BorderColor和CornerRadius属性。此外，如果您只是添加一个新的内容视图，则需要更改文件隐藏代码以继承 Frame: public partial class MyCustomEntry : Frame。从那里，将控件插入页面很简单：<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xmlns:local="clr-namespace:App1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x:Class="App1.MainPage">&nbsp; &nbsp; <local:MyCustomEntry VerticalOptions="Center" HorizontalOptions="Center" /></ContentPage>这应该给你类似的东西：您可以根据需要调整布局选项。