Xamarin.Forms Esercitazione su etichetta

Articolo
Developer (Principiante)
7 minuti per il completamento

Prima di provare questa esercitazione è necessario avere completato correttamente:

Creare la prima Xamarin.Forms guida introduttiva all'app .
Esercitazione su StackLayout.

In questa esercitazione apprenderai a:

Creare un Xamarin.FormsLabel oggetto in XAML.
Modificare l'aspetto dell'elemento Label.
Presentare testo, in una singola classe Label, con più formati.

Si userà Visual Studio 2019 o Visual Studio per Mac per creare un'applicazione semplice che dimostri come visualizzare il testo in un oggetto Label. Gli screenshot seguenti illustrano l'applicazione finale:

Userai anche Ricaricamento rapido XAML per Xamarin.Forms visualizzare le modifiche dell'interfaccia utente senza ricompilare l'applicazione.

Creare un'etichetta

6 minuti rimanenti

Visual Studio
Visual Studio per Mac

Per completare questa esercitazione è necessario Visual Studio 2019 (la versione più recente) con installato il carico di lavoro Sviluppo di applicazioni per dispositivi mobili con .NET. È inoltre necessario un Mac associato per compilare l'applicazione dell'esercitazione per iOS. Per informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin. Per informazioni sulla connessione di Visual Studio 2019 a un host di compilazione Mac, vedere Associa a Mac per lo sviluppo di Xamarin.iOS.

Avviare Visual Studio e creare una nuova app vuota Xamarin.Forms denominata LabelTutorial.

Importante

I frammenti di codice C# e XAML di questa esercitazione richiedono che la soluzione sia denominata LabelTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.

Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazioneXamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
In Esplora soluzioni, nel progetto LabelTutorial, fare doppio clic su MainPage.xaml per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:
```
<?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>
```
Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un Label in uno StackLayout. La proprietà Label.Text specifica il testo visualizzato e la proprietà HorizontalOptions consente di specificare che il controllo Label verrà centrato in senso orizzontale.
Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto:

Per completare questa esercitazione è necessario Visual Studio per Mac, la versione più recente, con installato il supporto della piattaforma Android e iOS. Sarà necessario anche Xcode, la versione più recente. Per altre informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin.

Avviare Visual Studio per Mac e creare una nuova app vuota Xamarin.Forms denominata LabelTutorial.

Importante

I frammenti di codice C# e XAML di questa esercitazione richiedono che la soluzione sia denominata LabelTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.

Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazioneXamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
Nel riquadro della soluzione, nel progetto LabelTutorial, fare doppio clic su MainPage.xaml per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:
```
<?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>
```
Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un Label in uno StackLayout. La proprietà Label.Text specifica il testo visualizzato e la proprietà HorizontalOptions consente di specificare che il testo verrà centrato in senso orizzontale.
Nella barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:

Salvare aspetto

4 minuti rimanenti

Visual Studio
Visual Studio per Mac

In MainPage.xaml modificare la dichiarazione Label per modificarne l'aspetto visivo:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Questo codice imposta le proprietà che modificano l'aspetto visivo di Label. La proprietà TextColor imposta il colore del testo di Label. La proprietà FontAttributes imposta il carattere dell'etichetta su corsivo e la proprietà FontSize imposta le dimensioni del carattere. Viene anche applicata una decorazione di sottolineatura del testo a Label impostando la relativa proprietà TextDecorations e il testo viene centrato orizzontalmente tramite l'impostazione della proprietà HorizontalOptions su Center.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto. Si noti che l'aspetto di Label è stato modificato:

Per altre informazioni sull'impostazione dell'aspetto Label , vedere la guida alle Xamarin.Forms etichette .

In MainPage.xaml modificare la dichiarazione Label per modificarne l'aspetto visivo:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Questo codice imposta le proprietà che modificano l'aspetto visivo di Label. La proprietà TextColor imposta il colore del testo di Label. La proprietà FontAttributes imposta il carattere dell'etichetta su corsivo e la proprietà FontSize imposta le dimensioni del carattere. Viene anche applicata una decorazione di sottolineatura del testo a Label impostando la relativa proprietà TextDecorations e il testo viene centrato orizzontalmente tramite l'impostazione della proprietà HorizontalOptions su Center.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto. Si noti che l'aspetto di Label è stato modificato:

Per altre informazioni sull'impostazione dell'aspetto Label , vedere la guida alle Xamarin.Forms etichette .

Presentare testo formattato

2 minuti rimanenti

Visual Studio
Visual Studio per Mac

In MainPage.xaml modificare la dichiarazione Label per visualizzare testo in più formati in una singola classe Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Questo codice visualizza il testo in una singola classe Label con più formati. Il testo nella prima classe Span è visualizzato con la formattazione impostata nella classe Label, mentre il testo nella seconda e terza istanza di Span è visualizzato con la formattazione impostata nella classe Label e la formattazione aggiuntiva impostata in ogni Span.

Nota

La proprietà FormattedText è di tipo FormattedString che comprende una o più istanze di Span.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto. Si noti che l'aspetto di Label è stato modificato:

In Visual Studio arrestare l'applicazione.

Per altre informazioni sull'impostazione dell'aspetto Span , vedere Testo formattato nella Xamarin.Forms guida Etichetta .

In MainPage.xaml modificare la dichiarazione Label per visualizzare testo in più formati in una singola classe Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Questo codice visualizza il testo in una singola classe Label con più formati. Il testo nella prima classe Span è visualizzato con la formattazione impostata nella classe Label, mentre il testo nella seconda e terza istanza di Span è visualizzato con la formattazione impostata nella classe Label e la formattazione aggiuntiva impostata in ogni Span.

Nota

La proprietà FormattedText è di tipo FormattedString che comprende una o più istanze di Span.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto. Si noti che l'aspetto di Label è stato modificato:

In Visual Studio per Mac arrestare l'applicazione.

Per altre informazioni sull'impostazione dell'aspetto Span , vedere Testo formattato nella Xamarin.Forms guida Etichetta .

Xamarin.Forms Esercitazione su etichetta

Creare un'etichetta

Salvare aspetto

Presentare testo formattato

Congratulazioni!

Passaggi successivi

Xamarin.Forms Esercitazione su etichetta

Creare un'etichetta

Salvare aspetto

Presentare testo formattato

Congratulazioni!

Passaggi successivi

Collegamenti correlati