Übersicht über das Zeichnen mit Volltonfarben und FarbverläufenPainting with Solid Colors and Gradients Overview

In diesem Thema wird beschrieben, wie Sie mit SolidColorBrush, LinearGradientBrush, und RadialGradientBrush Objekte zeichnen mit Volltonfarben, linearen Farbverläufen und radialen Farbverläufen.This topic describes how to use SolidColorBrush, LinearGradientBrush, and RadialGradientBrush objects to paint with solid colors, linear gradients, and radial gradients.

Zeichnen einen Bereich mit einer VolltonfarbePainting an Area with a Solid Color

Eine der am häufigsten verwendeten Vorgänge auf einer beliebigen Plattform ist zum Zeichnen eines Bereichs mit einer Volltonfarbe Color.One of the most common operations in any platform is to paint an area with a solid Color. Für diese Aufgabe Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) bietet die SolidColorBrush Klasse.To accomplish this task, Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides the SolidColorBrush class. Die folgenden Abschnitte beschreiben die verschiedenen Möglichkeiten zum Zeichnen einer SolidColorBrush.The following sections describe the different ways to paint with a SolidColorBrush.

Verwenden eines SolidColorBrush in „XAML“Using a SolidColorBrush in "XAML"

Zum Zeichnen eines Bereichs mit einer Volltonfarbe in XAMLXAML, verwenden Sie eine der folgenden Optionen.To paint an area with a solid color in XAMLXAML, use one of the following options.

  • Wählen Sie einen vordefinierten Volltonfarbenpinsel über den Namen aus.Select a predefined solid color brush by name. Sie können z. B. einer Schaltfläche festlegen Background auf "Rot" oder "MediumBlue".For example, you can set a button's Background to "Red" or "MediumBlue". Eine Liste mit anderen Pinsel mit Volltonfarbe vordefinierte, finden Sie unter die statischen Eigenschaften der Brushes Klasse.For a list of other predefined solid color brushes, see the static properties of the Brushes class. Nachfolgend finden Sie ein Beispiel:The following is an example.

    <!-- This button's background is painted with a red SolidColorBrush,
         described using a named color. -->
    <Button Background="Red">A Button</Button>
    
  • Wählen Sie eine Farbe aus der 32-Bit-Farbpalette aus, indem Sie die Anteile von Rot, Grün und Blau festlegen, aus denen sich eine Volltonfarbe zusammensetzt.Choose a color from the 32-bit color palette by specifying the amounts of red, green, and blue to combine into a single solid color. Das Format zum Festlegen einer Farbe aus der 32-Bit-Palette ist „ #rrggbb“, wobei mit dem zweistelligen Hexadezimalwert rr der relative Anteil von Rot, mit gg der Anteil von Grün und bb der Anteil von Blau festgelegt wird.The format for specifying a color from the 32-bit palette is "#rrggbb", where rr is a two digit hexadecimal number specifying the relative amount of red, gg specifies the amount of green, and bb specifies the amount of blue. Darüber hinaus kann die Farbe im Format „#Aarrggbb“ angegeben werden, wobei aa für den Alphawert, also die Transparenz der Farbe, steht.Additionally, the color can be specified as "#aarrggbb" where aa specifies the alpha value, or transparency, of the color. Dieser Ansatz ermöglicht Ihnen die Erstellung von Farben, die teilweise transparent sind.This approach enables you to create colors that are partially transparent. Im folgenden Beispiel die Background von einem Button auf vollständig deckendes Rot mithilfe der hexadezimalen Schreibweise festgelegt ist.In the following example, the Background of a Button is set to fully-opaque red using hexadecimal notation.

    <!-- This button's background is painted with a red SolidColorBrush,
         described using hexadecimal notation. -->
    <Button Background="#FFFF0000">A Button</Button>
    
  • Eigenschaftensyntax verwenden, um zu beschreiben eine SolidColorBrush.Use property tag syntax to describe a SolidColorBrush. Diese Syntax ist ausführlicher, jedoch können Sie zusätzliche Einstellungen, z.B. die Deckkraft des Pinsels, angeben.This syntax is more verbose but enables you to specify additional settings, such as the brush's opacity. Im folgenden Beispiel die Background Eigenschaften von zwei Button Elemente sind auf vollständig deckendes Rot festgelegt.In the following example, the Background properties of two Button elements are set to fully-opaque red. Die Farbe des ersten Pinsels wird mit einem vordefinierten Farbnamen beschrieben.The first brush's color is described using a predefined color name. Die Farbe des zweiten Pinsels wird mithilfe der Hexadezimalschreibweise beschrieben.The second brush's color is described using hexadecimal notation.

    <!-- Both of these buttons' backgrounds are painted with red 
         SolidColorBrush objects, described using object element
         syntax. -->
    <Button>A Button
    
      <Button.Background>
        <SolidColorBrush Color="Red" />
      </Button.Background>
    </Button>
    
    <Button>A Button
    
      <Button.Background>
        <SolidColorBrush Color="#FFFF0000" />
      </Button.Background>
    </Button>  
    

