Xamarin.Forms Tutorial de 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.

1. 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.

2. 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.

3. 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.

1. 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.

2. 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.

3. 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:

   

1. 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.

2. 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 .

1. 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.

2. 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 .

1. 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>
               <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 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.

2. 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 .

1. 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>
               <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 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.

2. 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 .