Partager via

Xamarin.Forms Pinceaux : dégradés linéaires

  • Article

La LinearGradientBrush classe dérive de la GradientBrush classe et peint une zone avec un dégradé linéaire, qui fusionne deux couleurs ou plus le long d’une ligne appelée axe dégradé. GradientStop les objets sont utilisés pour spécifier les couleurs dans le dégradé et leurs positions. Pour plus d’informations sur GradientStop les objets, consultez Xamarin.Forms Pinceaux : dégradés.

La classe LinearGradientBrush définit les propriétés suivantes :

  • StartPoint, de type Point, qui représente les coordonnées bidimensionnelles de départ du dégradé linéaire. La valeur par défaut de cette propriété est (0,0).
  • EndPoint, de type Point, qui représente les coordonnées bidimensionnelles de fin du dégradé linéaire. La valeur par défaut de cette propriété est (1,1).

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

La LinearGradientBrush classe est également une IsEmpty méthode qui retourne une bool valeur qui indique si le pinceau a été affecté à des GradientStop objets.

Remarque

Les dégradés linéaires peuvent également être créés avec la linear-gradient() fonction CSS.

Créer un LinearGradientBrush

Les points de dégradé linéaires du pinceau sont positionnés le long de l’axe de dégradé. L’orientation et la taille de l’axe de dégradé peuvent être modifiées à l’aide des propriétés et EndPoint des StartPoint pinceaux. En manipulant ces propriétés, vous pouvez créer des dégradés horizontaux, verticaux et diagonals, inverser la direction du dégradé, condenser la propagation du dégradé, etc.

Les StartPoint propriétés et EndPoint les propriétés sont relatives à la zone peinte. (0,0) représente le coin supérieur gauche de la zone peinte, et (1,1) représente le coin inférieur droit de la zone peinte. Le diagramme suivant montre l’axe dégradé d’un pinceau de dégradé linéaire diagonal :

Cadre avec un axe de dégradé diagonal

Dans ce diagramme, la ligne en pointillés montre l’axe du dégradé, qui met en évidence le chemin d’interpolation du dégradé du point de départ au point de fin.

Créer un dégradé linéaire horizontal

Pour créer un dégradé linéaire horizontal, créez un LinearGradientBrush objet et définissez-le StartPoint sur (0,0) et sur EndPoint (1,0). Ensuite, ajoutez deux objets ou plus GradientStop à la LinearGradientBrush.GradientStops collection, qui spécifient les couleurs dans le dégradé et leurs positions.

L’exemple XAML suivant montre un horizontal LinearGradientBrush défini comme étant un Background 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>

Dans cet exemple, l’arrière-plan de l’objet Frame est peint avec une LinearGradientBrush interpolation de jaune à vert horizontalement :

Cadre peint avec un linearGradientBrush horizontal

Créer un dégradé linéaire vertical

Pour créer un dégradé linéaire vertical, créez un LinearGradientBrush objet et définissez-le StartPoint sur (0,0) et sur EndPoint (0,1). Ensuite, ajoutez deux objets ou plus GradientStop à la LinearGradientBrush.GradientStops collection, qui spécifient les couleurs dans le dégradé et leurs positions.

L’exemple XAML suivant montre un vertical LinearGradientBrush défini comme suit Background 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>

Dans cet exemple, l’arrière-plan de l’objet Frame est peint avec une LinearGradientBrush interpolation de jaune à vert verticalement :

Cadre peint avec un linearGradientBrush vertical

Créer un dégradé linéaire diagonal

Pour créer un dégradé linéaire diagonal, créez un LinearGradientBrush objet et définissez-le StartPoint sur (0,0) et sur EndPoint (1,1). Ensuite, ajoutez deux objets ou plus GradientStop à la LinearGradientBrush.GradientStops collection, qui spécifient les couleurs dans le dégradé et leurs positions.

L’exemple XAML suivant montre une diagonale LinearGradientBrush définie en tant que Background 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>

Dans cet exemple, l’arrière-plan de l’objet Frame est peint avec une LinearGradientBrush interpolation de jaune à vert en diagonale :

Cadre peint avec une diagonale LinearGradientBrush