Compartilhar via

Xamarin.Forms Pincéis: gradientes radiais

  • Artigo

A RadialGradientBrush classe deriva da classe e pinta GradientBrush uma área com um gradiente radial, que combina duas ou mais cores em um círculo. GradientStop Os objetos são usados para especificar as cores no gradiente e suas posições. Para obter mais informações sobre GradientStop objetos, consulte Xamarin.Forms Pincéis: gradientes.

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 dessa propriedade é (0,5,0,5).
  • Radius, do tipo double, que representa o raio do círculo para o gradiente radial. O valor padrão dessa propriedade é 0,5.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

A RadialGradientBrush classe também tem um IsEmpty método que retorna um bool que representa se o pincel foi atribuído a algum GradientStop objeto.

Observação

Gradientes radiais também podem ser criados com a radial-gradient() função CSS.

Criar um RadialGradientBrush

As paradas de gradiente de um 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 para sua circunferência. A posição e o tamanho do círculo podem ser alterados Center usando as propriedades 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.

Para criar um gradiente radial, crie um RadialGradientBrush objeto e defina suas Center propriedades and Radius . Em seguida, adicione dois ou mais GradientStop objetos à RadialGradientBrush.GradientStops coleção, que especificam as cores no gradiente e suas posições.

O exemplo XAML a seguir mostra um RadialGradientBrush que é definido como o Background de um Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- Center defaults to (0.5,0.5)
             Radius defaults to (0.5) -->
        <RadialGradientBrush>
            <GradientStop Color="Red"
                          Offset="0.1" />
            <GradientStop Color="DarkBlue"
                          Offset="1.0" />
        </RadialGradientBrush>
    </Frame.Background>
</Frame>

Neste exemplo, o plano de fundo do Frame é pintado com um RadialGradientBrush que interpola de vermelho para azul escuro. O centro do gradiente radial está posicionado no centro do Frame:

Quadro pintado com um RadialGradientBrush centralizado

O exemplo XAML a seguir move o centro do gradiente radial para o canto superior esquerdo do Frame:

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="0.0,0.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>

Neste exemplo, o plano de fundo do Frame é pintado com um RadialGradientBrush que interpola de vermelho para azul escuro. O centro do gradiente radial é posicionado no canto superior esquerdo do Frame:

Quadro pintado com um RadialGradientBrush superior esquerdo

O exemplo XAML a seguir move o centro do gradiente radial para o canto inferior direito do Frame:

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="1.0,1.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>

Neste exemplo, o plano de fundo do Frame é pintado com um RadialGradientBrush que interpola de vermelho para azul escuro. O centro do gradiente radial é posicionado no canto inferior direito do Frame:

Quadro pintado com um RadialGradientBrush inferior direito