Zeichnen mit einem SolidColorBrush in CodePainting with a SolidColorBrush in Code

Zum Zeichnen eines Bereichs mit einer Volltonfarbe in Code, verwenden Sie eine der folgenden Optionen.To paint an area with a solid color in code, use one of the following options.

  • Verwenden Sie eine der vordefinierten Pinsel, bereitgestellt von der Brushes Klasse.Use one of the predefined brushes provided by the Brushes class. Im folgenden Beispiel die Background von einem Button nastaven NA hodnotu Red.In the following example, the Background of a Button is set to Red.

    Button myButton = new Button();
    myButton.Content = "A Button";
    myButton.Background = Brushes.Red;  
    
  • Erstellen einer SolidColorBrush und legen Sie seine Color Eigenschaft mit einem Color Struktur.Create a SolidColorBrush and set its Color property using a Color structure. Können Sie eine vordefinierte Farbe aus der Colors erstellen Klasse oder eine Color mit der statischen FromArgb Methode.You can use a predefined color from the Colors class or you can create a Color using the static FromArgb method.

    Im folgende Beispiel veranschaulicht die legen Sie die Color Eigenschaft eine SolidColorBrush mit einer vordefinierten Farbe.The following example shows how to set the Color property of a SolidColorBrush using a predefined color.

    Button myButton = new Button();
    myButton.Content = "A Button";
    
    SolidColorBrush mySolidColorBrush = new SolidColorBrush();
    mySolidColorBrush.Color = Colors.Red;
    myButton.Background = mySolidColorBrush;
    

Die statische FromArgb können Sie die Farbe des Alpha-, Rot-, Grün- und Blau-Werte angeben.The static FromArgb enables you to specify the color's alpha, red, green, and blue values. Der normale Bereich für jeden der folgenden Werte ist 0 bis 255.The typical range for each of these values is 0-255. Beispielsweise gibt der Alphawert 0 an, dass eine Farbe völlig transparent, während der Wert 255 angibt, dass sie vollständig deckend ist.For example, an alpha value of 0 indicates that a color is completely transparent, while a value of 255 indicates the color is completely opaque. Entsprechend gibt der Wert 0 für die Farbe Rot an, dass eine Farbe keinen Rotanteil hat, während der Wert 255 angibt, dass eine Farbe den maximalen Rotanteil aufweist.Likewise, a red value of 0 indicates that a color has no red in it, while a value of 255 indicates a color has the maximum amount of red possible. Im folgenden Beispiel wird die Farbe eines Pinsels beschrieben, indem rote, grüne und blaue Alphawert angegeben werden.In the following example, a brush's color is described by specifying alpha, red, green, and blue values.

Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = 
    Color.FromArgb(
        255, // Specifies the transparency of the color.
        255, // Specifies the amount of red.
        0, // specifies the amount of green.
        0); // Specifies the amount of blue.
        
myButton.Background = mySolidColorBrush;

