Как создать пользовательский ввод форм Xamarin с помощью значка, метки-заполнителя и рамки с изогнутыми углами?

Question

Я новичок в Xamarin и хотел бы знать, с чего начать.

Мне нужно сделать пользовательскую запись в формах Xamarin. Для этой записи нужна иконка и рамка с закругленными углами и метка-заполнитель. Это макет того, что нужно: "

Поведение заключается в том, что текст «Ввод» будет отображать текст заполнителя до тех пор, пока пользователь не начнет печатать, а затем появится «Метка» с текстом из заполнителя. Таким образом, «Метка» будет скрыта, пока пользователь не начнет печатать.

(с заполнителем)

Так возможно ли построить эту запись без специального средства визуализации записей? Как бы поставить метку в пользовательском рендерере при необходимости.

Я бы посоветовал любую помощь, чтобы начать с этим.

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>

Это должно дать вам что-то вроде:

При необходимости вы можете настроить параметры макета.