Hoje veremos como formatar a exibição de texto na view Label usando a propriedade FormattedString.

A view Label é usada para exibir texto, tanto em linha única como em múltiplas linhas. Elas podem ter fontes personalizadas (famílias, tamanhos e opções) e texto colorido.

Para tratar com texto em uma ou múltiplas linhas, podemos usar a propriedade LineBreakMode que é uma enumeração e possui as seguintes opções:

• HeadTruncation – Trunca o início do texto, mostrando o fim.
• CharacterWrap – Envolve o texto em uma nova linha com um limite de caracteres.
• MiddleTruncation – Exibe o início e o final do texto com o meio substituído por reticências.
• NoWrap – Não envolve o texto, exibindo apenas o texto que pode caber em uma linha.
• TailTruncation – Mostra o início do texto, truncando o fim.
• WordWrap – Envolve o texto no limite da palavra

Podemos usar a propriedade FormattedText da Label que permite apresentar o texto com várias fontes e cores na mesma exibição. Esta propriedade é do tipo FormattedString.

As strings formatadas são compostas por um ou mais espaços. Cada um com as seguintes propriedades:

• BackgroundColor – Pode ser usado para definir uma cor de fundo;
• FontAttributes – Pode ser configurado em negrito, itálico ou nenhum. Opções: Bold, Italic ou none;
• FontFamily – Define a fonte a ser usada;
• FontSize – Define o tamanho do texto. Opções: Default, Large, Medium, Micro e Small;
• ForegroundColor – Define a cor do texto;
• Text – O texto a ser apresentado.

Então vamos à parte prática.

Recursos usados:

• Visual Studio Community 2017
• Xamarin

Criando o projeto no Visual Studio 2017 Community

• Abra o Visual Studio Community 2017 e clique em New Project;
• Selecione Visual C#, o template Cross Platform e a seguir, Cross Plataform App (Xamarin.Forms);
• Informe o nome XF_Label e clique no botão OK;

• A seguir, selecione Blank App e marque as plataformas para quais deseja gerar os projetos;
• Marque a opção Xamarin.Forms e, em Code Sharing Strategy, marque .NET Standard, que substitui a opção de projetos PCL a partir do VS 2017 update 15.5.

Usando a view Label e formatando o texto

Vamos aproveitar o código padrão gerado e usar a view MainPage.xaml para definir os exemplos usados no artigo.

1- Label padrão

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_Label"
             x:Class="XF_Label.MainPage">
	<Label Text="Bem-Vindo, a Macoratti .net" 
           TextColor="White"
           FontSize="Large"
           FontAttributes="Bold"
           BackgroundColor="Red"
           FontFamily="Verdana"
           VerticalOptions="Center" 
           HorizontalOptions="Center" />
</ContentPage>

Vejamos agora outro exemplo usando a propriedade FormattedText e definindo spans.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_Label"
             x:Class="XF_Label.MainPage">
    <StackLayout Padding="5,10">
        <Label>
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Macoratti .net" ForegroundColor="Red" FontAttributes="Bold" FontSize="Large"/>
                    <Span Text=" quase tudo para .NET" ForegroundColor="Blue" FontSize="Medium"/>
                    <Span Text=" 2018" FontAttributes="Italic" FontSize="Small" />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>
</ContentPage>

Para usar múltiplos Spans dentro de um Label, é necessário acessar outra propriedade chamada FormattedText, dentro da qual incluiremos FormattedString que, por sua vez, permitirá acesso à uma coleção de Spans.

Cada um deles é um fragmento de texto que poderá ser formatado de maneira independente como mostrado no exemplo acima.

Para concluir, vamos usar a view Label da forma tradicional e usando a propriedade FormattedText com Spans:

<?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="XF_Label.Pagina1">
    <ContentPage.Content>
        <StackLayout Padding="5,10" x:Name="layout">
            <Label TextColor="Green" Text="Uma label verde"/>
            <Label Text="Uma labem padrão sem customização"/>
            <Label FontSize="30" Text="Tamanho da fonte na label"/>
            <Label FontAttributes="Bold" Text="Um texto em negrito na Label"/>
            <Label>
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="Texto negrito com fundo amarelo" ForegroundColor="Yellow" FontAttributes="Bold"/>
                        <Span Text="So texto"/>
                        <Span Text="Texto Azul" ForegroundColor="Blue"/>
                        <Span Text="Texto itálico" FontAttributes="Italic" FontSize="Large"/>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Até o próximo artigo sobre Xamarin Forms!

Pegue o código usado no projeto aqui: XF_Label.zip (somente o projeto compartilhado).