Weitere Möglichkeiten zum Angeben von Farbe, finden Sie unter den Color Referenzthema.For additional ways to specify color, see the Color reference topic.

Zeichnen eines Bereichs mit einem FarbverlaufPainting an Area with a Gradient

Ein Farbverlaufspinsel zeichnet einen Bereich mit mehreren Farben, die sich auf einer Achse miteinander vermischen.A gradient brush paints an area with multiple colors that blend into each other along an axis. Sie können Farbverlaufspinsel verwenden, um Eindrücke von Licht und Schatten zu erzeugen und den Steuerelementen ein dreidimensionales Aussehen zu verleihen.You can use them to create impressions of light and shadow, giving your controls a three-dimensional feel. Sie können Sie auch verwenden, um Glas, Chrom, Wasser und andere glatte Oberflächen zu simulieren.You can also use them to simulate glass, chrome, water, and other smooth surfaces. WPFWPF stellt zwei Typen von Farbverlaufspinsel bereit: LinearGradientBrush und RadialGradientBrush.provides two types of gradient brushes: LinearGradientBrush and RadialGradientBrush.

Lineare FarbverläufeLinear Gradients

Ein LinearGradientBrush zeichnet einen Bereich mit einem Farbverlauf auf einer Linie, definiert der Farbverlaufsachse.A LinearGradientBrush paints an area with a gradient defined along a line, the gradient axis. Geben Sie die Farben des Farbverlaufs und ihren Speicherort entlang der Farbverlaufsachse mit GradientStop Objekte.You specify the gradient's colors and their location along the gradient axis using GradientStop objects. Sie können auch die Farbverlaufsachse ändern. Dies ermöglicht Ihnen, horizontale und vertikale Farbverläufe zu erstellen und die Richtung des Farbverlaufs umzukehren.You may also modify the gradient axis, which enables you to create horizontal and vertical gradients and to reverse the gradient direction. Die Farbverlaufsachse wird im nächsten Abschnitt beschrieben.The gradient axis is described in the next section. Standardmäßig wird ein diagonaler Farbverlauf erstellt.By default, a diagonal gradient is created.

Das folgende Beispiel zeigt den Code, der einen linearen Farbverlauf mit vier Farben erstellt.The following example shows the code that creates a linear gradient with four colors.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));
    
// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

Dieser Code erzeugt den folgenden Farbverlauf:This code produces the following gradient:

Ein diagonaler, linearer FarbverlaufA diagonal linear gradient

Hinweis: Die Beispiele für Farbverläufe in diesem Thema verwenden das Standardkoordinatensystem zum Festlegen der Start- und Endpunkte.Note: The gradient examples in this topic use the default coordinate system for setting start points and end points. Das Standardkoordinatensystem ist relativ zu einem umgebenden Feld: 0 gibt an, dass 0 Prozent des umgebenden Felds und 1, 100 Prozent des umgebenden Felds angibt.The default coordinate system is relative to a bounding box: 0 indicates 0 percent of the bounding box and 1 indicates 100 percent of the bounding box. Sie können dieses Koordinatensystem ändern, durch Festlegen der MappingMode -Eigenschaft auf den Wert Absolute.You can change this coordinate system by setting the MappingMode property to the value Absolute. Ein absolutes Koordinatensystem ist nicht relativ zu einem umgebenden Feld.An absolute coordinate system is not relative to a bounding box. Werte werden direkt im lokalen Raum interpretiert.Values are interpreted directly in local space.

