Xamarin

Xamarin.Forms Custom Entry With Password

Today, I am going to create a custom ImageEntry. Whenever we are creating a login page, we can not understand which control should we use for submitting the username and password. I am creating a custom control today to solve this problem. We don't need to write more code with its use and page design will also look good.

So, let's start.

Firstly, we need to create a ContentView and set the image and entry.

  1. <ContentView.Content>  
  2.     <StackLayout Spacing="2">  
  3.     <StackLayout Orientation="Horizontal" Spacing="0">  
  4.     <local:CustomImage x:Name="LIcon" Source="{Binding LImageSource,Mode=TwoWay}" IsVisible="False"  
  5.     HorizontalOptions="Start" HeightRequest="25" WidthRequest="25"/>  
  6.     <local:MyEntry x:Name="imgEntry" PlaceholderColor="Red" Text="{Binding Text, Mode=TwoWay}"  
  7.     HorizontalOptions="FillAndExpand"/>  
  8.     <local:CustomImage x:Name="RIcon" Source="{Binding RImageSourceProperty,Mode=TwoWay}" IsVisible="False"  
  9.     HorizontalOptions="End" HeightRequest="25" WidthRequest="25"/>  
  10.     </StackLayout>  
  11.     <BoxView x:Name="BottomBorder" BackgroundColor="Gray" HeightRequest="1" Margin="0" HorizontalOptions="FillAndExpand"/>  
  12.     <BoxView x:Name="HiddenBottomBorder" BackgroundColor="Gray" HeightRequest="5" Margin="0" WidthRequest="0" HorizontalOptions="Center"/>  
  13.     </StackLayout>  
  14.     </ContentView.Content>  
  15.    

