Display Controls

Learn about the various display controls available in .NET MAUI for presenting information to your users. These controls are fundamental for building rich and interactive user interfaces across multiple platforms.

Key Display Controls

The .NET MAUI display controls are designed for showcasing content. They range from simple text and images to more complex views like rich text and media.

Label

The Label control is used to display lines of text. It supports basic text formatting, multiple lines, and text wrapping.

Properties

Property Description Default
Text The text to display. Empty string
TextColor The color of the text. System default
FontSize The size of the font. System default
FontAttributes Specifies whether the text is bold, italic, or both. FontAttributes.None
HorizontalTextAlignment The horizontal alignment of the text within the label. TextAlignment.Start
VerticalTextAlignment The vertical alignment of the text within the label. TextAlignment.Center

Example

XAML Example

<Label Text="Hello, MAUI!"
                   TextColor="Blue"
                   FontSize="24"
                   HorizontalTextAlignment="Center" />

C# Example

var label = new Label
            {
                Text = "Hello, MAUI!",
                TextColor = Colors.Blue,
                FontSize = 24,
                HorizontalTextAlignment = TextAlignment.Center
            };

Image

The Image control displays an image. It can load images from various sources, including local files, embedded resources, and network URIs.

Properties

Property Description
Source The source of the image (e.g., ImageSource.FromFile("my_image.png"), ImageSource.FromUri(...)).
Aspect How the image should be scaled to fit its container (e.g., Aspect.AspectFit, Aspect.AspectFill).

Example

XAML Example

<Image Source="dotnet_bot.png"
                   Aspect="AspectFit"
                   HeightRequest="200" />

C# Example

var image = new Image
            {
                Source = ImageSource.FromFile("dotnet_bot.png"),
                Aspect = Aspect.AspectFit,
                HeightRequest = 200
            };

WebView

The WebView control allows you to display web content within your MAUI application. This is useful for embedding web pages, complex HTML content, or using web-based UI frameworks.

Properties

Property Description
Source The URL or HTML content to load.

Example

XAML Example

<WebView Source="https://docs.microsoft.com/en-us/dotnet/maui/"
                     VerticalOptions="FillAndExpand" />

C# Example

var webView = new WebView
            {
                Source = new UrlWebViewSource { Url = "https://docs.microsoft.com/en-us/dotnet/maui/" },
                VerticalOptions = LayoutOptions.FillAndExpand
            };

ActivityIndicator

The ActivityIndicator control displays an animation to indicate that an application is performing an operation (e.g., downloading data).

Properties

Property Description Default
IsRunning A boolean value indicating whether the activity indicator is animating. false
Color The color of the activity indicator. System default

Example

XAML Example

<ActivityIndicator IsRunning="True"
                           Color="Green" />

C# Example

var activityIndicator = new ActivityIndicator
            {
                IsRunning = true,
                Color = Colors.Green
            };

Next Steps

Explore how to combine these display controls with layout controls to create sophisticated user interfaces. Refer to the Layout Controls section for more details.

© 2023 Microsoft Corporation. All rights reserved.