Die GradientStop ist der Grundbaustein eines Farbverlaufspinsels.The GradientStop is the basic building block of a gradient brush. Ein Farbverlaufsstopp gibt eine Color an eine Offset auf der Farbverlaufsachse.A gradient stop specifies a Color at an Offset along the gradient axis.

  • Die Farbverlaufsstopps Color Eigenschaft gibt die Farbe des Farbverlaufsstopps.The gradient stop's Color property specifies the color of the gradient stop. Sie können die Farbe festlegen, indem Sie mit einer vordefinierten Farbe (gebotenen die Colors Klasse) oder indem Sie ScRGB- oder ARGB-Werte angeben.You may set the color by using a predefined color (provided by the Colors class) or by specifying ScRGB or ARGB values. In XAMLXAML können Sie auch die Hexadezimalschreibweise verwenden, um eine Farbe zu beschreiben.In XAMLXAML, you may also use hexadecimal notation to describe a color. Weitere Informationen finden Sie unter den Color Struktur.For more information, see the Color structure.

  • Die Farbverlaufsstopps Offset Eigenschaft gibt die Position des Farbverlaufsstopps Farbe auf der Farbverlaufsachse an.The gradient stop's Offset property specifies the position of the gradient stop's color on the gradient axis. Der Offset ist ein Double , die reicht von 0 bis 1.The offset is a Double that ranges from 0 to 1. Je näher ist Offsetwert des Farbverlaufsstopps bei 0 liegt, desto näher befindet sich die Farbe am Beginn des Farbverlaufs.The closer a gradient stop's offset value is to 0, the closer the color is to the start of the gradient. Je näher ist Offsetwert des Farbverlaufsstopps bei 1 liegt, desto näher befindet sich die Farbe am Ende des Farbverlaufs.The closer the gradient's offset value is to 1, the closer the color is to the end of the gradient.

Die Farbe jedes Punkts zwischen Farbverlaufsstopps wird als eine Kombination der Farben, die durch die zwei umschließenden Farbverlaufsstopps angegeben werden, linear interpoliert.The color of each point between gradient stops is linearly interpolated as a combination of the color specified by the two bounding gradient stops. Die folgende Abbildung zeigt die im vorherigen Beispiel erstellten Farbverlaufsstopps.The following illustration highlights the gradient stops in the previous example. Die Kreise markieren die Position der Farbverlaufsstopps, und eine gestrichelte Linie zeigt die Farbverlaufsachse an.The circles mark the position of gradient stops and a dashed line shows the gradient axis.

Farbverlaufstopps in einem linearen FarbverlaufGradient stops in a linear gradient

Der erste Farbverlaufsstopp gibt die Farbe Gelb bei einem Offset von 0.0 an.The first gradient stop specifies the color yellow at an offset of 0.0. Der zweite Farbverlaufsstopp gibt die Farbe Rot bei einem Offset von 0.25 an.The second gradient stop specifies the color red at an offset of 0.25. Die Farbe der Punkte zwischen diesen zwei Stopps ändert sich allmählich von Gelb zu Rot, wenn Sie sich von links nach rechts auf der Farbverlaufsachse bewegen.The points between these two stops gradually change from yellow to red as you move from left to right along the gradient axis. Der dritte Farbverlaufsstopp gibt die Farbe Blau bei einem Offset von 0.75 an.The third gradient stop specifies the color blue at an offset of 0.75. Die Farbe der Punkte zwischen dem zweiten und dritten Farbverlaufsstopp ändert sich allmählich von Rot zu Blau.The points between the second and third gradient stops gradually change from red to blue. Der vierte Farbverlaufsstopp gibt die Farbe Gelbgrün bei einem Offset von 1.0 an.The fourth gradient stop specifies the color lime green at an offset of 1.0. Die Farbe der Punkte zwischen dem dritten und vierten Farbverlaufsstopp ändert sich allmählich von Blau zu Gelbgrün.The points between the third and fourth gradient stops gradually change from blue to lime green.

Die FarbverlaufsachseThe Gradient Axis

Wie bereits erwähnt, befinden sich die Farbverlaufsstopps eines Pinsel mit linearem Farbverlauf auf einer Linie, der Farbverlaufsachse.As previously mentioned, a linear gradient brush's gradient stops are positioned along a line, the gradient axis. Sie können ändern, die Ausrichtung und die Größe der Linie des Pinsels mit StartPoint und EndPoint Eigenschaften.You may change the orientation and size of the line using the brush's StartPoint and EndPoint properties. Durch Bearbeiten des Pinsels StartPoint und EndPointkönnen erstellen Sie horizontale und vertikale Farbverläufe, Richtung des Farbverlaufs umkehren, zusammenfassen, die farbverlaufsausdehnung und vieles mehr.By manipulating the brush's StartPoint and EndPoint, you can create horizontal and vertical gradients, reverse the gradient direction, condense the gradient spread, and more.