Then, we are using the BindableProperty to create this custom control.

  1. public partial class ImageEntry: ContentView {  
  2.         public static BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(ImageEntry), defaultBindingMode: BindingMode.TwoWay);  
  3.         public static BindableProperty PlaceholderProperty = BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(ImageEntry), defaultBindingMode: BindingMode.TwoWay, propertyChanged: (bindable, oldVal, newval) => {  
  4.             var matEntry = (ImageEntry) bindable;  
  5.             matEntry.imgEntry.Placeholder = (string) newval;  
  6.         });  
  7.         public static BindableProperty IsPasswordProperty = BindableProperty.Create(nameof(IsPassword), typeof(bool), typeof(ImageEntry), defaultValue: false, propertyChanged: (bindable, oldVal, newVal) => {  
  8.             var matEntry = (ImageEntry) bindable;  
  9.             matEntry.imgEntry.IsPassword = (bool) newVal;  
  10.         });  
  11.         public static BindableProperty KeyboardProperty = BindableProperty.Create(nameof(Keyboard), typeof(Keyboard), typeof(ImageEntry), defaultValue: Keyboard.Default, propertyChanged: (bindable, oldVal, newVal) => {  
  12.             var matEntry = (ImageEntry) bindable;  
  13.             matEntry.imgEntry.Keyboard = (Keyboard) newVal;  
  14.         });  
  15.         public static BindableProperty AccentColorProperty = BindableProperty.Create(nameof(AccentColor), typeof(Color), typeof(ImageEntry), defaultValue: Color.Accent);  
  16.         public static readonly BindableProperty LImageSourceProperty = BindableProperty.Create(nameof(LImageSource), typeof(ImageSource), typeof(ImageEntry), defaultBindingMode: BindingMode.TwoWay, propertyChanged: (bindable, oldVal, newVal) => {  
  17.             var matEntry = (ImageEntry) bindable;  
  18.             matEntry.LIcon.Source = (ImageSource) newVal;  
  19.         });  
  20.         public static readonly BindableProperty RImageSourceProperty = BindableProperty.Create(nameof(RImageSource), typeof(ImageSource), typeof(ImageEntry), defaultBindingMode: BindingMode.TwoWay, propertyChanged: (bindable, oldVal, newVal) => {  
  21.             var matEntry = (ImageEntry) bindable;  
  22.             matEntry.RIcon.Source = (ImageSource) newVal;  
  23.         });  
  24.         public static readonly BindableProperty ImageAlignmentProperty = BindableProperty.Create(nameof(ImageAlignment), typeof(eImageAlignment), typeof(ImageEntry), defaultValue: eImageAlignment.None, propertyChanged: OnImageAlignmentChanged);  
  25.         public ImageSource RImageSource {  
  26.             get {  
  27.                 return (ImageSource) GetValue(RImageSourceProperty);  
  28.             }  
  29.             set {  
  30.                 SetValue(RImageSourceProperty, value);  
  31.             }  
  32.         }  
  33.         public ImageSource LImageSource {  
  34.             get {  
  35.                 return (ImageSource) GetValue(LImageSourceProperty);  
  36.             }  
  37.             set {  
  38.                 SetValue(LImageSourceProperty, value);  
  39.             }  
  40.         }  
  41.         public Color AccentColor {  
  42.             get {  
  43.                 return (Color) GetValue(AccentColorProperty);  
  44.             }  
  45.             set {  
  46.                 SetValue(AccentColorProperty, value);  
  47.             }  
  48.         }  
  49.         public Keyboard Keyboard {  
  50.             get {  
  51.                 return (Keyboard) GetValue(KeyboardProperty);  
  52.             }  
  53.             set {  
  54.                 SetValue(KeyboardProperty, value);  
  55.             }  
  56.         }  
  57.         public bool IsPassword {  
  58.             get {  
  59.                 return (bool) GetValue(IsPasswordProperty);  
  60.             }  
  61.             set {  
  62.                 SetValue(IsPasswordProperty, value);  
  63.             }  
  64.         }  
  65.         public string Text {  
  66.             get {  
  67.                 return (string) GetValue(TextProperty);  
  68.             }  
  69.             set {  
  70.                 SetValue(TextProperty, value);  
  71.             }  
  72.         }  
  73.         public string Placeholder {  
  74.             get {  
  75.                 return (string) GetValue(PlaceholderProperty);  
  76.             }  
  77.             set {  
  78.                 SetValue(PlaceholderProperty, value);  
  79.             }  
  80.         }  
  81.         public eImageAlignment ImageAlignment {  
  82.             get => (eImageAlignment) GetValue(ImageAlignmentProperty);  
  83.             set => SetValue(ImageAlignmentProperty, value);  
  84.         }  
  85.         public event EventHandler LeftImageClicked;  
  86.         public virtual void LeftImageOn_Clicked(object sender, EventArgs e) {  
  87.             LeftImageClicked ? .Invoke(sender, e);  
  88.         }  
  89.         public event EventHandler RightImageClicked;  
  90.         public virtual void RightImageOn_Clicked(object sender, EventArgs e) {  
  91.             RightImageClicked ? .Invoke(sender, e);  
  92.         }  
  93.         public ImageEntry() {  
  94.             InitializeComponent();  
  95.             imgEntry.BindingContext = this;  
  96.             RIcon.ImageClicked += RightImageOn_Clicked;  
  97.             LIcon.ImageClicked += LeftImageOn_Clicked;  
  98.             imgEntry.Focused += async (s, a) => {  
  99.                 BottomBorder.HeightRequest = 2.5;  
  100.                 BottomBorder.BackgroundColor = AccentColor;  
  101.                 HiddenBottomBorder.BackgroundColor = AccentColor;  
  102.                 if (string.IsNullOrEmpty(imgEntry.Text)) {  
  103.                     await Task.WhenAll(HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, BottomBorder.Width, BottomBorder.Height), 200));  
  104.                     imgEntry.Placeholder = null;  
  105.                 } else {  
  106.                     await HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, BottomBorder.Width, BottomBorder.Height), 200);  
  107.                 }  
  108.             };  
  109.             imgEntry.Unfocused += async (s, a) => {  
  110.                 BottomBorder.HeightRequest = 1;  
  111.                 BottomBorder.BackgroundColor = Color.Gray;  
  112.                 if (string.IsNullOrEmpty(imgEntry.Text)) {  
  113.                     await Task.WhenAll(HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, 0, BottomBorder.Height), 200));  
  114.                     imgEntry.Placeholder = Placeholder;  
  115.                 } else {  
  116.                     await HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, 0, BottomBorder.Height), 200);  
  117.                 }  
  118.             };  
  119.         }  
  120.         private static void OnImageAlignmentChanged(BindableObject bindable, object oldvalue, object newvalue) {  
  121.             var control = bindable as ImageEntry;  
  122.             switch (control.ImageAlignment) {  
  123.                 case eImageAlignment.None:  
  124.                     control.LIcon.IsVisible = false;  
  125.                     control.RIcon.IsVisible = false;  
  126.                     break;  
  127.                 case eImageAlignment.Left:  
  128.                     control.LIcon.IsVisible = true;  
  129.                     control.RIcon.IsVisible = false;  
  130.                     break;  
  131.                 case eImageAlignment.Right:  
  132.                     control.LIcon.IsVisible = false;  
  133.                     control.RIcon.IsVisible = true;  
  134.                     break;  
  135.                 case eImageAlignment.Password:  
  136.                     control.LIcon.IsVisible = true;  
  137.                     control.RIcon.IsVisible = true;  
  138.                     break;  
  139.             }  
  140.         }  
  141.         public enum eImageAlignment {  
  142.             Left,  
  143.             Right,  
  144.             Password,  
  145.             None  
  146.         }  

