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:
- Grab the nuget package, and install it in your main and platform projects.
- Make sure that you initialize the library in your Android and iOS projects.
- 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"
.
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:
You can tweak the layout options as needed.