.Net Maui Views Label Entry Complete Guide

 Last Update:2025-06-23T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    8 mins read      Difficulty-Level: beginner

Understanding the Core Concepts of .NET MAUI Views Label, Entry

.NET MAUI Views: Label and Entry

Overview

.NET Multi-platform App UI (MAUI) is a cross-platform framework for building modern, device-specific apps for Windows, iOS, macOS, Android, and Tizen using C# and the .NET runtime. One of the fundamental aspects of building UIs in .NET MAUI is understanding and utilizing various views. Two of the most basic and important views are the Label and the Entry. This guide delves into each view, including their properties, events, and usage scenarios.

Label View

Label is a view used to display text in your application. It is highly customizable and can be used for titles, headers, descriptions, and more.

Properties:

  1. Text: Sets the text content of the label.
  2. FontAttributes: Adjusts the font style (Bold, Italic, None).
  3. FontSize: Defines the size of the font.
  4. FontFamily: Specifies the font family.
  5. TextColor: Sets the color of the text.
  6. TextTransform: Transforms text case (None, Uppercase, Lowercase).
  7. LineBreakMode: Specifies how text should be broken to fit the layout (WordWrap, CharacterWrap, HeadTruncation, MiddleTruncation, TailTruncation, NoWrap).
  8. HorizontalTextAlignment: Aligns text horizontally (Start, Center, End).
  9. VerticalTextAlignment: Aligns text vertically (Start, Center, End).

Events:

  • TextChanged: Triggered when the text of the label changes.

Usage Example:

<Label Text="Welcome to .NET MAUI!"
       FontSize="20"
       TextColor="Blue"
       HorizontalTextAlignment="Center"/>

Entry View

Entry is a view used to accept text input from the user. It can be used for single-line text like usernames, passwords, and other short text entries.

Properties:

  1. Text: Sets and gets the text input by the user.
  2. Placeholder: Sets a placeholder text that appears when the entry is empty.
  3. PlaceholderColor: Sets the color of the placeholder text.
  4. TextColor: Sets the color of the user input text.
  5. FontSize: Sets the font size of the text.
  6. FontFamily: Specifies the font family.
  7. FontAttributes: Adjusts the font style (Bold, Italic, None).
  8. IsPassword: Masks the input text, commonly used for passwords.
  9. IsReadOnly: Prevents user modification of the text.
  10. Keyboard: Sets the keyboard layout for the entry (Text, Chat, Email, Numeric, Phone, Url, Custom).
  11. ReturnType: Sets the return key type on the on-screen keyboard (Default, Go, Google, Join, Next, Route, Search, Send, Done, EmergencyCall).
  12. ReturnCommand: Binds a command to the return key press.
  13. ReturnTypeParameter: Additional parameter for some return key types.
  14. HorizontalTextAlignment: Aligns text horizontally (Start, Center, End).

Events:

  • TextChanged: Triggered when the text changes.
  • Completed: Triggered when the user finishes editing and presses the return key.

Usage Example:

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement .NET MAUI Views Label, Entry

Prerequisites:

  • .NET 6 SDK or higher installed.
  • Visual Studio 2022 or later (with .NET MAUI Workload).
  • Basic understanding of C# and XAML.

Step 1: Create a New .NET MAUI Project

  1. Open Visual Studio.

  2. Create a new project and select ".NET MAUI App".

  3. Configure your project:

    • Name: MauiLabelEntryApp
    • Location: Choose a folder to save your project.
    • Framework: .NET 6 or higher.

  4. Click "Create".

Step 2: Use the Label View

The Label control displays a single line or multiple lines of read-only text.

XAML Approach:

Open the MainPage.xaml file and modify it to include a Label:

<?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="MauiLabelEntryApp.MainPage">

    <StackLayout Padding="20,40,20,20" BackgroundColor="#f0f0f0">
        <Label Text="Welcome to .NET MAUI!"
               FontSize="Title"
               HorizontalTextAlignment="Center"
               TextColor="#333"
               Margin="0,10,0,10"
               BackgroundColor="LightGray"
               CornerRadius="10"
               Padding="10"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="StartAndExpand" />

        <!-- Other UI elements to be added here -->
    </StackLayout>
</ContentPage>

Code-Behind Approach:

You can also set the Label properties in MainPage.xaml.cs:

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

            Label welcomeLabel = new Label
            {
                Text = "Welcome to .NET MAUI!",
                FontSize = Device.GetNamedSize(NamedSize.Title, typeof(Label)),
                HorizontalTextAlignment = TextAlignment.Center,
                TextColor = Color.FromHex("#333"),
                Margin = new Thickness(0, 10, 0, 10),
                BackgroundColor = Color.LightGray,
                CornerRadius = 10,
                Padding = 10,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.StartAndExpand
            };

            Content = new StackLayout
            {
                Padding = 20,
                BackgroundColor = Color.FromHex("#f0f0f0"),
                Children = { welcomeLabel }
            };
        }
    }
}

Step 3: Use the Entry View

The Entry control is a single-line text editing control that users can interact with to enter text.

