Xamarin.Forms Tutorial de rótulo

Artigo
Developer (Iniciante)
7 minutos para concluir

Antes de tentar realizar este tutorial, você deve ter concluído com sucesso:

Crie seu primeiro Xamarin.Forms início rápido de aplicativo .
Tutorial de StackLayout.

Neste tutorial, você aprenderá a:

Crie um Xamarin.FormsLabel em XAML.
Alterar a aparência do Label.
Apresentar o texto, em um único Label, que tenha vários formatos.

Você usará o Visual Studio 2019 ou Visual Studio para Mac para criar um aplicativo simples que demonstra como exibir texto em um Label. Estas capturas de tela mostram o aplicativo final:

Você também usará Recarga Dinâmica XAML para Xamarin.Forms ver as alterações da interface do usuário sem recompilar seu aplicativo.

Criar um rótulo

6 minutos restantes

Visual Studio
Visual Studio para Mac

Para concluir este tutorial, você precisará ter o Visual Studio 2019 (versão mais recente) com a carga de trabalho Desenvolvimento mobile com .NET instalada. Além disso, você precisará de um Mac emparelhado para compilar o aplicativo do tutorial no iOS. Para obter informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin. Para obter informações sobre como conectar o Visual Studio 2019 a um host de build Mac, confira Emparelhar com o Mac para desenvolvimento no Xamarin.iOS.

Inicie o Visual Studio e crie um novo aplicativo em branco Xamarin.Forms chamado LabelTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada LabelTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.
No Gerenciador de Soluções, no projeto LabelTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:
```
<?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>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Label em um StackLayout. A propriedade Label.Text especifica o texto que é exibido e a propriedade HorizontalOptions especifica que o Label será horizontalmente centralizado.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador remoto de iOS ou do Android Emulator escolhido:

Para concluir este tutorial, você precisará ter o Visual Studio para Mac (versão mais recente), com suporte para plataforma iOS e Android, instalado. Além disso, você também precisará do Xcode (versão mais recente). Para obter mais informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin.

Inicie o Visual Studio para Mac e crie um novo aplicativo em branco Xamarin.Forms chamado LabelTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada LabelTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.
No Painel de Soluções, no projeto LabelTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:
```
<?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>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Label em um StackLayout. A propriedade Label.Text especifica o texto que é exibido e a propriedade HorizontalOptions especifica que o texto seja centralizado horizontalmente.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Alterar a aparência

4 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Label para alterar sua aparência visual:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Esse código define propriedades que alteram a aparência visual do Label. A propriedade TextColor define a cor do texto Label. A propriedade FontAttributes define a fonte do rótulo como itálico e a propriedade FontSize define o tamanho da fonte. Além disso, uma decoração de texto sublinhado é aplicada ao Label definindo sua propriedade TextDecorations e ele é centralizado horizontalmente definindo a propriedade HorizontalOptions como Center.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador remoto de iOS ou do Android Emulator de sua preferência. Observe que a aparência de Label mudou:

Para obter mais informações sobre como definir Label a aparência, consulte o Xamarin.Forms guia Rótulo .

Em MainPage.xaml, modifique a declaração Label para alterar sua aparência visual:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Esse código define propriedades que alteram a aparência visual do Label. A propriedade TextColor define a cor do texto Label. A propriedade FontAttributes define a fonte do rótulo como itálico e a propriedade FontSize define o tamanho da fonte. Além disso, uma decoração de texto sublinhado é aplicada ao Label definindo sua propriedade TextDecorations e ele é centralizado horizontalmente definindo a propriedade HorizontalOptions como Center.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio para Mac, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador de iOS ou do Android Emulator de sua preferência. Observe que a aparência de Label mudou:

Para obter mais informações sobre como definir Label a aparência, consulte o Xamarin.Forms guia Rótulo .

Apresentar texto formatado

2 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Label para apresentar texto que usa vários formatos, em um único Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Este código exibe texto, em um único Label, que usa vários formatos. O texto no primeiro Span é exibido usando a formatação definida em Label, enquanto o texto na segunda e terceira instâncias de Span é exibido usando a formatação definida em Label e a formatação adicional definida em cada Span.

Observação

A propriedade FormattedText é do tipo FormattedString, que inclui uma ou mais instâncias de Span.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador remoto de iOS ou do Android Emulator de sua preferência. Observe que a aparência de Label mudou:

Interrompa o aplicativo no Visual Studio.

Para obter mais informações sobre como definir Span a aparência, consulte Texto formatado Xamarin.Forms no guia Rótulo .

Em MainPage.xaml, modifique a declaração Label para apresentar texto que usa vários formatos, em um único Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Este código exibe texto, em um único Label, que usa vários formatos. O texto no primeiro Span é exibido usando a formatação definida em Label, enquanto o texto na segunda e terceira instâncias de Span é exibido usando a formatação definida em Label e a formatação adicional definida em cada Span.

Observação

A propriedade FormattedText é do tipo FormattedString, que inclui uma ou mais instâncias de Span.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio para Mac, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador de iOS ou do Android Emulator de sua preferência. Observe que a aparência de Label mudou:

Interrompa o aplicativo no Visual Studio para Mac.

Para obter mais informações sobre como definir Span a aparência, consulte Texto formatado Xamarin.Forms no guia Rótulo .

Compartilhar via

Xamarin.Forms Tutorial de rótulo

Criar um rótulo

Alterar a aparência

Apresentar texto formatado

Parabéns!

Próximas etapas

Compartilhar via

Xamarin.Forms Tutorial de rótulo

Criar um rótulo

Alterar a aparência

Apresentar texto formatado

Parabéns!

Próximas etapas

Links relacionados