Telerik blogs

Create Beautiful and User-Friendly Forms in Your Xamarin App

YanaKerpecheva by Yana Kerpecheva
February 07, 2018 Mobile, Xamarin 0 Comments
Telerik UI for Xamarin Entry Control Overview Image big


Almost every mobile app has scenarios that gather user input. It was with this in mind that we introduced the Entry control to Telerik UI for Xamarin, to help you create beautiful and user-friendly forms.

Introducing the New Entry in Telerik UI for Xamarin

The Telerik UI for Xamarin Entry is an input control which accepts strings as an input and gives you the option to customize its look, so it’s consistent with the rest of your app. It extends the default Xamarin Forms Entry control and adds the following features on top of it:

  • Support for the Telerik theming mechanism
  • Customizable watermark
  • Customizing the border around it
  • Supports all the features of the Xamarin.Forms Entry such as password input and defining virtual keyboard considering the expected input

In sections below, I'll give you some quick examples of how you can utilize the key features of the control.

Customizing the Watermark

A watermark is used to give guidance to the end user on the text that should be entered. You can easily change the color of the watermark through the WatermarkTextColor property. Check out the snippet below:

<telerikInput:RadEntry BackgroundColor="White"
           WatermarkText="only letters and numbers"
           TextColor="Black"
           WatermarkTextColor="#C0C0C0">
    <telerikInput:RadEntry.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="Android,UWP" Value="10,10,0,10" />
            <On Platform="iOS" Value="10,10,0,20" />
        </OnPlatform>
    </telerikInput:RadEntry.Padding>
    <telerikInput:RadEntry.BorderStyle>
        <telerikInput:BorderStyle CornerRadius="8"
                        BorderColor="#808080"
                        BorderThickness="1" />
    </telerikInput:RadEntry.BorderStyle>
</telerikInput:RadEntry>


And this is how it looks on an iOS simulator:

radentry_ios_watermark

Customizing the Look & Feel of the Control

The Entry control allows you to customize its visual appearance, so that it fits the design of your app. Here is an example of how you can utilize the Entry styling features such as BorderStyle, Padding, and others to make your form prettier, and better able to capture end users’ attention:

<telerikInput:RadEntry BackgroundColor="#26A6D1"
                WatermarkText="Enter First Name"
                TextColor="White">
    <telerikInput:RadEntry.HeightRequest>
        <OnPlatform x:TypeArguments="x:Double">
            <On Platform="Android, iOS" Value="40"/>
            <On Platform="UWP" Value="-1"/>
        </OnPlatform>
    </telerikInput:RadEntry.HeightRequest>
    <telerikInput:RadEntry.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="Android,UWP" Value="10,10,0,10" />
            <On Platform="iOS" Value="10,10,0,20" />
        </OnPlatform>
    </telerikInput:RadEntry.Padding>   
    <telerikInput:RadEntry.BorderStyle>
        <telerikInput:BorderStyle CornerRadius="0"
                          BorderColor="White"
                          BorderThickness="1">
        </telerikInput:BorderStyle>
    </telerikInput:RadEntry.BorderStyle>   
</telerikInput:RadEntry>

And here is the result on an iOS simulator:

radentry_ios_styled

Try It Out and Share Your Feedback

I hope that the Entry control will be of help to your in your mobile application projects. If that's so, make sure to download the latest version of Telerik UI for Xamarin, and try it out alongside all the other new features that came with the Telerik R1 2018 Release.

Download Telerik UI for Xamarin

Additionally, we are excited to hear what you think about it and help us improve, so feel free to share your feedback through our Forums or through the Feedback Portal.

Last, but definitely not least, here are some extra Telerik UI for Xamarin resources that you can find useful in building your mobile projects: online documentation, SDK demos, QSF Application and its source code.

Thank you and happy coding!

Form, Telerik UI for Xamarin, Xamarin
YanaKerpecheva
About the Author

Yana Kerpecheva

Yana Kerpecheva is a Senior Technical Support Engineer on the Telerik UI for Xamarin team. She has been working with Telerik products since 2008, when she joined the company. Apart from work, she likes skiing and travelling to new places.

Related Posts

Release

Toolbox, DataGrid, Numeric and More in R1 2018 of UI for Xamarin

Mobile Xamarin

Check out the New Button Control in Telerik UI for Xamarin

Mobile Xamarin

Xamarin Apps Can Wait in Style

Comments

Comments are disabled in preview mode.