UltimateEntry and FloatingLabel controls

Ultimate Entry

The UltimateEntry control is a subclass of Entry. It has custom renderers for iOS and Android to accomplish some of its features. It allows you to embed images on the right side for things like clearing the text and showing/hiding passwords. It allows you to specify the text in the bottom right of the keyboard (next, done, search) and allows you to specify which control should get focus when the user presses next.

The bindable properties include:

• ImageButton - Used to set the UltimateEntryImageButton to specify if tapping the icon should clear the contents, show/hide password, or nothing.
• ImageTintColorProperty - Allows you to change the color of an image.
• UnderlineColorProperty - If set, an underline will be shown on the bottom of the entry (ala Material design).
• ShowErrorProperty - When true, the entry will show a border of ErrorColor to alert the user of a problem.
• ThicknessPaddingProperty - Used to specify padding for the entry.
• ReturnButton - Used to specify if the button on the bottom right of the keyboard should say next, done, or search.
• NextViewProperty - Used to specify which control gets focus next when the user presses the next button.
• HideBackgroundColorProperty - Used to hide the background color of the control. This is mainly set by the FloatingLabel control so that the 2 controls don't have conflicting background colors.
• UseKeyboardPlaceholder - On Android, will create additional space to make room for the keyboard.
• ErrorColor - Used to specify the color of the outline when an error occurs. Probably a good idea to make it some shade of red.
• BorderColor - Used to specify the border color of the entry.
• FocusedBackgroundColor - Used to specify the background color when the control is focused, which can be different from its initial background color.
• ImageSource - Used to specify an image to show on the right side of the entry.
• ErrorImageSource - Allows you to specify an image to be shown when there is an error.
• HidePasswordImageSource - Used to specify an image to show when the password is hidden.
• AlwaysShowImage - Used to specify if the image should only be shown when editing or always.
• EntryFocusChanged - EventHandler that is fired when the focus changes. This is mostly used to determine if the floating label should float or be shown as a placeholder. ◊

---

FloatingLabel Control

The floating label pattern started on web pages and made its way to mobile apps over time. When the screen is first rendered, the placeholder is shown on the entry as it would with a regular entry control. In Xaml, an UltimateEntry is linked to the FloatingLabel via an attached property. When the UltimateEntry gets focus, the placeholder text will resize to a smaller font and animate up to make room for the text that the user enters. This way, if the user forgets which field they are filling out, the placeholder is still visible. If the user doesn't enter any text and the UltimateEntry loses focus, the placeholder will animate downward to its original position and the font change to its original size.

Bindable Properties

• PlaceholderColorProperty - Allows you to set the color of the placeholder text.
• PlaceholderTextProperty - The text of the placeholder.
• FocusedBackgroundColor - The background color to be used when the control has focus.
• UnfocusedBackgroundColor - The background color to be used when the control does not have focus.
• IsFloating - When set to true, it adds vertical space for the floating label to float into.
• FloatingPlaceholderFontSize - The font size that the placeholder will have when it is floating.
• FloatingTextEaseProperty - The easing to be used when the placeholder animates.
• FloatingSpace - The amount of vertical space allocated to the placeholder when it is floating.

Example 1: FloatingLabel with a material design underline.

<Style x:Key="MaterialEntry" TargetType="controls:UltimateEntry">
            <Setter Property="Grid.Row" Value="1" />
            <Setter Property="UnderlineColor" Value="{DynamicResource AccentColor}" />
            <Setter Property="ReturnButton" Value="Next" />
            <Setter Property="PlaceholderColor" Value="{DynamicResource SecondaryFontColor}" />
        </Style>
<controls:FloatingLabel x:Name="UsernameFloatingLabel" PlaceholderText="Username" Style="{StaticResource FloatingLabel}"
            controls:FloatingLabel.AttachedEntry="{x:Reference FloatingUsername}">
    <controls:UltimateEntry x:Name="FloatingUsername" 
                        Style="{StaticResource MaterialEntry}"
                        ImageButton="ClearContents"
                        ImageSource="icon_close_black"
                        NextView="{x:Reference FloatingPasswordEntry}"
                        TextChanged="UltimateEntry_TextChanged" />
</controls:FloatingLabel>

Notice the Grid.Row is being set to 1. This is to make room for the label to float. The other important property to set is controls:FloatingLabel.AttachedEntry="{x:Reference UsernameFloatingLabel}". This is how you link the FloatingLabel to UltimateEntry. Setting UnderlineColor is how you configure the control to use a material design underline.