How to auto-capitalize keyboard/entry in xamarin forms

I have two entries Username and Password. The username and password is always uppercase. How can I force the keyboard or the entry that when I type something the text will be uppercase?

<Frame StyleClass="lpframe" x:Name="usernameFrame" CornerRadius="5" BorderColor="Transparent" HasShadow="False">
                <StackLayout>
                    <Label Text="USERNAME" StyleClass="lbl-login">
                        <Label.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="Android" Value="OpenSans-Semibold.ttf#OpenSans-Semibold"/>
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                    <local:CustomEntry Placeholder="Username" PlaceholderColor="#879baa" Unfocused="entUser_Unfocused" StyleClass="form-control" ReturnType="Next" x:Name="entUser">
                        <local:CustomEntry.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="Android" Value="OpenSans-Regular.ttf#OpenSans-Regular"/>
                            </OnPlatform>
                        </local:CustomEntry.FontFamily>
                    </local:CustomEntry>
                </StackLayout>
            </Frame>
            <Frame StyleClass="lpframe" x:Name="passwordFrame" CornerRadius="5" BorderColor="Transparent" HasShadow="False">
                <StackLayout>
                    <Label Text="PASSWORD" StyleClass="lbl-login">
                        <Label.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="Android" Value="OpenSans-Semibold.ttf#OpenSans-Semibold"/>
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                    <local:CustomEntry Placeholder="Password" PlaceholderColor="#879baa" Unfocused="entPassword_Unfocused" IsPassword="True" StyleClass="form-control" ReturnType="Go" x:Name="entPassword">
                        <local:CustomEntry.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="Android" Value="OpenSans-Regular.ttf#OpenSans-Regular"/>
                            </OnPlatform>
                        </local:CustomEntry.FontFamily>
                    </local:CustomEntry>
                </StackLayout>
            </Frame>

1 answer

  • answered 2018-11-08 08:21 SushiHangover

    You can do it via a PlatformEffect fairly easily.

    Xaml Example:

    <Entry Placeholder="Password" IsPassword="true">
         <Entry.Effects>
            <sushi:CapsEntrytEffect />
        </Entry.Effects>
    </Entry>
    

    Note: xmlns:sushi in this example is a xmlns for the location of the RoutingEffect implementation

    RoutingEffect in a NetStd library

    This class is to be referenced via the sushi xmlns in the XAML example

    public class CapsEntrytEffect : RoutingEffect
    {
        public CapsEntrytEffect() : base("Sushi.CapsEntrytEffect")
        {
        }
    }
    

    PlatformEffect for Android

    Note: You are adding a InputFilterAllCaps to the Android Widget EditText's current filter list.

    public class CapsEntrytEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            var editText = Control as EditText;
            editText.SetFilters(editText.GetFilters().Append(new InputFilterAllCaps()).ToArray());
        }
    
        protected override void OnDetached()
        {
        }
    }
    

    PlatformEffect for iOS

    public class CapsEntrytEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            var editField = Control as UITextField;
            editField.AutocapitalizationType = UITextAutocapitalizationType.AllCharacters;
        }
    
        protected override void OnDetached()
        {
        }
    }
    

    In each one of projects that you implement a PlatformEffect, make sure you are including the ResolutionGroupName and ExportEffect attributes so Forms' can find and activate the effect for that platform.

    ResolutionGroupName and ExportEffect Example::

    [assembly: ResolutionGroupName("Sushi")]
    [assembly: ExportEffect(typeof(CapsEntrytEffect), "CapsEntrytEffect")]
    

    re: https://blog.xamarin.com/customizing-xamarin-forms-controls-with-effects/