In der Standardeinstellung den Pinsel mit linearem Farbverlauf des StartPoint und EndPoint sind relativ zum Bereich gezeichnet wird.By default, the linear gradient brush's StartPoint and EndPoint are relative to the area being painted. Der Punkt (0,0) stellt die obere linke Ecke und der Punkt (1,1) die untere rechte Ecke des Bereichs dar, der gezeichnet wird.The point (0,0) represents the upper-left corner of the area being painted, and (1,1) represents the lower-right corner of the area being painted. Der Standardwert StartPoint von einer LinearGradientBrush ist (0,0), und den Standardwert EndPoint ist (1,1), wodurch einen diagonalen Farbverlauf, beginnend mit der linken oberen Ecke, und erweitern in die unteren rechten Ecke des gezeichneten Bereichs erstellt.The default StartPoint of a LinearGradientBrush is (0,0), and its default EndPoint is (1,1), which creates a diagonal gradient starting at the upper-left corner and extending to the lower-right corner of the area being painted. Die folgende Abbildung zeigt die Farbverlaufsachse eines Pinsels mit linearem Farbverlauf mit standardmäßigen StartPoint und EndPoint.The following illustration shows the gradient axis of a linear gradient brush with default StartPoint and EndPoint.

Farbverlaufsachse für einen diagonalen linearen FarbverlaufGradient axis for a diagonal linear gradient

Das folgende Beispiel zeigt, wie ein horizontaler Farbverlauf durch Angabe des Pinsels StartPoint und EndPoint.The following example shows how to create a horizontal gradient by specifying the brush's StartPoint and EndPoint. Beachten Sie, dass die Farbverlaufsstopps wie im vorherigen Beispiel identisch sind; durch einfaches Ändern der StartPoint und EndPoint, wurde der Farbverlauf von Diagonal in Horizontal geändert.Notice that the gradient stops are the same as in the previous examples; by simply changing the StartPoint and EndPoint, the gradient has been changed from diagonal to horizontal.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
Rectangle horizontalFillRectangle = new Rectangle();
horizontalFillRectangle.Width = 200;
horizontalFillRectangle.Height = 100;

// Create a horizontal linear gradient with four stops.   
LinearGradientBrush myHorizontalGradient =
    new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0,0.5);
myHorizontalGradient.EndPoint = new Point(1,0.5);
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));
    
// Use the brush to paint the rectangle.
horizontalFillRectangle.Fill = myHorizontalGradient; 

Die folgende Abbildung zeigt den erstellten Farbverlauf.The following illustration shows the gradient that is created. Die Farbverlaufsachse wird mit einer gestrichelten Linie, und die Farbverlaufsstopps mit Kreisen gekennzeichnet.The gradient axis is marked with a dashed line, and the gradient stops are marked with circles.

Farbverlaufsachse für einen horizontalen linearen FarbverlaufGradient axis for a horizontal linear gradient

Das nächste Beispiel veranschaulicht die Erstellung eines vertikalen Farbverlaufs.The next example shows how to create a vertical gradient.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.   
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));
    
// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;  

Die folgende Abbildung zeigt den erstellten Farbverlauf.The following illustration shows the gradient that is created. Die Farbverlaufsachse wird mit einer gestrichelten Linie, und die Farbverlaufsstopps mit Kreisen gekennzeichnet.The gradient axis is marked with a dashed line, and the gradient stops are marked with circles.

Farbverlaufsachse für einen vertikalen FarbverlaufGradient axis for a vertical gradient

Strahlenförmige FarbverläufeRadial Gradients

