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

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

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

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

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

(带占位符文本)

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

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

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

  1. 获取 nuget package,并将其安装到您的主项目和平台项目中。
  2. 确保您 initialize the library 在您的 Android 和 iOS 项目中。
  3. 在 xaml 页面的顶部,使用 xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls".
  4. 之类的内容导入库
  5. 使用控件,像这样:

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

注意 BorderColorCornerRadius 属性。此外,如果您只是添加一个新的内容视图,您将需要更改代码隐藏文件以从框架继承: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>

这应该给你这样的东西:

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