.NET MAUI Views Label, Entry Step by step Implementation and Top 10 Questions and Answers
 Last Update: April 01, 2025      16 mins read      Difficulty-Level: beginner

.NET MAUI Views: Label and Entry

.NET Multi-platform App UI (MAUI) is a powerful framework developed by Microsoft that enables developers to create natively-styled applications for multiple platforms (Windows, macOS, iOS, and Android) from a single codebase. It provides a rich set of user interface components (views) that are essential for building responsive and interactive applications. Two of the most basic and commonly used views in .NET MAUI are the Label and the Entry.

Label

The Label view is used to display text in an application. It is crucial in providing information to the user, whether it's static text like headings, descriptions, or dynamically generated content such as user names or dates. The Label view supports various text formatting options, such as font size, font family, text alignment, and color.

Key Features and Properties of the Label:

  1. Text:

    • Specifies the text that will be displayed within the Label. This can be set directly in XAML or programmatically in C#.
    • Example in XAML: 
      <Label Text="Welcome to .NET MAUI!" />

  2. FontSize:

    • Sets the size of the text within the Label.
    • Example in XAML: 
      <Label Text="Large Text" FontSize="24" />

  3. FontAttributes:

    • Allows you to specify whether the text should be bold, italic, or both.
    • Example in XAML: 
      <Label Text="Bold Text" FontAttributes="Bold" />

  4. TextColor:

    • Changes the color of the text within the Label. It can be set using predefined colors or custom colors defined using hexadecimal values.
    • Example in XAML: 
      <Label Text="Red Text" TextColor="Red" />

  5. HorizontalTextAlignment and VerticalTextAlignment:

    • Aligns the text within the Label horizontally and vertically.
    • Example in XAML: 
      <Label Text="Centered Text" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

  6. LineBreakMode:

    • Determines how text should be wrapped within the Label if it exceeds the available width.
    • Common line break modes include CharacterWrap, WordWrap, TailTruncation, HeadTruncation, and MiddleTruncation.
    • Example in XAML: 
      <Label Text="This is a long text that will wrap to the next line" LineBreakMode="WordWrap" />

  7. TextDecorations:

    • Allows you to add underline or strikethrough to the text.
    • Example in XAML: 
      <Label Text="Underlined Text" TextDecorations="Underline" />

Entry

The Entry view is used to allow users to input a single line of text. It is an essential component in forms where user interactions are required, such as login screens, search bars, or settings forms. The Entry view supports a variety of functionalities, including placeholder text, input mask (for sensitive data like passwords), and event handling for common user actions.

Key Features and Properties of the Entry:

  1. Text:

    • The text currently displayed within the Entry. This can be set programmatically to initialize with a specific value.
    • Example in XAML: 
      <Entry Text="Initial text" />

  2. Placeholder:

    • Provides a hint or prompt to the user about the kind of information expected in the Entry. This text disappears when the user starts typing.
    • Example in XAML: 
      <Entry Placeholder="Enter your username" />

  3. PlaceholderColor:

    • Sets the color of the placeholder text.
    • Example in XAML: 
      <Entry Placeholder="Enter your username" PlaceholderColor="Gray" />

  4. Keyboard:

    • Specifies the type of on-screen keyboard that should be displayed when the Entry is focused. Common options include Default, Email, Numeric, Telephone, and Text.
    • Example in XAML: 
      <Entry Placeholder="Enter your email" Keyboard="Email" />

  5. IsPassword:

    • When set to true, masks the entered text (usually by displaying dots or asterisks). This is commonly used for password fields.
    • Example in XAML: 
      <Entry Placeholder="Enter your password" IsPassword="True" />

  6. ReturnType:

    • Defines the action that should be taken when the user presses the return or next button on the on-screen keyboard. Common options include Go, Search, Send, Next, and Done.
    • Example in XAML: 
      <Entry Placeholder="Search for something" ReturnType="Search" />

  7. ReturnCommand:

    • Specifies a command that should be executed when the return key is pressed.
    • Example in XAML (using MVVM pattern): 
      <Entry Placeholder="Search for something" ReturnCommand="{Binding SearchCommand}" />

  8. TextChanged:

    • An event that is triggered whenever the text within the Entry changes. This can be used to perform validations or update other parts of the UI based on user input.
    • Example in C#: 
      entry.TextChanged += (s, e) =>
{
    // Handle text change
};