Wie eine LinearGradientBrush, RadialGradientBrush zeichnet einen Bereich mit Farben, die auf einer Achse ineinander übergehen.Like a LinearGradientBrush, a RadialGradientBrush paints an area with colors that blend together along an axis. In den vorherigen Beispielen wurde gezeigt, dass die Achse eines Pinsels mit linearem Farbverlauf eine gerade Linie ist.The previous examples showed how a linear gradient brush's axis is a straight line. Die Achse eines Pinsels mit strahlenförmigem Farbverlauf wird durch einen Kreis definiert. Seine Farben „strahlen“ von seinem Ursprung nach außen.A radial gradient brush's axis is defined by a circle; its colors "radiate" outward from its origin.

Im folgenden Beispiel wird ein Pinsel mit strahlenförmigem Farbverlauf verwendet, um das Innere eines Rechtecks zu zeichnen.In the following example, a radial gradient brush is used to paint the interior of a rectangle.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

Die folgende Abbildung zeigt den im vorherigen Beispiel erstellten Farbverlauf.The following illustration shows the gradient created in the previous example. Die Farbverlaufsstopps des Pinsels wurden hervorgehoben.The brush's gradient stops have been highlighted. Beachten Sie, dass trotz der unterschiedlichen Ergebnisse die Farbverlaufsstopps in diesem Beispiel identisch mit den Farbverlaufsstopps in den vorherigen Beispielen mit linearem Farbverlauf sind.Notice that, even though the results are different, the gradient stops in this example are identical to the gradient stops in the previous linear gradient brush examples.

Farbverlaufstopps in einem radialen FarbverlaufGradient stops in a radial gradient

Die GradientOrigin gibt den Startpunkt der Farbverlaufsachse eines Pinsels mit radialen Farbverlauf.The GradientOrigin specifies the start point of a radial gradient brush's gradient axis. Die Farbverlaufsachse strahlt vom Farbverlaufsursprung zum Farbverlaufskreis aus.The gradient axis radiates from the gradient origin to the gradient circle. Farbverlaufskreis eines Pinsels wird definiert, indem die Center, RadiusX, und RadiusY Eigenschaften.A brush's gradient circle is defined by its Center, RadiusX, and RadiusY properties.

Die folgende Abbildung zeigt mehrere strahlende Farbverläufe mit unterschiedlichen GradientOrigin, Center, RadiusX, und RadiusY Einstellungen.The following illustration shows several radial gradients with different GradientOrigin, Center, RadiusX, and RadiusY settings.

RadialGradientBrush-EinstellungenRadialGradientBrush settings
RadialGradientBrushes mit unterschiedlichen GradientOrigin-, Center-, RadiusX- und RadiusY-Einstellungen.RadialGradientBrushes with different GradientOrigin, Center, RadiusX, and RadiusY settings.

Angeben transparenter oder teilweise transparenter FarbverlaufsstoppsSpecifying Transparent or Partially-Transparent Gradient Stops

Da Farbverlaufsstopps keine Opacity-Eigenschaft angeben, müssen Sie angeben, dass den Alphakanal für Farben mithilfe der über den ARGB--Hexadezimalschreibweise in Markup oder Verwenden der Color.FromScRgb Methode, um Farbverlaufsstopps zu erstellen, die transparent oder teilweise transparent sind.Because gradient stops do not provide an opacity property, you must specify the alpha channel of colors using ARGB hexadecimal notation in markup or use the Color.FromScRgb method to create gradient stops that are transparent or partially transparent. In den folgenden Abschnitten wird erläutert, wie teilweise transparente Farbverlaufsstopps in XAMLXAML und Code erstellt werden.The following sections explain how to create partially transparent gradient stops in XAMLXAML and code.

Angeben der Deckkraft einer Farbe in „XAML“Specifying Color Opacity in "XAML"

In XAMLXAML, Sie über den ARGB-Hexadezimalschreibweise verwenden, um die Deckkraft einzelner Farben anzugeben.In XAMLXAML, you use ARGB hexadecimal notation to specify the opacity of individual colors. Über den ARGB--Hexadezimalschreibweise verwendet die folgende Syntax:ARGB hexadecimal notation uses the following syntax:

# aa rrggbb# aa rrggbb

aa in der vorherigen Zeile stellt einen zweistelligen Hexadezimalwert dar, der verwendet wird, um die Deckkraft der Farbe anzugeben.The aa in the previous line represents a two-digit hexadecimal value used to specify the opacity of the color. rr, gg und bb repräsentieren jeweils einen zweistelligen Hexadezimalwert, der die Anteile von Rot, Grün und Blau einer Farbe angibt.The rr, gg, and bb each represent a two digit hexadecimal value used to specify the amount of red, green, and blue in the color. Jede Hexadezimalziffer kann einen Wert von 0-9 bzw. A-F haben.Each hexadecimal digit may have a value from 0-9 or A-F. 0 ist der kleinste und F der größte Wert.0 is the smallest value, and F is the greatest. Der Alphawert 00 gibt eine Farbe an, die vollständig transparent ist, während ein Alphawert FF eine vollständig deckende Farbe erstellt.An alpha value of 00 specifies a color that is completely transparent, while an alpha value of FF creates a color that is fully opaque. Im folgenden Beispiel wird über den ARGB--Hexadezimalschreibweise verwendet, um zwei Farben anzugeben.In the following example, hexadecimal ARGB notation is used to specify two colors. Die erste ist teilweise transparent (sie hat einen Alphawert von X20), während die zweite vollständig deckend ist.The first is partially transparent (it has an alpha value of x20), while the second is completely opaque.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Angeben der Deckkraft einer Farbe in CodeSpecifying Color Opacity in Code

Bei Verwendung von Code, der statischen FromArgb Methode ermöglicht es Ihnen, ein alpha-Wert an, wenn Sie eine Farbe erstellen.When using code, the static FromArgb method enables you to specify an alpha value when you create a color. Die Methode akzeptiert vier Parameter des Typs Byte.The method takes four parameters of type Byte. Der erste Parameter gibt den Alphakanal der Farbe an. Die anderen drei Parameter geben die Rot-, Grün- und Blauwerte der Farbe an.The first parameter specifies the alpha channel of the color; the other three parameters specify the red, green, and blue values of the color. Jeder Wert sollte zwischen einschließlich 0 und 255 liegen.Each value should be between 0 to 255, inclusive. Beispielsweise gibt der Alphawert 0 an, dass eine Farbe völlig transparent ist, während der Wert 255 angibt, dass sie vollständig deckend ist.An alpha value of 0 specifies that the color is completely transparent, while an alpha value of 255 specifies that the color is completely opaque. Im folgenden Beispiel die FromArgb Methode wird verwendet, um zwei Farben zu erzeugen.In the following example, the FromArgb method is used to produce two colors. Die erste ist teilweise transparent (sie hat einen Alphawert von 32), während die zweite vollständig deckend ist.The first color is partially transparent (it has an alpha value of 32), while the second is fully opaque.

LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

// This gradient stop is partially transparent.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

// This gradient stop is fully opaque. 
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = myLinearGradientBrush;

Alternativ können Sie die FromScRgb -Methode, die Sie ScRGB-Werten zu verwenden, um eine Farbe erstellen kann.Alternatively, you may use the FromScRgb method, which enables you to use ScRGB values to create a color.

Zeichnen mit Bildern, Zeichnungen, visuellen Elementen und MusternPainting with Images, Drawings, Visuals, and Patterns

ImageBrush, DrawingBrush, und VisualBrush Klassen ermöglichen es Ihnen, einen Bereich mit Bildern, Zeichnungen oder visuellen Elemente zeichnen.ImageBrush, DrawingBrush, and VisualBrush classes enable you to paint an area with images, drawings, or visuals. Informationen über Zeichnen mit Bildern, Zeichnungen und Mustern finden Sie unter Zeichnen mit Bildern, Zeichnungen und visuellen Elementen.For information about painting with images, drawings, and patterns, see Painting with Images, Drawings, and Visuals.

Siehe auchSee also