Please make sure to add View reference.

xmlns:controls="clr-namespace:CustomImageEntry.CustomControls"

  1. <StackLayout Padding="10">  
  2.     <controls:ImageEntry Text="Left Image" Placeholder="Xamarin Skills" AccentColor="Red"  
  3.     ImageAlignment="Left" LImageSource="email"/>  
  4.     <controls:ImageEntry Text="Right Image" Placeholder="Xamarin Skills"  
  5.     AccentColor="Green" ImageAlignment="Right" RImageSource="user"/>  
  6.     <controls:ImageEntry Text="Both Side Image" AccentColor="Yellow" LImageSource="email"  
  7.     RImageSource="eyeshow" ImageAlignment="Password" />  
  8.     <controls:ImageEntry Placeholder="Xamarin Skills" Text="None Image" AccentColor="Black" LImageSource="email"  
  9.     RImageSource="eyeshow" ImageAlignment="None" />  
  10.     <controls:ImageEntry Placeholder="Xamarin Skills" Text="Left Image Entry Clicked" AccentColor="White"  
  11.     LImageSource="email" RImageSource="eyeshow" ImageAlignment="Password"  
  12.     LeftImageClicked="ImageEntry_LeftImageClicked" />  
  13.     <controls:ImageEntry Placeholder="Xamarin Skills" Text="Right Image Entry Clicked" AccentColor="Blue"  
  14.     LImageSource="email" RImageSource="eyeshow" ImageAlignment="Password"  
  15.     RightImageClicked="ImageEntry_RightImageClicked"/>  
  16.     <controls:ImageEntry Placeholder="Xamarin Skills" Text="Left and Right Image Entry Clicked" AccentColor="BlueViolet"  
  17.     LImageSource="email" RImageSource="eyeshow" ImageAlignment="Password"  
  18.     LeftImageClicked="ImageEntry_LeftImageClicked_1" RightImageClicked="ImageEntry_RightImageClicked_1"/>  
  19.     <Entry x:Name="DefaultEntry" Placeholder="Default Entry"/>  
  20.     </StackLayout>  
TADAAA! , 

I have not yet told about the Borderless entry and CustomImage in this blog. That I will cover in my next post.

Features of Image Entry With Password Click Controls

  1. Accent Color = ( AccentColor="BlueViolet")  
  2. Text Property = (Text="Xamarin Skills")  
  3. Keyboard Property = (Keyboard="Default")  
  4. Placeholder Property = (Placeholder="Xamarin Skills")  
  5. IsPassword Property = (IsPassword="False")  
  6. Left ImageSource Property = (LImageSource="email")  
  7. Right ImageSource Property = (RImageSource="eyeshow")  
  8. ImageEntry RightImage = Clicked Property(RightImageClicked="ImageEntry_RightImageClicked")  
  9. ImageEntry LeftImage Clicked Property = (LeftImageClicked="ImageEntry_LeftImageClicked")  
  10. ImageAlignment Property = (ImageAlignment="Password")  
If you want full source code, click here.
If you want to watch this video Click Here 

 
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs