Outlined Entry Control In .NET MAUI / Xamarin

[@michaeliverson2164]

Nice tutorial. How do you wire that up to a viewmodel? I am currently learning .Net Maui. Thanks in advance.

[@arif1984may]

You are sir a genius! Thank you!

[@ProgrammingWithPragnesh]

Thank you.

[@MrBigdogtim69]

Great demo! Keep these kinds of things coming please!

[@ProgrammingWithPragnesh]

Yeah I will. Thank you

[@jamalfazeli9127]

Thanks keep going

[@ProgrammingWithPragnesh]

Thank you

[@ehsanyaghmori3670]

hi pragnesh . thank you for this amazing video . please link the repo

[@ProgrammingWithPragnesh]

here is the repo link : github.com/mistrypragnesh40/OutlinedEntryControlDemo

[@dhpetersen1990]

iOS outlines its textbox by default. How would you avoid this?

[@ProgrammingWithPragnesh]

HI , You just need to create borderless entry handler and that you need to use. as I implemented on video at 15:24

[@priyabaghel344]

How to make custom entry to disable paste option for iOS because in ios16.1.1 pasting on entry causing crashing of app.??? How we can override a method in custom handler like handler.PlatformView.CanPerform()?????

[@ProgrammingWithPragnesh]

Hi, You can refer this It might be helpful to you : www.c-sharpcorner.com/article/how-to-disable-copy-and-paste-options-for-entry-in-xamarin-forms-using-customren/

[@priyabaghel344]

@@ProgrammingWithPragnesh Thanks for your response but in .net MAUI how we can achieve this how to override a method in code can you make a video on this ?

[@kaustavchaudhuri7712]

how do you set keyboard type? if i want to have a password and IsPassword property true, how will i do that?

[@harag9]

Thanks for doing this, looks really nice for a login/password type screen - However they seems to be a lot of space above and below the text types, if you set the background colour and then set the fontsize to 20 there is about 10 padding top/bottom, yet the Entry has no padding or margin property. How can I get rid of this?

[@ProgrammingWithPragnesh]

Thank you Harag, For Removing Space, 1) Set RowDefenation to Auto 2) in a Frame Set Padding ="8,2,8,2" 3) In Code Behind Set TranslateTo = -20 Instead of 26 It will work for you, You can play around with UI like this to achieve functionality as per your need.

[@harag9]

@@ProgrammingWithPragnesh Thanks for the response, though I was talking about the ENTRY element, not the frame. However I've found a way to fix this by adding to the handler the following line for android: handler.PlatformView.SetPadding(10, 2, 10, 2); Which adds some padding to the left and right of the ENTRY and reduces the padding above it. :)

[@ProgrammingWithPragnesh]

@@harag9 Great!

[@saswatascoding4194]

Hello sir i'm working in a project using this responsive placeholder but in my case lable place holder always go behind the frame. Though I set opacity level but it not work properly kindly help me

[@ProgrammingWithPragnesh]

Hi, Can you try to use Grid Layout and in that add label down to frame like I shown in video it will work.

[@axa.axa.]

just download the examples, its already done to show you

[@leanhxuan4931]

Hi Pragnesh! It's great demo, but please demo to make a custom Picker for ItemsSourcePropety && ItemDisplayBinding - I have tried but it's fail.

[@ProgrammingWithPragnesh]

HI, I created video on this topic : kzbin.info/www/bejne/nH6lZ3-reqdgatE I hope you like this.

[@leanhxuan4931]

@@ProgrammingWithPragnesh: Hi Pragnesh, I have seen your recent video - It's greate! but It's seample question from me: Why I could not binding ItemsSourece property of Picker when doing a contentview for it - Everything I've done strickly like you do in this video.

[@ProgrammingWithPragnesh]

@@leanhxuan4931 HI , Have you created ItemSourceProperty using BindableProperty then only you can bind data to ItemSource otherwise it show error.

[@leanhxuan4931]

@@ProgrammingWithPragnesh : Yes, I'v already created it like this: using System.Collections; namespace X.ERP.Controls; public partial class PickerY : ContentView { public PickerY() { InitializeComponent(); } public static readonly BindableProperty IsEnablePropety = BindableProperty.Create( propertyName: nameof(IsEnable), returnType: typeof(bool), declaringType: typeof(PickerY), defaultValue: true, defaultBindingMode: BindingMode.OneWay ); public bool IsEnable { get => (bool)GetValue(IsEnablePropety); set => SetValue(IsEnablePropety, value); } public static readonly BindableProperty WidthSizePropety = BindableProperty.Create( propertyName: nameof(WidthSize), returnType: typeof(double), declaringType: typeof(PickerY), defaultValue: 200.0, defaultBindingMode: BindingMode.OneWay ); public double WidthSize { get => (double)GetValue(WidthSizePropety); set => SetValue(WidthSizePropety, value); } public static readonly BindableProperty HeighSizePropety = BindableProperty.Create( propertyName: nameof(HeighSize), returnType: typeof(double), declaringType: typeof(PickerY), defaultValue: 30.0, defaultBindingMode: BindingMode.OneWay ); public double HeighSize { get => (double)GetValue(HeighSizePropety); set => SetValue(HeighSizePropety, value); } public static readonly BindableProperty BackgroudColorPropety = BindableProperty.Create( propertyName: nameof(BackgroudColor), returnType: typeof(Color), declaringType: typeof(PickerY), defaultValue: Colors.Transparent, defaultBindingMode: BindingMode.OneWay ); public Color BackgroudColor { get => (Color)GetValue(BackgroudColorPropety); set => SetValue(BackgroudColorPropety, value); } public static readonly BindableProperty BorderColorPropety = BindableProperty.Create( propertyName: nameof(BorderColor), returnType: typeof(Color), declaringType: typeof(PickerY), defaultValue: Colors.LightGray, defaultBindingMode: BindingMode.OneWay ); public Color BorderColor { get => (Color)GetValue(BorderColorPropety); set => SetValue(BorderColorPropety, value); } public static readonly BindableProperty TitlePropety = BindableProperty.Create( propertyName: nameof(Title), returnType: typeof(string), declaringType: typeof(PickerY), defaultValue: null, defaultBindingMode: BindingMode.OneWay ); public string Title { get => (string)GetValue(TitlePropety); set => SetValue(TitlePropety, value); } public static readonly BindableProperty TitleFontsizePropety = BindableProperty.Create( propertyName: nameof(TitleFontsize), returnType: typeof(double), declaringType: typeof(PickerY), defaultValue: 12.0, defaultBindingMode: BindingMode.OneWay ); public double TitleFontsize { get => (double)GetValue(TitleFontsizePropety); set => SetValue(TitleFontsizePropety, value); } public static readonly BindableProperty TitleFontAttributesPropety = BindableProperty.Create( propertyName: nameof(TitleFontAttributes), returnType: typeof(FontAttributes), declaringType: typeof(PickerY), defaultValue: FontAttributes.Bold, defaultBindingMode: BindingMode.OneWay ); public FontAttributes TitleFontAttributes { get => (FontAttributes)GetValue(TitleFontAttributesPropety); set => SetValue(TitleFontAttributesPropety, value); } public static readonly BindableProperty TitleColorPropety = BindableProperty.Create( propertyName: nameof(TitleColor), returnType: typeof(Color), declaringType: typeof(PickerY), defaultValue: Colors.Black, defaultBindingMode: BindingMode.TwoWay ); public Color TitleColor { get => (Color)GetValue(TitleColorPropety); set => SetValue(TitleColorPropety, value); } public static readonly BindableProperty TextFontsizePropety = BindableProperty.Create( propertyName: nameof(TextFontsize), returnType: typeof(double), declaringType: typeof(PickerY), defaultValue: 12.0, defaultBindingMode: BindingMode.OneWay ); public double TextFontsize { get => (double)GetValue(TextFontsizePropety); set => SetValue(TextFontsizePropety, value); } public static readonly BindableProperty TextFontAttributesPropety = BindableProperty.Create( propertyName: nameof(TextFontAttributes), returnType: typeof(FontAttributes), declaringType: typeof(PickerY), defaultValue: FontAttributes.None, defaultBindingMode: BindingMode.OneWay ); public FontAttributes TextFontAttributes { get => (FontAttributes)GetValue(TextFontAttributesPropety); set => SetValue(TextFontAttributesPropety, value); } public static readonly BindableProperty TextColorPropety = BindableProperty.Create( propertyName: nameof(TextColor), returnType: typeof(Color), declaringType: typeof(PickerY), defaultValue: Colors.Black, defaultBindingMode: BindingMode.TwoWay ); public Color TextColor { get => (Color)GetValue(TextColorPropety); set => SetValue(TextColorPropety, value); } public static readonly BindableProperty HorizontalTextAlignmentPropety = BindableProperty.Create( propertyName: nameof(HorizontalTextAlignment), returnType: typeof(TextAlignment), declaringType: typeof(PickerY), defaultValue: TextAlignment.Start, defaultBindingMode: BindingMode.TwoWay ); public TextAlignment HorizontalTextAlignment { get => (TextAlignment)GetValue(HorizontalTextAlignmentPropety); set => SetValue(HorizontalTextAlignmentPropety, value); } public static readonly BindableProperty DatasourcePropety = BindableProperty.Create( propertyName: nameof(Datasource), returnType: typeof(IList), declaringType: typeof(PickerY) ); public IList Datasource { get => (IList)GetValue(DatasourcePropety); set => SetValue(DatasourcePropety, value); } public static readonly BindableProperty SelectedIndexPropety = BindableProperty.Create(propertyName: nameof(SelectedIndex), returnType: typeof(int), declaringType: typeof(PickerY), defaultValue: null); public int SelectedIndex { get => (int)GetValue(SelectedIndexPropety); set => SetValue(SelectedIndexPropety, value); } public static readonly BindableProperty SelectedItemPropety = BindableProperty.Create(propertyName: nameof(SelectedItem), returnType: typeof(object), declaringType: typeof(PickerY)); public object SelectedItem { get => (object)GetValue(SelectedItemPropety); set => SetValue(SelectedItemPropety, value); } public static readonly BindableProperty ItemDisplayBindingPropety = BindableProperty.Create( propertyName: nameof(ItemDisplayBinding), returnType: typeof(object), declaringType: typeof(PickerY), defaultValue: null, defaultBindingMode: BindingMode.TwoWay ); public object ItemDisplayBinding { get => (object)GetValue(ItemDisplayBindingPropety); set => SetValue(ItemDisplayBindingPropety, value); } }

[@leanhxuan4931]

@@ProgrammingWithPragnesh : So it's very kind of you to do the video for customizing Picker control (or orther) with bind ItemsSource.

[@dandan52409]

This is a nice tutorials. Can you show how to add a bindable keyboard property? Also for some strange reason typing is only working for the first two Entry controls on the screen the rest of the entry controls it will not type anything. On my login screen it is not typing for any Entry control (Only got two username/password). Very weird.

[@campuraduk4601]

how to make keyboard binding parameters or properties like numeric, default or chat?

[@campuraduk4601]

I have tried to make the ispassword parameter or property, and it works but for the keyboard type it doesn't work

[@williamprogramer4168]

⭐⭐⭐⭐⭐

[@mauideveloper]

This is Working for .Net MAUI 8 Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) => { #if ANDROID handler.PlatformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid()); #endif });