Xamarin.Forms Pinsel: Radiale Farbverläufe

Die RadialGradientBrush Klasse wird von der GradientBrush Klasse abgeleitet und zeichnet einen Bereich mit einem radialen Farbverlauf, der zwei oder mehr Farben über einen Kreis verschmilzt. GradientStop-Objekte werden verwendet, um die Farben im Farbverlauf und ihre Positionen zu bestimmen. Weitere Informationen zu GradientStop Objekten finden Sie unter Xamarin.Forms Pinsel: Farbverläufe.

Die RadialGradientBrush-Klasse definiert die folgenden Eigenschaften:

• Center vom Typ Point, der den Mittelpunkt des Kreises für den Radialverlauf darstellt. Der Standardwert dieser Eigenschaft ist (0.5,0.5).
• Radius vom Typ double, der den Radius des Kreises für den Radialverlauf darstellt. Der Standardwert dieser Eigenschaft ist 0.5.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

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

Hinweis

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

Erstellen eines Farbverlaufpinsels

Die Farbverlaufsstopps eines Radialverlaufpinsels werden entlang einer Farbverlaufsachse positioniert, die durch einen Kreis definiert ist. Die Farbverlaufsachse erstreckt sich vom Kreismittelpunkt radial zu seinen Umfang. Die Position und Größe des Kreises können mithilfe der Pinseleigenschaften Center und Radius geändert werden. Der Kreis definiert den Endpunkt des Farbverlaufs. Daher definiert ein Farbverlaufsstopp bei 1,0 die Farbe am Kreisumfang. Ein Farbverlaufsstopp bei 0,0 definiert die Farbe in der Mitte des Kreises.

Um einen radialen Farbverlauf zu erstellen, erstellen Sie ein RadialGradientBrush-Objekt, und legen dessen Center- und Radius-Eigenschaften fest. Fügen Sie dann zwei oder mehr GradientStop-Objekte zur RadialGradientBrush.GradientStops-Sammlung hinzu, die die Farben im Farbverlauf und deren Positionen angeben.

Das folgende XAML-Beispiel zeigt einen RadialGradientBrush, der als Background von einem Frame festgelegt ist:

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

In diesem Beispiel wird der Hintergrund des Frame mit einem RadialGradientBrush gefärbt, der von Rot zu Dunkelblau interpoliert. Die Mitte des radialen Farbverlaufs wird in der Mitte von dem Frame positioniert:

Im folgenden XAML-Beispiel wird die Mitte des Radialverlaufs in die obere linke Ecke des Frame verschoben:

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

In diesem Beispiel wird der Hintergrund des Frame mit einem RadialGradientBrush gefärbt, der von Rot zu Dunkelblau interpoliert. Die Mitte des radialen Farbverlaufs befindet sich in der oberen linken Ecke des Frame:

Im folgenden XAML-Beispiel wird die Mitte des Radialverlaufs in die untere rechte Ecke des Frame verschoben:

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

In diesem Beispiel wird der Hintergrund des Frame mit einem RadialGradientBrush gefärbt, der von Rot zu Dunkelblau interpoliert. Die Mitte des radialen Farbverlaufs befindet sich unten rechts im Frame:

Verwandte Links

• Xamarin.Forms Pinsel: Farbverläufe