Xamarin.Forms Pinsel: Lineare Farbverläufe

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Die LinearGradientBrush -Klasse wird von der GradientBrush -Klasse abgeleitet und zeichnet einen Bereich mit einem linearen Farbverlauf, der zwei oder mehr Farben entlang einer Linie kombiniert, die als Farbverlaufsachse bezeichnet wird. GradientStop -Objekte werden verwendet, um die Farben im Farbverlauf und deren Positionen anzugeben. Weitere Informationen zu GradientStop -Objekten finden Sie unter Xamarin.Forms Pinsel: Farbverläufe.

Die LinearGradientBrush-Klasse definiert die folgenden Eigenschaften:

  • StartPoint, vom Typ Point, der die zweidimensionalen Anfangskoordinaten des linearen Farbverlaufs darstellt. Der Standardwert dieser Eigenschaft ist (0,0).
  • EndPointvom Typ Point, der die zweidimensionalen Endkoordinaten des linearen Farbverlaufs darstellt. 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 auch als Methode IsEmpty , die eine bool zurückgibt, die angibt, ob dem Pinsel Objekte GradientStop zugewiesen wurden.

Hinweis

Lineare Farbverläufe können auch mit der CSS-Funktion linear-gradient() erstellt werden.

Erstellen eines LinearGradientBrush

Die Farbverlaufsstopps eines linearen Farbverlaufpinsels werden entlang der Farbverlaufsachse positioniert. Die Ausrichtung und Größe der Farbverlaufsachse kann mithilfe der Eigenschaften und EndPoint des Pinsels StartPoint geändert werden. Durch Bearbeiten dieser Eigenschaften können Sie horizontale, vertikale und diagonale Farbverläufe erstellen, die Farbverlaufsrichtung umkehren, die Farbverlaufsbreite verdichten und vieles mehr.

Die StartPoint Eigenschaften und EndPoint sind relativ zum gezeichneten Bereich. (0,0) stellt die linke obere Ecke des gezeichneten Bereichs und (1,1) die untere rechte Ecke des gezeichneten Bereichs dar. Das folgende Diagramm zeigt die Farbverlaufsachse für einen diagonalen linearen Farbverlaufpinsel:

Rahmen mit diagonaler Farbverlaufsachse

In diesem Diagramm zeigt die gestrichelte Linie die Farbverlaufsachse, die den Interpolationspfad des Farbverlaufs vom Startpunkt zum Endpunkt hervor hebt.

Erstellen eines horizontalen linearen Farbverlaufs

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

Das folgende XAML-Beispiel zeigt eine horizontale LinearGradientBrush , die als von BackgroundFramefestgelegt 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 des Frame mit einem LinearGradientBrush gezeichnet, das horizontal von gelb zu grün interpoliert:

Rahmen, gezeichnet mit einem horizontalen LinearGradientBrush

Erstellen eines vertikalen linearen Farbverlaufs

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

Das folgende XAML-Beispiel zeigt eine Vertikale LinearGradientBrush , die als von BackgroundFramefestgelegt 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 des Frame mit einem LinearGradientBrush gezeichnet, das vertikal von gelb zu grün interpoliert:

Rahmen mit einem vertikalen LinearGradientBrush gezeichnet

Erstellen eines diagonalen linearen Farbverlaufs

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

Das folgende XAML-Beispiel zeigt eine Diagonale LinearGradientBrush , die als der Background eines Framefestgelegt 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 des Frame mit einem LinearGradientBrush gezeichnet, das sich diagonal von gelb zu grün interpoliert:

Rahmen mit einem diagonalen LinearGradientBrush gezeichnet