2

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>

2 Answers 2

11

Now you can use the Create method factory to modify keyboard behavior as below :

<Entry Placeholder="Enter text here">
<Entry.Keyboard>
    <Keyboard x:FactoryMethod="Create">
        <x:Arguments>
            <KeyboardFlags>CapitalizeWord</KeyboardFlags>
        </x:Arguments>
    </Keyboard>
</Entry.Keyboard>

Here's the official documentation : Customize the keyboard

Here are all the supported flags :

  • None – no features are added to the keyboard.
  • CapitalizeSentence – indicates that the first letter of the first word of each entered sentence will be automatically capitalized.
  • Spellcheck – indicates that spellcheck will be performed on entered text.
  • Suggestions – indicates that word completions will be offered on entered text.
  • CapitalizeWord – indicates that the first letter of each word will be automatically capitalized.
  • CapitalizeCharacter – indicates that every character will be automatically capitalized.
  • CapitalizeNone – indicates that no automatic capitalization will occur.
  • All – indicates that spellcheck, word completions, and sentence capitalization will occur on entered text.
1

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.