Lineare Farbverlaufspinsel

Durchsuchen Sie das Beispiel

Die .NET Multi-platform App UI (.NET MAUI) LinearGradientBrush-Klasse wird von der GradientBrush-Klasse abgeleitet und zeichnet einen Bereich mit einem linearen Farbverlauf, der zwei oder mehr Farben entlang einer als Farbverlaufsachse bezeichneten Linie mischt. GradientStop-Objekte werden verwendet, um die Farben im Farbverlauf und deren Positionen anzugeben. Weitere Informationen zu GradientStop-Objekten finden Sie unter Farbverläufe.

Die LinearGradientBrush-Klasse definiert die folgenden Eigenschaften:

• StartPoint, vom Typ Point: Die zweidimensionalen Startkoordinaten des linearen Farbverlaufs. Der Standardwert dieser Eigenschaft ist (0,0).
• EndPoint, vom Typ Point: Die zweidimensionalen Endkoordinaten des linearen Farbverlaufs. Der Standardwert dieser Eigenschaft ist (1,1).

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Die LinearGradientBrush-Klasse verfügt auch über eine IsEmpty-Methode, die ein bool zurückgibt, das angibt, ob dem Pinsel GradientStop-Objekte zugewiesen wurden.

Erstellen eines LinearGradientBrush

Die Farbverlaufsstopps eines Pinsel mit linearem Farbverlauf befinden sich auf einer Linie, der Farbverlaufsachse. Die Ausrichtung und Größe der Farbverlaufsachse können mithilfe der Eigenschaften StartPoint und EndPoint des Pinsels geändert werden. Durch Manipulation dieser Eigenschaften des Pinsels können Sie horizontale, vertikale und diagonale Farbverläufe erstellen, die Richtung des Farbverlaufs umkehren, die Ausbreitung des Farbverlaufs verdichten und vieles mehr.

Die Eigenschaften StartPoint und EndPoint beziehen sich auf den zu zeichnenden Bereich. (0,0) stellt die obere linke Ecke und der Punkt (1,1) die untere rechte Ecke des Bereichs dar, der gezeichnet wird. Das folgende Diagramm zeigt die Farbverlaufsachse für einen diagonalen linearen Farbverlaufpinsel:

In diesem Diagramm zeigt die gestrichelte Linie die Farbverlaufsachse, die den Interpolationspfad des Farbverlaufs vom Anfangspunkt zum Endpunkt hervorhebt.

Erstellen eines horizontalen linearen Farbverlaufs

Um einen horizontalen linearen Farbverlauf zu erstellen, erstellen Sie ein LinearGradientBrush-Objekt, und legen Sie es StartPoint auf (0,0) und dessen EndPoint auf (1,0) fest. Fügen Sie dann der LinearGradientBrush.GradientStops-Auflistung zwei oder mehr GradientStop-Objekte hinzu, die die Farben im Farbverlauf und deren Positionen angeben.

Das folgende XAML-Beispiel zeigt ein horizontales LinearGradientBrush, das als Background eines Frame festgelegt ist:

<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>  

In diesem Beispiel wird der Hintergrund von Frame mit einer LinearGradientBrush gezeichnet, die horizontal von gelb zu grün interpoliert.

Erstellen eines vertikalen linearen Farbverlaufs

Um einen vertikalen linearen Farbverlauf zu erstellen, erstellen Sie ein LinearGradientBrush-Objekt, und legen Sie es StartPoint auf (0,0) und dessen EndPoint auf (0,1) fest. Fügen Sie dann der LinearGradientBrush.GradientStops-Auflistung zwei oder mehr GradientStop-Objekte hinzu, die die Farben im Farbverlauf und deren Positionen angeben.

Das folgende XAML-Beispiel zeigt ein vertikales LinearGradientBrush, das als Background eines Frame festgelegt ist:

<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>

In diesem Beispiel wird der Hintergrund von Frame mit einer LinearGradientBrush gezeichnet, die vertikal von gelb zu grün interpoliert.

Erstellen eines diagonalen, linearen Farbverlaufs

Um einen diagonalen linearen Farbverlauf zu erstellen, erstellen Sie ein LinearGradientBrush-Objekt, und legen Sie es StartPoint auf (0,0) und dessen EndPoint auf (1,1) fest. Fügen Sie dann der LinearGradientBrush.GradientStops-Auflistung zwei oder mehr GradientStop-Objekte hinzu, die die Farben im Farbverlauf und deren Positionen angeben.

Das folgende XAML-Beispiel zeigt ein diagonales LinearGradientBrush, das als Background eines Frame festgelegt ist:

<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>

In diesem Beispiel wird der Hintergrund von Frame mit einer LinearGradientBrush gezeichnet, die diagonal von gelb zu grün interpoliert.