Xamarin Forms – Formatando Labels com Bindable Span

Se você já precisou exibir um texto dentro de uma mesma label com palavras ou frases que deveriam ter formatações destintas, você porvavelmente usou a tag Span da propriedade FormattedText da Label.

Até a versão 3.0 do Xamarin Forms a tag Span não suportava valores vindos de bindings, ou seja, você precisava definir manualmente o texto dentro span.

Com a issue 1340,  esta funcionalidade foi desenvolvida e adicionada ao Xamarin Forms e está disponível a partir da versão 3.1 , veja mais aqui.

Importante: Para que você consiga reproduzir o comportamento citado neste post, você precisará ter a versão 3.1.0.637273 ou superior do Xamarin Forms instalado no projeto .Net Standart e em todas as plataformas. Para verificar/atualizar, verifique os pacotes nugets instalados nos projetos.

Formatando o texto dentro de uma Label

Crie um aplicativo Xamarin Forms no Visual Studio.

Em MainPage.xaml vamos adicionar uma nova Label que receberá o valor através de Spans. Nos Spans, definiremos valores fixos que serão alterados posteriormente para valores bindados. Veja abaixo:

<StackLayout>
    <Label>
        <Label.FormattedText>
            <FormattedString>
                <Span Text="Titulo fixo: " ForegroundColor="Red" FontAttributes="Bold"/>
                <Span Text="Conteudo fixo" ForegroundColor="Blue" FontAttributes="Italic"/>
            </FormattedString>
        </Label.FormattedText>
    </Label>
</StackLayout>

Criando uma View Model

Para que vejamos o funcionamento do Span com valores bindados, vamos criar uma nova ViewModel que será o contexto de binding da nossa view.

Para que você tenha o funcionamento esperado da View Model, instale o pacote nuget Refractored.MvvmHelpers do James Montemagno. Isto irá nos ajudar a economizar tempo na criação da BaseViewModel.

Vamos criar a classe MainPageViewModel. Ela deverá herdar de BaseViewModel.

Dentro da nossa view model, vamos adicionar duas propriedades, uma para o titulo e uma para o conteudo:

private string _titulo;

public string Titulo
{
    get { return _titulo; }
    set { _titulo = value; OnPropertyChanged(); }
}

private string _conteudo;

public string Conteudo
{
    get { return _conteudo; }
    set { _conteudo = value; OnPropertyChanged(); }
}

Não esqueça de chamar o método OnPropertyChanged() no set das propriedades.

Após adicionar as propriedades na view model, vamos adicionar um valor para cada uma delas. Para fins didáticos, vamos assinalar o valor no método construtor da view model:

public MainPageViewModel()
{
    Titulo = "Titulo Bindado";
    Conteudo = "Conteudo Bindado";
}

Alterando os Spans para receberem valor via binding

Após criada as propriedades e setado os valores, vamos partir para a alteração da view.
Em MainPage.xaml vamos alterar o Text dos Spans que criamos anteriormente para que recebam por binding as propriedades strings que criamos na nossa view model:

<StackLayout>
    <Label>
        <Label.FormattedText>
            <FormattedString>
                <Span Text="{Binding Titulo}" ForegroundColor="Red" FontAttributes="Bold"/>
                <Span Text="{Binding Conteudo}" ForegroundColor="Blue" FontAttributes="Italic"/>
            </FormattedString>
        </Label.FormattedText>
    </Label>
</StackLayout>

Por fim, vamos setar o Binding Context da MainPage.

No método construtor da Page vamos adicionar o BindingContext:

public MainPage()
{
    InitializeComponent();
    BindingContext = new MainPageViewModel();
}

Após isto, execute o aplicativo, ele deve exibir o texto setado em MainPageViewModel.cs formatado de acordo como definimos na MainPage.xaml.

Se você atualizou a versão do Xamarin Forms após a criação do projeto para 3.1.x e teve algum problema na hora de buildar o projeto, tente apagar as pastas bin e obj do projeto .Net Standart e das plataformas.

Conclusão

A possibilidade de usar bindings no span deixa o desenvolvimento de textos formatados mais flexivel e mais testável, além de ficar mais claro o que está sendo feito.

—

#Ubuntu

Foto usada no post PixaBay