Xamarin.Forms Tutorial de rótulos
Antes de tentar realizar este tutorial, você deve ter concluído com sucesso:
- Crie seu primeiro Xamarin.Forms aplicativo de início rápido.
- Tutorial de StackLayout.
Neste tutorial, você aprenderá a:
- Crie um Xamarin.Forms
Labelem 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á o XAML Hot Reload para Xamarin.Forms ver as alterações da interface do usuário sem recriar seu aplicativo.
Criar um rótulo
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 do .NET Standard que é criada, consulte Anatomia Xamarin.Forms de um Xamarin.Forms aplicativo no Quickstart Deep Dive.
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
Labelem umStackLayout. A propriedadeLabel.Textespecifica o texto que é exibido e a propriedadeHorizontalOptionsespecifica que oLabelserá 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:
Alterar a aparência
Em MainPage.xaml, modifique a declaração
Labelpara 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 propriedadeTextColordefine a cor do textoLabel. A propriedadeFontAttributesdefine a fonte do rótulo como itálico e a propriedadeFontSizedefine o tamanho da fonte. Além disso, uma decoração de texto sublinhado é aplicada aoLabeldefinindo sua propriedadeTextDecorationse ele é centralizado horizontalmente definindo a propriedadeHorizontalOptionscomoCenter.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
Labelmudou:
Para obter mais informações sobre como definir
Labela aparência, consulte o Guia de Xamarin.Forms rótulos .
Apresentar texto formatado
Em MainPage.xaml, modifique a declaração
Labelpara apresentar texto que usa vários formatos, em um únicoLabel.<Label TextColor="Gray" FontSize="Medium"> <Label.FormattedText> <FormattedString> <Span Text="This sentence contains " /> <Span Text="words that are emphasized, " FontAttributes="Italic" /> <Span Text="and underlined." TextDecorations="Underline" /> </FormattedString> </Label.FormattedText> </Label>Este código exibe texto, em um único
Label, que usa vários formatos. O texto no primeiroSpané exibido usando a formatação definida emLabel, enquanto o texto na segunda e terceira instâncias deSpané exibido usando a formatação definida emLabele a formatação adicional definida em cadaSpan.Observação
A propriedade
FormattedTexté do tipoFormattedString, que inclui uma ou mais instâncias deSpan.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
Labelmudou:
Interrompa o aplicativo no Visual Studio.
Para obter mais informações sobre como definir
Spana aparência, consulte Texto formatado no Guia de Xamarin.Forms rótulos .
Parabéns!
Parabéns por concluir este tutorial, no qual você aprendeu a:
- Crie um Xamarin.Forms
Labelem XAML. - Alterar a aparência do
Label. - Apresentar o texto, em um único
Label, que tenha vários formatos.
Próximas etapas
Para saber mais sobre os conceitos básicos da criação de aplicativos móveis com Xamarin.Formso , continue no tutorial Botão.
Links relacionados
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.