Compartilhar via

Xamarin.Forms Pincéis: Gradientes lineares

  • Artigo

A LinearGradientBrush classe deriva da GradientBrush classe e pinta uma área com um gradiente linear, que mistura duas ou mais cores ao longo de uma linha conhecida como eixo de gradiente. GradientStop 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 LinearGradientBrush define as seguintes propriedades:

  • StartPoint, do tipo Point, que representa as coordenadas bidimensionais iniciais do gradiente linear. O valor padrão dessa propriedade é (0,0).
  • EndPoint, do tipo Point, que representa as coordenadas bidimensionais finais do gradiente linear. O valor padrão dessa propriedade é (1,1).

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

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

Observação

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

Criar um LinearGradientBrush

As paradas de gradiente de um pincel de gradiente linear são posicionadas ao longo do eixo do gradiente. A orientação e o tamanho do eixo do gradiente podem ser alterados StartPoint usando as propriedades e EndPoint o pincel. Ao manipular essas propriedades, você pode criar gradientes horizontais, verticais e diagonais, inverter a direção do gradiente, condensar a propagação do gradiente e muito mais.

As StartPoint propriedades e EndPoint são relativas à área que está sendo pintada. (0,0) representa o canto superior esquerdo da área que está sendo pintada e (1,1) representa o canto inferior direito da área que está sendo pintada. O diagrama a seguir mostra o eixo de gradiente para um pincel de gradiente linear diagonal:

Quadro com um eixo de gradiente diagonal

Neste diagrama, a linha tracejada mostra o eixo do gradiente, que destaca o caminho de interpolação do gradiente do ponto inicial ao ponto final.

Criar um gradiente linear horizontal

Para criar um gradiente linear horizontal, crie um LinearGradientBrush objeto e defina-o StartPoint como (0,0) e seu EndPoint como (1,0). Em seguida, adicione dois ou mais GradientStop objetos à LinearGradientBrush.GradientStops coleção, que especificam as cores no gradiente e suas posições.

O exemplo XAML a seguir mostra um horizontal LinearGradientBrush definido como o Background de um Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->
        <LinearGradientBrush EndPoint="1,0">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

Neste exemplo, o plano de fundo do é pintado Frame com um LinearGradientBrush que interpola de amarelo para verde horizontalmente:

Quadro pintado com um LinearGradientBrush horizontal

Criar um gradiente linear vertical

Para criar um gradiente linear vertical, crie um LinearGradientBrush objeto e defina-o StartPoint como (0,0) e seu EndPoint como (0,1). Em seguida, adicione dois ou mais GradientStop objetos à LinearGradientBrush.GradientStops coleção, que especificam as cores no gradiente e suas posições.

O exemplo XAML a seguir mostra uma vertical LinearGradientBrush definida como a Background de um Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->    
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

Neste exemplo, o plano de fundo do é pintado Frame com um LinearGradientBrush que interpola de amarelo para verde verticalmente:

Quadro pintado com um LinearGradientBrush vertical

Criar um gradiente linear diagonal

Para criar um gradiente linear diagonal, crie um LinearGradientBrush objeto e defina-o StartPoint como (0,0) e seu EndPoint como (1,1). Em seguida, adicione dois ou mais GradientStop objetos à LinearGradientBrush.GradientStops coleção, que especificam as cores no gradiente e suas posições.

O exemplo XAML a seguir mostra uma diagonal LinearGradientBrush definida como a Background de um Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0)      
             Endpoint defaults to (1,1) -->
        <LinearGradientBrush>
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

Neste exemplo, o fundo do é pintado Frame com um LinearGradientBrush que interpola de amarelo para verde diagonalmente:

Quadro pintado com um LinearGradientBrush diagonal