Xamarin.Forms - Herança de estilos - IV

 Neste artigo vou apresentar o conceito de herança de estilos em aplicações Xamarin Forms.    

No artigo anterior mostrei como usar estilos de dispositivos e neste artigo veremos o que é e como usar a herança de estilos.

Os estilos podem herdar de outros estilos, a fim de reduzir a duplicação de código e permitir a sua reutilização. A herança de estilo é executada configurando a propriedade Style.BasedOn para um estilo existente.

No código XAML, isso pode ser feito configurando a propriedade BasedOn para uma extensão de marcação StaticResource que faz referência a um estilo criado anteriormente. No código C#, isso é alcançado configurando a propriedade BasedOn para uma instância do Style.

Os estilos que herdam de um estilo base podem incluir instâncias Setter para novas propriedades ou usá-las para substituir estilos do estilo base.

Além disso, os estilos que herdam de um estilo base devem segmentar o mesmo tipo, ou um tipo que deriva do tipo direcionado pelo estilo base. Por exemplo, se um estilo base segmentar instâncias de Views, estilos baseados no estilo base podem segmentar instâncias ou tipos que derivam da classe View, como instâncias de etiqueta e botão.

Usando a herança de estilos

Vamos usar o mesmo projeto criado no artigo anterior. Abra o arquivo App.xaml e inclua o código abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_Estilos.App">
	<Application.Resources>
          <!-- Application resource dictionary -->
          <ResourceDictionary>             
               <Style x:Key="baseStyle" TargetType="View">
                    <Setter Property="HorizontalOptions" Value="Center" />
                    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                </Style>
                <Style x:Key="labelStyle" TargetType="Label" BasedOn="{StaticResource baseStyle}">
                    <Setter Property="TextColor" Value="Blue" />
                    <Setter Property="FontSize" Value="25" />
                </Style>
                 <Style x:Key="entryStyle" TargetType="Entry" BasedOn="{StaticResource baseStyle}">
                    <Setter Property="Placeholder" Value="Sou o Entry" />
                    <Setter Property="BackgroundColor" Value="Yellow" />
                </Style>
                <Style x:Key="buttonStyle" TargetType="Button" BasedOn="{StaticResource baseStyle}">
                    <Setter Property="TextColor" Value="Yellow" />
                    <Setter Property="BackgroundColor" Value="Black" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Estamos definindo 3 estilos identificados por : baseStyle, labelStyle e buttonStyle, onde os dois últimos herdam de baseStyle.

Agora abra o arquivo MainPage.xaml e inclua o 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"
             xmlns:local="clr-namespace:XF_Estilos"
             x:Class="XF_Estilos.MainPage">
    <ContentPage.Content>

        <StackLayout Padding="0,20,0,0">
            <Label Text="Esta é a Label" Style="{StaticResource labelStyle}" />
            <Entry Style="{StaticResource entryStyle}" />
            <Button Text="Este é o Button" Style="{StaticResource buttonStyle}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
 

O estilo baseStyle é aplicado a instãncias de View e define as propriedades HorizontalOptions e VerticalOptions.

O baseStyle não está configurado diretamente em nenhum controle. Em vez disso, labelStyle, entryStyle e buttonStyle herdam de baseStyle, definindo valores de propriedades adicionais.

Os estilos labelStyle, entryStyle e buttonStyle são então aplicados nas instâncias Label, Entry e Button, definindo suas propriedades Style.

O resultado pode ser visto na figura ao lado quando o projeto é executado.

Respeitando a Cadeia de Herança

Um estilo só pode herdar de estilos no mesmo nível ou acima, na hierarquia de view. Isso significa que:

- Um recurso de nível de aplicativo só pode herdar de outros recursos de nível de aplicativo.
- Um recurso de nível de página(view) pode herdar de recursos de nível de aplicativo e outros recursos de nível de página.
- Um recurso de nível de controle pode herdar de recursos de nível de aplicativo, recursos de nível de página e outros recursos de nível de controle.

No exemplo acima baseStyle é um recurso a nível de página (View) enquanto que labelStyle, entryStyle e buttonStyle são recursos a nível de controle. Por isso estes estilos podem herdar de baseStyle mas baseStyle não pode herdar dos estilos de controle devido a sua posição na hierarquia da View.

E como ficaria a definição de estilos usando herança na linguagem C# ?

Ficaria assim :

        var baseStyle = new Style (typeof(View)) {
            Setters = {
                new Setter {
                    Property = View.HorizontalOptionsProperty, Value = LayoutOptions.Center }
            }
        };
        var labelStyle = new Style (typeof(Label)) {
            BasedOn = baseStyle,
            Setters = {
                new Setter { Property = Label.TextColorProperty, Value = Color.Teal }
            }
        };
        var buttonStyle = new Style (typeof(Button)) {
            BasedOn = baseStyle,
            Setters = {
                new Setter { Property = Button.BorderColorProperty, Value = Color.Lime },
            }
        };

Dessa forma a herança de estilos ajuda muito na reutilização de código.

Vimos assim um resumo sobre Estilos e como aplicar o recurso em aplicações Xamarin Forms.

Disseram-lhe, pois: Onde está teu Pai? Jesus respondeu: Não me conheceis a mim, nem a meu Pai; se vós me conhecêsseis a mim, também conheceríeis a meu Pai.
 João 8:19


Referências:

José Carlos Macoratti