Summary

The Label and Entry views are fundamental components in .NET MAUI that enable developers to display information and receive input from users effectively. By utilizing the properties and events provided by these views, developers can create intuitive and responsive user interfaces that are tailored to their application's specific needs. Whether it's displaying instructions or capturing user data, the Label and Entry views play a critical role in building high-quality applications across multiple platforms.

Examples: Setting Up a Route and Running a .NET MAUI Application with Label and Entry Views

Introduction to .NET MAUI

.NET Multi-platform App UI (MAUI) is a framework designed to enable developers to build native user interface layouts that can be shared across Android, iOS, macOS, and Windows. It simplifies cross-platform development by allowing you to write your user interface code once and have it run across multiple platforms.

In this guide, we'll take you through the process of creating a simple .NET MAUI application that uses the Label and Entry views. We'll set up basic routing, build the application, and explain the data flow step-by-step.

Prerequisites

  1. Visual Studio 2022: Ensure you have the latest version of Visual Studio installed with the .NET MAUI workload.
  2. .NET SDK: Make sure you have the .NET 6 SDK or higher installed.
  3. Android/iOS Emulators or Devices: To deploy and test your application.

Step 1: Create a New .NET MAUI Project

  1. Open Visual Studio 2022.
  2. Select Create a new project.
  3. Choose .NET MAUI App (Preview), then click Next.
  4. Configure your project:
    • Project Name: MyMAUIApp
    • Location: Your preferred directory.
    • Framework: .NET 6 (or higher).
  5. Click Create to generate the project.

Step 2: Add Views to the Page

  1. Open the MainPage.xaml file in the MyMAUIApp project.
  2. Replace the existing XAML code with the following:
<?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="Hello .NET MAUI">
    <StackLayout Margin="20">
        <Label Text="Enter your name:" FontSize="Medium" />
        <Entry x:Name="NameEntry" Placeholder="Name" FontSize="Medium" VerticalOptions="EndAndExpand" />
        <Button Text="Submit" Clicked="SubmitButton_Clicked" FontSize="Medium" Margin="0,20,0,0"/>
        <Label x:Name="GreetingLabel" FontSize="Large" FontAttributes="Bold" Margin="0,20,0,0"/>
    </StackLayout>
</ContentPage>

Step 3: Implement Logic in Code-Behind

  1. Open MainPage.xaml.cs.
  2. Implement the SubmitButton_Clicked method:
namespace MyMAUIApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void SubmitButton_Clicked(object sender, EventArgs e)
    {
        string name = NameEntry.Text;
        if (!string.IsNullOrWhiteSpace(name))
        {
            GreetingLabel.Text = $"Hello, {name}!";
        }
        else
        {
            GreetingLabel.Text = "Please enter your name.";
        }
    }
}

Step 4: Understand Data Flow

  1. User Interaction:

    • The user types their name into the Entry field.
    • Clicking the "Submit" button triggers the SubmitButton_Clicked event handler.

  2. Event Handling:

    • The event handler retrieves the text entered in the NameEntry.
    • It checks if the name is not null or whitespace.
    • If valid, it updates the GreetingLabel to display a personalized greeting.

Step 5: Setting Up Routing

  1. Open App.xaml.cs.
  2. Define a route for the MainPage:
using Microsoft.Maui.Controls;

namespace MyMAUIApp;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        Routing.RegisterRoute(nameof(MainPage), typeof(MainPage));

        MainPage = new AppShell();
    }
}

Step 6: Create AppShell

  1. Open AppShell.xaml.
  2. Update the AppShell.xaml to include a ContentPage that navigates to the MainPage:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="MyMAUIApp.AppShell">
    
    <ShellContent Title="Home"
                  ContentTemplate="{DataTemplate local:MainPage}"
                  Route="MainPage" />
