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

Question

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

我需要制作 Xamarin Forms 自定义条目。该条目需要一个图标和一个带圆角的边框和一个占位符标签。这是需要的模型：”

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

（带有占位符文本）

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

我会学徒任何帮助开始这个。

Answer 1

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

1. 获取nuget 包，并将其安装在您的主项目和平台项目中。
2. 确保在 Android 和 iOS 项目中初始化库。
3. 在将要使用的 xaml 页面的顶部，使用类似xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls".

4. 使用控件，例如：

   <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>

这应该给你类似的东西：

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