Neste artigo vou apresentar o novo recurso do Xamarin Forms 4.8 gradient e brushes que podem ser usados para pintar uma área.

O recurso Brushes, ou pincéis, permite “pintar” uma área de seu aplicativo com os pincéis, e para pincéis diferentes temos tipos diferentes de saída.

Os três tipos de Brushes (pincéis) são:

• Solid Color ou Cor sólida, que pinta uma área com uma cor sólida.
• Linear Gradient ou Gradiente linear, que pinta uma área com um gradiente linear.
• Radial Gradient ou Gradiente radial, que pinta uma área com um gradiente radial.

Lembrando que este é um recurso experimental e para ser usado teremos que adicionar o código abaixo ás classes AppDelegate no iOS, e, MainActivity no Android, antes da chamada de Forms.Init:

 global::Xamarin.Forms.Forms.SetFlags("Brush_Experimental");

Recursos usados:

• Visual Studio 2019 Community
• Xamarin

Criando o projeto Xamarin Forms

Vamos criar um novo projeto Xamarin Forms no VS 2019 Community com o nome XF_Brushes1.

Nota: Verifique se você precisa atualizar as versões do Xamarin Forms e do Xamarin.Essentials

Você pode ver como criar um projeto no Xamarin Forms neste link: Criar Projeto Xamarin Forms

Com o projeto criado precisamos incluir a flag 'Brush_Experimental' no projeto.

Podemos fazer isso no arquivo App.xaml.cs :

       public App()
        {
            Device.SetFlags(new string[] { "Brush_Experimental" });
            InitializeComponent();

            MainPage = new MainPage();
        }

Agora podemos usar o recurso em nosso projeto.

Usando Cor sólidas : SolidColorBrush

Existem três técnicas principais para criar um SolidColorBrush.

1. Criar um SolidColorBrush a partir de uma Color;
2. Usar um Brush (pincel) predefinido;
3. Criar um SolidColorBrush usando a notação hexadecimal;

1 - Usando uma Color pré-definida (SolidColorBrush) :

O Xamarin Forms inclui um conversor de tipo que cria um SolidColorBrush a partir do valor de um Color.

Pintando um Frame com cor DarkGreen:

      
   <Frame Background="DarkGreen"
            BorderColor="Black"
            HasShadow="True"
            CornerRadius="12"
            HeightRequest="120"
            WidthRequest="120" />

Podemos especificar o valor da cor usando uma sintaxe com tag da propriedade:

 <Frame BorderColor="LightGray"
            HasShadow="True"
            CornerRadius="12"
            HeightRequest="120"
            WidthRequest="120">
            <Frame.Background>
                <SolidColorBrush Color="DarkBlue" />
            </Frame.Background>
        </Frame>

2 - Usando uma Brush pré-definido

A classe Brush define um conjunto de objetos SolidColorBrush.

   <Frame Background="{x:Static Brush.Aquamarine}"
           BorderColor="LightGray"
             HasShadow="True"
             CornerRadius="12"
             HeightRequest="50"
             WidthRequest="50" />

3 - Usando a notação Hexadecimal

Os objetos SolidColorBrush também podem ser criados usando notação hexadecimal.

Com essa abordagem, uma cor é especificada em termos da quantidade de vermelho, verde e azul para combinar em uma única cor. O formato principal para especificar uma cor usando notação hexadecimal é #rrggbb, onde:

• rr é um número hexadecimal de dois dígitos que especifica a quantidade relativa de vermelho.

• gg é um número hexadecimal de dois dígitos que especifica a quantidade relativa de verde.

• bb é um número hexadecimal de dois dígitos que especifica a quantidade relativa de azul.

Além disso, uma cor pode ser especificada como #aarrggbb onde aa especifica o valor alfa, ou transparência, da cor. Essa abordagem permite criar cores que são parcialmente transparentes.

No exemplo abaixo o Frame é pintado com uma SolidColorBrush salmon:

    <Frame Background="#FF9988"
          BorderColor="LightGray"
          HasShadow="True"
          CornerRadius="12"
          HeightRequest="50"
          WidthRequest="50" />

Usando Gradiente Linear

A classe GradientBrush deriva da classe Brush e é uma classe abstrata que descreve um gradiente, que é composto de paradas de gradiente. Um pincel gradiente pinta uma área com várias cores que se misturam ao longo de um eixo.

A classe GradientBrush define a propriedade GradientStops, do tipo GradientStopsCollection, que representa as paradas de gradiente do pincel, cada uma das quais especifica uma cor e um deslocamento ao longo do eixo do gradiente do pincel. Um GradientStopsCollection é um ObservableCollection de objetos GradientStop.

As paradas de gradiente são os blocos de construção de um pincel de gradiente e especificam as cores no gradiente e sua localização ao longo do eixo do gradiente. As paradas de gradiente são especificadas usando objetos GradientStop.

A classe GradientStop define as seguintes propriedades:

• Color, do tipo Color, que representa a cor do limite de gradiente. O valor padrão desta propriedade é Color.Default;
• Offset, do tipo float, que representa a localização do gradiente final dentro do vetor gradiente. O valor padrão desta propriedade é 0 e os valores válidos estão no intervalo 0,0-1,0. Quanto mais próximo esse valor estiver de 0, mais perto a cor estará do início do gradiente. Da mesma forma, quanto mais próximo esse valor estiver de 1, mais perto a cor estará do final do gradiente;

Assim, o pincel de gradiente linear permite mesclar duas (ou mais) cores em um lindo gradiente. Basta decidir onde o gradiente começa usando a propriedade StartPoint e onde termina usando a propriedade EndPoint.  

Exemplo de LinearGradientBrush com duas cores :  Yellow e Blue :

  <Frame BorderColor="LightGray"
                HasShadow="True"
                CornerRadius="12"
                HeightRequest="80"
                WidthRequest="80">
            <Frame.Background>
                <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,0">
                    <GradientStop Color="Yellow"
                          Offset="0.1"/>
                    <GradientStop Color="Blue"
                          Offset="1.0"/>
                </LinearGradientBrush>
            </Frame.Background>
        </Frame>

Outro Exemplo criando um LinearGradientBrush diagonal com 4 cores:  Yellow, Red, Blue e LimeGreen :

    <Frame BorderColor="LightGray"
                HasShadow="True"
                CornerRadius="12"
                HeightRequest="80"
                WidthRequest="80">
            <Frame.Background>
                <LinearGradientBrush StartPoint="0,0"
                     EndPoint="1,1">
                    <GradientStop Color="Yellow"
                  Offset="0.0" />
                    <GradientStop Color="Red"
                  Offset="0.25" />
                    <GradientStop Color="Blue"
                  Offset="0.75" />
                    <GradientStop Color="LimeGreen"
                  Offset="1.0" />
                </LinearGradientBrush>
            </Frame.Background>
        </Frame>

Aqui a cor de cada ponto entre as paradas de gradiente é interpolada como uma combinação da cor especificada pelas duas paradas de gradiente delimitadoras.

Usando Gradiente Radial

A classe RadialGradientBrush deriva da classe GradientBrush e pinta uma área com um gradiente radial, que combina duas ou mais cores em um círculo. Os objetos GradientStop são usados para especificar as cores no gradiente e suas posições.

A classe RadialGradientBrush define as seguintes propriedades:

• Center, do tipo Point, que representa o ponto central do círculo para o gradiente radial. O valor padrão desta propriedade é (0,5,0,5);
• Radius, do tipo double, que representa o raio do círculo para o gradiente radial. O valor padrão desta propriedade é 0,5.

As paradas de gradiente (GradientStop) de um Brush (pincel) de gradiente radial são posicionadas ao longo de um eixo de gradiente definido por um círculo. O eixo do gradiente irradia do centro do círculo até sua circunferência.

A posição e o tamanho do círculo podem ser alterados usando as propriedades Center e Radius do pincel. O círculo define o ponto final do gradiente. Portanto, uma parada de gradiente em 1.0 define a cor na circunferência do círculo. Uma parada de gradiente em 0,0 define a cor no centro do círculo.

Exemplo de uso do RadialGradientBrush definido como o background de um Frame:

      <Frame BorderColor="LightGray"
          HasShadow="True"
          CornerRadius="12"
          HeightRequest="60"
          WidthRequest="60">
            <Frame.Background>
                <RadialGradientBrush Center="0.5,0.5"
                             Radius="0.5">
                    <GradientStop Color="Red"
                          Offset="0.1"/>
                    <GradientStop Color="DarkBlue"
                          Offset="1.0"/>
                </RadialGradientBrush>
            </Frame.Background>
        </Frame>

Neste exemplo o gradiente radial pinta a área designada com um gradiente radial. O que permite a combinação de duas ou mais cores em um círculo. Você também pode decidir o centro do gradiente usando a propriedade Center. Bem como o raio do gradiente usando a propriedade Radius.

O código abaixo move o centro do gradiente radial para o canto superior esquerdo do Frame:

<RadialGradientBrush Center="0.0,0.0">
    <GradientStop Color="Red"  Offset="0.1" />
    <GradientStop Color="DarkBlue"  Offset="1.0" />
</RadialGradientBrush>

Assim, usando Brush e Gradients você pode liberar aquele artista que esta dentro de você...

"Fui buscado dos que não perguntavam por mim, fui achado daqueles que não me buscavam; a uma nação que não se chamava do meu nome eu disse: Eis-me aqui. Eis-me aqui."
Isaías 65:1

Referências:

• Seção de Jogos do site Macoratti .net

• Xamarim - Desenvolvimento Multiplataforma com C# .

• Xamarin - Apresentando Xamarin.Forms

• Xamarin.Forms - Olá Mundo - Criando sua primeira

• Xamarin.Forms - Olá Mundo - Anatomia da aplicação

• NET - Apresentando o padrão Model-View-ViewModel

• Xamarin Forms - MVVM - Macoratti.net

• NET - O padrão MVVM (Model-View-ViewModel) revisitado

• Xamarin Forms - MVVM - A interface ICommand

• Padrão de Projeto - Aprendendo o padrão MVVM

José Carlos Macoratti