MAUI Basic Controls Tutorial - MSDN Documentation

Mastering Basic Controls in .NET MAUI

Welcome to the essential guide to using basic controls in .NET MAUI. These building blocks are fundamental to creating interactive and user-friendly mobile and desktop applications.

Understanding Core Controls

The .NET MAUI toolkit provides a rich set of controls for building your user interface. This tutorial focuses on some of the most commonly used ones:

Label

The Label control displays plain text. It's versatile and can be used for titles, descriptions, or any informational text.

Example: Displaying Text

Message:

<Label Text="Hello, MAUI!" />

Button

The Button control triggers an action when tapped or clicked. It's a primary way to enable user interaction.

Example: Simple Button

<Button Text="Click Me" Clicked="OnButtonClicked" />

Entry

The Entry control provides a single-line text input field for users to enter data.

Example: User Input

Enter your name:

<Entry Placeholder="Your Name" />

Editor

Similar to Entry, but Editor allows for multi-line text input, making it suitable for longer text entries like notes or comments.

Example: Multi-line Input

Your Comment:

<Editor Placeholder="Enter your comment here..." />

Image

Display images in your application using the Image control. You can load images from various sources, including local assets and remote URLs.

Example: Displaying an Image

<Image Source="my_image.png" />
<Image Source="https://example.com/remote-image.jpg" />

Key Properties and Events

Each control comes with a set of properties you can set to customize its appearance and behavior, and events you can handle to respond to user interactions.

Text/Content: The primary data displayed by the control (e.g., Label.Text, Button.Text).
IsEnabled: Controls whether the control can respond to user interaction.
IsVisible: Controls whether the control is displayed on the screen.
Clicked/Tapped: Events often triggered by user interaction with buttons or other tappable elements.
TextChanged: An event for input controls (like Entry and Editor) that fires when the text changes.

Next Steps

Now that you're familiar with the basic controls, explore how to combine them with layouts to build more complex user interfaces. Move on to the Layouts tutorial to learn more.