Xamarin.Forms Label Tutorial

Artikkeli
Developer (Beginner)
7 minutes to complete

Before attempting this tutorial, you should have successfully completed the:

Build your first Xamarin.Forms app quickstart.
StackLayout tutorial.

In this tutorial, you learn how to:

Create a Xamarin.Forms Label in XAML.
Change the appearance of the Label.
Present text, in a single Label, that has multiple formats.

You will use Visual Studio 2019, or Visual Studio for Mac, to create a simple application that demonstrates how to display text in a Label. The following screenshots show the final application:

You'll also use XAML Hot Reload for Xamarin.Forms to see UI changes without rebuilding your application.

Create a label

6 minutes remaining

Visual Studio
Visual Studio for Mac

To complete this tutorial you should have Visual Studio 2019 (latest release), with the Mobile development with .NET workload installed. In addition, you will require a paired Mac to build the tutorial application on iOS. For information about installing the Xamarin platform, see Installing Xamarin. For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Launch Visual Studio, and create a new blank Xamarin.Forms app named LabelTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named LabelTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.
In Solution Explorer, in the LabelTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 x:Class="LabelTutorial.MainPage">
 <StackLayout Margin="20,35,20,20">
 <Label Text="Welcome to Xamarin.Forms!"
 HorizontalOptions="Center" />
 </StackLayout>
</ContentPage>
```
This code declaratively defines the user interface for the page, which consists of a Label in a StackLayout. The Label.Text property specifies the text that is displayed, and the HorizontalOptions property specifies that the Label will be horizontally centered.
In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator:

To complete this tutorial you should have Visual Studio for Mac (latest release), with iOS and Android platform support installed. In addition, you will also require Xcode (latest release). For more information about installing the Xamarin platform, see Installing Xamarin.

Launch Visual Studio for Mac, and create a new blank Xamarin.Forms app named LabelTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named LabelTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.
In Solution Pad, in the LabelTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 x:Class="LabelTutorial.MainPage">
 <StackLayout Margin="20,35,20,20">
 <Label Text="Welcome to Xamarin.Forms!"
 HorizontalOptions="Center" />
 </StackLayout>
</ContentPage>
```
This code declaratively defines the user interface for the page, which consists of a Label in a StackLayout. The Label.Text property specifies the text that is displayed, and the HorizontalOptions property specifies that the text will be horizontally centered.
In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

Change appearance

4 minutes remaining

Visual Studio
Visual Studio for Mac

In MainPage.xaml, modify the Label declaration to change its visual appearance:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
This code sets properties that change the visual appearance of the Label. The TextColor property sets the color of the Label text. The FontAttributes property sets the font for the label to italic, and the FontSize property sets the font size. In addition, an underline text decoration is applied to the Label by setting its TextDecorations property, and it's horizontally centered by setting the HorizontalOptions property to Center.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator. Observe that the Label appearance has changed:

For more information about setting Label appearance, see the Xamarin.Forms Label guide.

In MainPage.xaml, modify the Label declaration to change its visual appearance:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
This code sets properties that change the visual appearance of the Label. The TextColor property sets the color of the Label text. The FontAttributes property sets the font for the label to italic, and the FontSize property sets the font size. In addition, an underline text decoration is applied to the Label by setting its TextDecorations property, and it's horizontally centered by setting the HorizontalOptions property to Center.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator. Observe that the Label appearance has changed:

For more information about setting Label appearance, see the Xamarin.Forms Label guide.

Present formatted text

2 minutes remaining

Visual Studio
Visual Studio for Mac

In MainPage.xaml, modify the Label declaration to present text that uses multiple formats, in a single Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
This code displays text, in a single Label, that uses multiple formats. The text in the first Span is displayed using the formatting set on the Label, while the text in the second and third Span instances is displayed using the formatting set on the Label and the additional formatting set on each Span.

Note

The FormattedText property is of type FormattedString, which comprises one or more Span instances.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator. Observe that the Label appearance has changed:

In Visual Studio, stop the application.

For more information about setting Span appearance, see Formatted text in the Xamarin.Forms Label guide.

In MainPage.xaml, modify the Label declaration to present text that uses multiple formats, in a single Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
This code displays text, in a single Label, that uses multiple formats. The text in the first Span is displayed using the formatting set on the Label, while the text in the second and third Span instances is displayed using the formatting set on the Label and the additional formatting set on each Span.

Note

The FormattedText property is of type FormattedString, which comprises one or more Span instances.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator. Observe that the Label appearance has changed:

In Visual Studio for Mac, stop the application.

For more information about setting Span appearance, see Formatted text in the Xamarin.Forms Label guide.

Xamarin.Forms Label Tutorial

Create a label

Change appearance

Present formatted text

Congratulations!

Next steps

Xamarin.Forms Label Tutorial

Create a label

Change appearance

Present formatted text

Congratulations!

Next steps

Related links