XAML Approach:

Add an Entry control in MainPage.xaml:

<?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="MauiLabelEntryApp.MainPage">

    <StackLayout Padding="20,40,20,20" BackgroundColor="#f0f0f0">
        <Label Text="Welcome to .NET MAUI!"
               FontSize="Title"
               HorizontalTextAlignment="Center"
               TextColor="#333"
               Margin="0,10,0,10"
               BackgroundColor="LightGray"
               CornerRadius="10"
               Padding="10"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="StartAndExpand" />

        <Entry Placeholder="Enter your name here"
               PlaceholderColor="#999"
               Text=""
               FontSize="Medium"
               BackgroundColor="White"
               CornerRadius="10"
               Padding="10"
               Margin="0,10,0,10" />
    </StackLayout>
</ContentPage>

Code-Behind Approach:

Add an Entry control in MainPage.xaml.cs:

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

            Label welcomeLabel = new Label
            {
                Text = "Welcome to .NET MAUI!",
                FontSize = Device.GetNamedSize(NamedSize.Title, typeof(Label)),
                HorizontalTextAlignment = TextAlignment.Center,
                TextColor = Color.FromHex("#333"),
                Margin = new Thickness(0, 10, 0, 10),
                BackgroundColor = Color.LightGray,
                CornerRadius = 10,
                Padding = 10,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.StartAndExpand
            };

            Entry nameEntry = new Entry
            {
                Placeholder = "Enter your name here",
                PlaceholderColor = Color.FromHex("#999"),
                Text = "",
                FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                BackgroundColor = Color.White,
                CornerRadius = 10,
                Padding = 10,
                Margin = new Thickness(0, 10, 0, 10)
            };

            Content = new StackLayout
            {
                Padding = 20,
                BackgroundColor = Color.FromHex("#f0f0f0"),
                Children = { welcomeLabel, nameEntry }
            };
        }
    }
}

Step 4: Handling Entry Input (Optional)

You can handle the input from the Entry field and update the Label accordingly.

XAML Approach:

<?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="MauiLabelEntryApp.MainPage">

    <StackLayout Padding="20,40,20,20" BackgroundColor="#f0f0f0">
        <Label x:Name="welcomeLabel"
               Text="Welcome to .NET MAUI!"
               FontSize="Title"
               HorizontalTextAlignment="Center"
               TextColor="#333"
               Margin="0,10,0,10"
               BackgroundColor="LightGray"
               CornerRadius="10"
               Padding="10"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="StartAndExpand" />

        <Entry x:Name="nameEntry"
               Placeholder="Enter your name here"
               PlaceholderColor="#999"
               Text=""
               FontSize="Medium"
               BackgroundColor="White"
               CornerRadius="10"
               Padding="10"
               Margin="0,10,0,10"
               Completed="NameEntry_Completed" />
    </StackLayout>
</ContentPage>

Add the event handler in MainPage.xaml.cs:

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

        private void NameEntry_Completed(object sender, EventArgs e)
        {
            string name = nameEntry.Text;
            if (!string.IsNullOrEmpty(name))
            {
                welcomeLabel.Text = $"Hello, {name}! Welcome to .NET MAUI!";
            }
        }
    }
}

Code-Behind Approach:

namespace MauiLabelEntryApp
{
    public partial class MainPage : ContentPage
    {
        Label welcomeLabel;
        Entry nameEntry;

        public MainPage()
        {
            InitializeComponent();

            welcomeLabel = new Label
            {
                Text = "Welcome to .NET MAUI!",
                FontSize = Device.GetNamedSize(NamedSize.Title, typeof(Label)),
                HorizontalTextAlignment = TextAlignment.Center,
                TextColor = Color.FromHex("#333"),
                Margin = new Thickness(0, 10, 0, 10),
                BackgroundColor = Color.LightGray,
                CornerRadius = 10,
                Padding = 10,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.StartAndExpand
            };

            nameEntry = new Entry
            {
                Placeholder = "Enter your name here",
                PlaceholderColor = Color.FromHex("#999"),
                Text = "",
                FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                BackgroundColor = Color.White,
                CornerRadius = 10,
                Padding = 10,
                Margin = new Thickness(0, 10, 0, 10)
            };

            nameEntry.Completed += NameEntry_Completed;

            Content = new StackLayout
            {
                Padding = 20,
                BackgroundColor = Color.FromHex("#f0f0f0"),
                Children = { welcomeLabel, nameEntry }
            };
        }

        private void NameEntry_Completed(object sender, EventArgs e)
        {
            string name = nameEntry.Text;
            if (!string.IsNullOrEmpty(name))
            {
                welcomeLabel.Text = $"Hello, {name}! Welcome to .NET MAUI!";
            }
        }
    }
}

Step 5: Run Your Application

  1. Select the target platform (e.g., Android, iOS, etc.).
  2. Click the "Run" button (F5) or use the "Start Debugging" option.

Conclusion

You have now created a basic .NET MAUI application that includes Label and Entry views. You can further explore other controls and their functionalities to build more complex applications.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.