Search code examples
c#xamlxamarin.formscustom-renderer

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

I'm new to Xamarin and would like to know where to start with this.

I have a need to make a Xamarin Forms custom Entry. That Entry needs an Icon and a border with rounded corners and a place holder label. This is a mock up of what is needed:"

Custom Entry

The Behavior is that the Text "Input" will show the placeholder text until the user starts typing then the "Label" will appear with the text form the place holder. So the "Label" will be hidden until the user starts typing.

enter image description here (with placeholder text)

So is it possible to build this Entry without a custom entry renderer? How would would put the label in a custom renderer if needed.

I would apprentice any help in getting started with this.

Solution

  • You could roll this yourself, but someone else has already done all the hard work for you. Take a look at the Xfx.Controls library. The XfxEntry looks to be exactly what you're looking for. All you need to do is:

    1. Grab the nuget package, and install it in your main and platform projects.
    2. Make sure that you initialize the library in your Android and iOS projects.
    3. At the top of the xaml page it's going to be used in, import the library in with something like xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls".

    4. Use the control, with something like:

      <xfx:XfxEntry Placeholder="Email"
      Text="{Binding Email}" />

    After that you would need to create your own custom control and place the control in it. To get the rounded corners, you'll want your control to inherit from frame. This might look something like

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

    Notice the BorderColor and CornerRadius properties. Also, if you just add a new content view, you'll need to change the code behind file to inheriate from Frame: public partial class MyCustomEntry : Frame.

    From there, it's a simple matter of inserting the control into your page:

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

    This should give you something like: Base control Control with text

    You can tweak the layout options as needed.