</Shell>

Step 7: Build and Run the Application

  1. Select your target device (e.g., an emulator or a physical device).
  2. Click Start to build and deploy the application.
  3. Once deployed, enter your name in the Entry box and click the "Submit" button.
  4. Verify that the Label updates with the personalized greeting.

Summary

In this guide, you learned how to set up a basic .NET MAUI application using Label and Entry views, define routing, and understand the data flow. From creating the project to deploying the app, we covered all the essential steps to get you started with .NET MAUI development.

Feel free to explore more features and views provided by .NET MAUI to enhance your applications further. Happy coding!

Top 10 Questions and Answers on .NET MAUI Views: Label and Entry

1. What is a Label in .NET MAUI, and how can I use it to display text?

Answer: A Label in .NET MAUI is a view used to display text. It can be used for various purposes such as headings, instructions, and displaying dynamic content. Here’s a simple example of how to create a Label in XAML:

<Label Text="Welcome to .NET MAUI!" 
       FontSize="Title" 
       TextColor="Blue" 
       HorizontalOptions="Center" 
       VerticalOptions="Center"/>

In code-behind, you can create a Label like this:

Label myLabel = new Label
{
    Text = "Welcome to .NET MAUI!",
    FontSize = 24,
    TextColor = Colors.Blue,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
};

2. How do I format text within a Label using .NET MAUI?

Answer: .NET MAUI provides several properties to format text within a Label. You can customize the FontSize, FontFamily, TextColor, and more. Additionally, you can use FormattedText for more advanced formatting, including different font styles and colors within the same Label.

Here is an example of using FormattedText:

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Hello " ForegroundColor="Black"/>
            <Span Text="World" FontAttributes="Bold" ForegroundColor="Blue"/>
            <Span Text="!" FontAttributes="Italic" ForegroundColor="Red"/>
        </FormattedString>
    </Label.FormattedText>
</Label>

3. What is an Entry in .NET MAUI, and how do I use it for user input?

Answer: An Entry in .NET MAUI is a single-line text entry box in which users can type text. It’s commonly used to capture input in login forms, search boxes, and other scenarios where you need to gather text input from users.

Here’s an example of how to create an Entry in XAML:

<Entry Placeholder="Enter your name" 
       PlaceholderColor="Gray" 
       Keyboard="Text" 
       MaxLength="20" 
       Completed="Entry_Completed"/>

In code-behind, you can create an Entry like this:

Entry myEntry = new Entry
{
    Placeholder = "Enter your name",
    PlaceholderColor = Colors.Gray,
    Keyboard = Keyboard.Text,
    MaxLength = 20
};
myEntry.Completed += Entry_Completed;

4. How can I handle the completion of an Entry in .NET MAUI?

Answer: You can handle the completion of an Entry (when the user taps the return or done button) by subscribing to the Completed event. This is useful for validating input or proceeding with a process after the user has finished entering text.

Here’s an example in XAML:

<Entry Placeholder="Enter your name" 
       Completed="Entry_Completed"/>

And the code-behind method:

private void Entry_Completed(object sender, EventArgs e)
{
    Entry entry = sender as Entry;
    if (entry != null)
    {
        string enteredText = entry.Text;
        Console.WriteLine($"The user entered: {enteredText}");
    }
}

5. Can I style the Entry to change its appearance?

Answer: Yes, you can style an Entry in .NET MAUI to change its appearance by setting properties such as TextColor, BackgroundColor, PlaceholderColor, BorderBrush, BorderWidth, and more. You can also apply custom styles in XAML or use CSS. Here’s an example of styling an Entry in XAML:

<Entry Placeholder="Enter your name" 
       TextColor="Black" 
       BackgroundColor="LightGray" 
       PlaceholderColor="Gray" 
       BorderBrush="Black" 
       BorderWidth="1"/>

6. How can I make an Entry read-only or disable it in .NET MAUI?

