Entry Control

The .NET MAUI Entry control is a single-line text input field. It's ideal for collecting small amounts of text, such as names, email addresses, or passwords.

Introduction

The Entry control provides a familiar interface for users to input text. It supports various customization options to match your application's design and user experience needs.

Basic Usage

To use the Entry control, you can declare it in your XAML or create it programmatically.

XAML Example:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage"
             Title="Entry Example">

    <VerticalStackLayout Spacing="15" Padding="20">
        <Label Text="Enter your name:" />
        <Entry x:Name="nameEntry"
               Placeholder="e.g. John Doe"
               ClearButtonVisibility="WhileEditing" />

        <Button Text="Submit" Clicked="SubmitButton_Clicked" />
    </VerticalStackLayout>

</ContentPage>

C# Example:

using Microsoft.Maui.Controls;

namespace MyMauiApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            var nameEntry = new Entry
            {
                Placeholder = "e.g. John Doe",
                ClearButtonVisibility = ClearButtonVisibility.WhileEditing
            };

            var submitButton = new Button
            {
                Text = "Submit"
            };
            submitButton.Clicked += SubmitButton_Clicked;

            Content = new VerticalStackLayout
            {
                Spacing = 15,
                Padding = 20,
                Children = {
                    new Label { Text = "Enter your name:" },
                    nameEntry,
                    submitButton
                }
            };
        }

        private void SubmitButton_Clicked(object sender, System.EventArgs e)
        {
            DisplayAlert("Hello", $"Hello, {nameEntry.Text}!", "OK");
        }
    }
}

Key Properties

The Entry control offers several properties for customization:

Property	Description
`Text`	Gets or sets the text entered by the user.
`Placeholder`	Text displayed when the entry is empty, hinting at the expected input.
`PlaceholderColor`	Color of the placeholder text.
`IsPassword`	When set to `true`, masks the input text with asterisks (useful for passwords).
`Keyboard`	Specifies the type of keyboard to display (e.g., `Keyboard.Numeric`, `Keyboard.Email`).
`IsReadOnly`	When set to `true`, the user cannot edit the text.
`MaxLength`	The maximum number of characters allowed in the entry.
`HorizontalTextAlignment`	Alignment of the text within the entry (`Start`, `Center`, `End`).
`VerticalTextAlignment`	Vertical alignment of the text within the entry (`Start`, `Center`, `End`).
`ClearButtonVisibility`	Determines when the clear button (an 'X' to clear text) is visible.

Common Scenarios

Password Input:

To create a password field, set the IsPassword property to true.

<Entry IsPassword="true" Placeholder="Enter password" />

Numeric Input:

For fields that should only accept numbers, use the Keyboard.Numeric property.

<Entry Keyboard="Numeric" Placeholder="Enter a number" />

Email Input:

Use Keyboard.Email for email addresses to get an optimized keyboard and potential validation hints.

<Entry Keyboard="Email" Placeholder="Enter your email" />

Events

The Entry control exposes several events you can handle:

TextChanged: Fired when the text in the entry changes.
Completed: Fired when the user presses the return key (or equivalent) on the keyboard.

Handling TextChanged:

nameEntry.TextChanged += (sender, args) =>
{
    // Perform actions based on the new text
    System.Diagnostics.Debug.WriteLine($"Text changed to: {args.NewTextValue}");
};

Example: Email Validation

You can combine TextChanged event with properties to implement real-time validation.

private void EmailEntry_TextChanged(object sender, TextChangedEventArgs e)
{
    // Basic email format check
    bool isValid = System.Text.RegularExpressions.Regex.IsMatch(e.NewTextValue, @"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$");
    (sender as Entry).TextColor = isValid ? Colors.Black : Colors.Red;
}

The Entry control is a fundamental building block for user input in .NET MAUI applications. Experiment with its properties and events to create engaging and user-friendly interfaces.