When you want to hide the underline that is normally presented in an Entry control, you have different options:
In this blog item we are going to discuss the custom renderer.
Note: to give all controls more or less the same look on Android as well as iOS we hve installed Xamarin.Forms.Visual.Material. For a detailed description:
Material design
First create the following class: CustomEntry:
using Xamarin.Forms;
namespace Xamarin_Support.Controls
{
public class CustomEntry : Entry
{
// no other code needs to go here unless you want more customizable properties.
}
}
In the Android project create a custom renderer:
using Android.Content;
using eFarma_App.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Material.Android;
using Xamarin.Forms.Platform.Android;
using Xamarin_Support.Controls;
[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace eFarma_App.Droid.Renderers
{
class CustomEntryRenderer : MaterialEntryRenderer
{
public CustomEntryRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.EditText.Background = null;
Control.EditText.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
}
}
Also in the iOS project create a custom renderer:
using eFarma_App.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Xamarin_Support.Controls;
[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace eFarma_App.iOS.Renderers
{
public class CustomEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
// Transparent
Control.BackgroundColor = UIColor.FromWhiteAlpha(1, 1);
Control.BorderStyle = UITextBorderStyle.Line;
}
}
}
}
To use the custom entry, you define it
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:ctrl="clr-namespace:Xamarin_Support.Controls;assembly=Xamarin_Support"
x:Class="eFarma_App.Views.Modules.Login.LoginPage" Visual="Material"
NavigationPage.HasNavigationBar="False" BackgroundColor="White">
<Grid Margin="20">
<ctrl:CustomEntry Placeholder="UserName" Text="{Binding UserName}" />
</Grid>
</ContentPage>
You will see that the line normally shown in an Entry control is unvisible now.