Answer: To make an Entry read-only or disable it in .NET MAUI, you can use the IsReadOnly and IsEnabled properties respectively. Setting IsReadOnly to true allows the user to select and copy the text but not modify it. Setting IsEnabled to false disables user interaction with the control.

Here’s an example:

<Entry Text="This is read-only text" IsReadOnly="True"/>
<Entry Text="This entry is disabled" IsEnabled="False"/>

In code-behind:

Entry readOnlyEntry = new Entry { Text = "This is read-only text", IsReadOnly = true };
Entry disabledEntry = new Entry { Text = "This entry is disabled", IsEnabled = false };

7. How can I validate input in an Entry control in .NET MAUI?

Answer: You can validate the input in an Entry control in various ways depending on the requirements. A common approach is to subscribe to the TextChanged or Completed event to perform validation as the user types or when they finish editing.

Here’s an example of validating email input in the TextChanged event:

<Entry Placeholder="Enter your email" 
       TextChanged="EmailEntry_TextChanged"/>

And the code-behind method:

private void EmailEntry_TextChanged(object sender, TextChangedEventArgs e)
{
    bool isValid = IsValidEmail(e.NewTextValue);
    if (isValid)
    {
        // Perform actions if the email is valid
    }
    else
    {
        // Show error message or highlight the Entry
    }
}

private bool IsValidEmail(string email)
{
    try
    {
        var addr = new System.Net.Mail.MailAddress(email);
        return addr.Address == email;
    }
    catch
    {
        return false;
    }
}

8. Can I use an Entry with a password mask or placeholder text in .NET MAUI?

Answer: Yes, you can use an Entry with a password mask for password input and set placeholder text to provide a hint about the expected input. To use a password mask, set the IsPassword property to true. Placeholder text is set using the Placeholder property.

Here’s an example:

<Entry Placeholder="Enter your password" 
       IsPassword="True" 
       PlaceholderColor="Gray"/>

9. How do I handle the Enter key or submit button in an Entry control in .NET MAUI?

Answer: To handle the Enter key or submit button in an Entry control, you can subscribe to the Completed event. This event is triggered when the user finishes entering text and presses the return, done, or go button on the on-screen keyboard.

Here’s an example:

<Entry Placeholder="Search..." 
       Completed="SearchEntry_Completed"/>

And the code-behind method:

private void SearchEntry_Completed(object sender, EventArgs e)
{
    Entry searchEntry = sender as Entry;
    string searchQuery = searchEntry?.Text;
    Console.WriteLine($"User searched for: {searchQuery}");
    PerformSearch(searchQuery);
}

10. Can I use Binding to display dynamic content in a Label or Entry in .NET MAUI?

Answer: Yes, you can use data binding to display dynamic content in a Label or Entry in .NET MAUI. Binding allows you to connect the UI to the underlying data model, making it easy to update the UI when the data changes and vice versa.

Here’s an example of binding to a Label:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">

    <ContentPage.BindingContext>
        <local:MainViewModel/>
    </ContentPage.BindingContext>

    <StackLayout>
        <Label Text="{Binding WelcomeMessage}" 
               FontSize="Title" 
               TextColor="Blue" 
               HorizontalOptions="Center" 
               VerticalOptions="Center"/>
    </StackLayout>
</ContentPage>

And the corresponding ViewModel:

public class MainViewModel
{
    public string WelcomeMessage { get; set; } = "Welcome to .NET MAUI!";
}

For an Entry, binding works similarly:

<Entry Text="{Binding UserName, Mode=TwoWay}" 
       Placeholder="Enter your name" 
       PlaceholderColor="Gray"/>

In the ViewModel:

public class MainViewModel : INotifyPropertyChanged
{
    private string _userName;

    public string UserName
    {
        get => _userName;
        set
        {
            if (_userName != value)
            {
                _userName = value;
                OnPropertyChanged(nameof(UserName));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

These are some of the common questions and answers related to Label and Entry views in .NET MAUI. Mastering these can greatly enhance your ability to build dynamic and responsive UIs.