Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
In diesem Thema wird beschrieben, wie Sie mit SolidColorBrush, LinearGradientBrush und RadialGradientBrush-Objekten in Einzelfarben, linearen und radialen Farbverläufen zeichnen.
Zeichnen eines Bereichs mit einer Volltonfarbe
Einer der häufigsten Vorgänge auf jeder Plattform ist das Ausfüllen eines Bereichs mit einem soliden Color. Um diese Aufgabe auszuführen, stellt Windows Presentation Foundation (WPF) die SolidColorBrush Klasse bereit. In den folgenden Abschnitten werden die verschiedenen Methoden zum Malen mit einem SolidColorBrush beschrieben.
Verwenden eines SolidColorBrush in "XAML"
Verwenden Sie eine der folgenden Optionen, um einen Bereich mit einer Volltonfarbe in XAML zu zeichnen.
Wählen Sie einen vordefinierten Volltonfarbpinsel anhand des Namens aus. Sie können beispielsweise die Schaltflächen Background auf "Rot" oder "Mittelblau" festlegen. Eine Liste anderer vordefinierter Volltonpinsel finden Sie in den statischen Eigenschaften der Brushes Klasse. Es folgt ein Beispiel.
<!-- 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 Mengen von Rot, Grün und Blau angeben, die in einer einzigen Volltonfarbe kombiniert werden sollen. Das Format für die Angabe einer Farbe aus der 32-Bit-Palette lautet "#rrggbb", wobei rr eine zweistellige hexadezimale Zahl ist, die die relative Rotmenge angibt, gg gibt die Grünmenge an, und bb gibt die Blaumenge an. Darüber hinaus kann die Farbe als "#aarrggbb" angegeben werden, wobei aa den Alphawert oder die Transparenz der Farbe angibt. Mit diesem Ansatz können Sie Farben erstellen, die teilweise transparent sind. Im folgenden Beispiel wird der Background eines Button mithilfe der hexadezimalen Schreibweise auf vollständig undurchsichtiges Rot gesetzt.
<!-- This button's background is painted with a red SolidColorBrush, described using hexadecimal notation. --> <Button Background="#FFFF0000">A Button</Button>Verwenden Sie die Syntax für Eigenschaftstags, um ein SolidColorBrush zu beschreiben. Diese Syntax ist ausführlicher, ermöglicht Ihnen jedoch die Angabe weiterer Einstellungen, wie zum Beispiel die Deckkraft des Pinsels. Im folgenden Beispiel werden die Background Eigenschaften von zwei Button Elementen auf vollständig undurchsichtig rot festgelegt. Die Farbe des ersten Pinsels wird mithilfe eines vordefinierten Farbnamens beschrieben. Die Farbe des zweiten Pinsels wird mithilfe der Hexadezimalnotation beschrieben.
<!-- 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>
Malen mit einem SolidColorBrush im Code
Wenn Sie einen Bereich mit einer Volltonfarbe im Code zeichnen möchten, verwenden Sie eine der folgenden Optionen.
Verwenden Sie einen der vordefinierten Pinsel, die von der Brushes Klasse bereitgestellt werden. Im folgenden Beispiel wird das Background eines Button auf Red gesetzt.
Button myButton = new Button(); myButton.Content = "A Button"; myButton.Background = Brushes.Red;Erstellen Sie ein SolidColorBrush und legen Sie dessen Color-Eigenschaft mithilfe einer Color-Struktur fest. Sie können eine vordefinierte Farbe aus der Colors Klasse verwenden oder eine Color mithilfe der statischen FromArgb Methode erstellen.
Das folgende Beispiel zeigt, wie die Color Eigenschaft einer mithilfe einer SolidColorBrush vordefinierten Farbe festgelegt wird.
Button myButton = new Button(); myButton.Content = "A Button"; SolidColorBrush mySolidColorBrush = new SolidColorBrush(); mySolidColorBrush.Color = Colors.Red; myButton.Background = mySolidColorBrush;
Mit der Statischen FromArgb können Sie die Alpha-, Rot-, Grün- und Blauwerte der Farbe angeben. Der typische Bereich für jeden dieser Werte ist 0-255. Beispielsweise gibt ein Alphawert von 0 an, dass eine Farbe vollständig transparent ist, während ein Wert von 255 angibt, dass die Farbe vollständig undurchsichtig ist. Ebenso gibt ein roter Wert von 0 an, dass eine Farbe kein Rot enthält, während ein Wert von 255 angibt, dass eine Farbe die maximale Menge an Rot möglich hat. Im folgenden Beispiel wird die Farbe eines Pinsels durch Angeben von Alpha-, Rot-, Grün- und Blauwerten beschrieben.
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 Farben finden Sie im Color Referenzthema.
Malen eines Bereichs mit einem Farbverlauf
Ein Farbverlaufpinsel zeichnet einen Bereich mit mehreren Farben, die sich entlang einer Achse miteinander verbinden. Sie können sie verwenden, um Eindrücke von Licht und Schatten zu erstellen, sodass Ihre Steuerelemente ein dreidimensionales Gefühl erhalten. Sie können sie auch verwenden, um Glas, Chrom, Wasser und andere glatte Oberflächen zu simulieren. WPF stellt zwei Arten von Farbverlaufpinsel bereit: LinearGradientBrush und RadialGradientBrush.
Lineare Farbverläufe
Ein LinearGradientBrush malt ein Gebiet mit einem Gradienten, der entlang einer Linie definiert ist, der Gradientenachse. Sie geben die Farben des Farbverlaufs und deren Position entlang der Farbverlaufsachse mithilfe von GradientStop Objekten an. Sie können auch die Farbverlaufsachse ändern, mit der Sie horizontale und vertikale Farbverläufe erstellen und die Farbverlaufsrichtung umkehren können. Die Gradientenachse wird im nächsten Abschnitt beschrieben. Standardmäßig wird ein diagonaler Farbverlauf erstellt.
Das folgende Beispiel zeigt den Code, der einen linearen Farbverlauf mit vier Farben erstellt.
<!-- 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:
Hinweis
In den Farbverlaufsbeispielen in diesem Thema wird das Standardkoordinatensystem zum Festlegen von Anfangs- und Endpunkten verwendet. Das Standardkoordinatensystem ist relativ zu einem umgebenden Feld: 0 gibt 0 Prozent des umgebenden Felds an, und 1 gibt 1 100 Prozent des umgebenden Felds an. Sie können dieses Koordinatensystem ändern, indem Sie die eigenschaft MappingMode auf den Wert Absolutefestlegen. Ein absolutes Koordinatensystem ist nicht relativ zu einem umgebenden Feld. Werte werden direkt im lokalen Raum interpretiert.
Der GradientStop ist der grundlegende Baustein eines Farbverlaufpinsels. Ein Farbverlaufsstopp spezifiziert ein Color an einem Offset entlang der Farbverlaufsachse.
Die Eigenschaft des Farbverlaufpunkts Color bestimmt die Farbe des Farbverlaufpunkts. Sie können die Farbe mithilfe einer vordefinierten Farbe (bereitgestellt durch die Colors Klasse) oder durch Angeben von ScRGB- oder ARGB-Werten festlegen. In XAML können Sie auch hexadezimale Schreibweise verwenden, um eine Farbe zu beschreiben. Weitere Informationen finden Sie in der Color Struktur.
Die Eigenschaft des Farbverlaufstopps Offset gibt die Position der Farbe des Farbverlaufsstopps auf der Farbverlaufsachse an. Der Offset ist ein Double, der von 0 bis 1 reicht. Je näher der Offsetwert eines Farbverlaufsstopps bei 0 ist, desto näher liegt die Farbe am Anfang des Farbverlaufs. Je näher der Offsetwert des Farbverlaufs auf 1 liegt, desto näher liegt die Farbe am Ende des Farbverlaufs.
Die Farbe jedes Punkts zwischen den Farbverlaufsstopps wird linear als Kombination der Farben interpoliert, die von den beiden begrenzenden Farbverlaufstopps angegeben werden. In der folgenden Abbildung werden die Verlaufsstopps im vorherigen Beispiel hervorgehoben. Die Kreise markieren die Position von Farbverlaufspunkten, und eine gestrichelte Linie zeigt die Farbverlaufsachse.
Der erste Farbverlaufsstopp gibt die Farbe Gelb bei einem Offset von 0.0 an. Der zweite Gradientenstopp gibt die Farbe Rot mit einem Offset von 0.25. Die Punkte zwischen diesen beiden Stopps ändern sich allmählich von Gelb in Rot, während Sie entlang der Farbverlaufsachse von links nach rechts wechseln. Der dritte Farbverlaufspunkt gibt die Farbe Blau bei einem Offset von 0.75 an. Die Punkte zwischen dem zweiten und dritten Farbverlaufspunkt verlaufen allmählich von Rot zu Blau. Der vierte Farbverlaufsstopp gibt die Farbe Limettengrün bei einem Offset von 1.0 an. Die Farbe zwischen dem dritten und vierten Verlaufsstopp wechselt allmählich von Blau zu Limettengrün.
Die Farbverlaufsachse
Wie bereits erwähnt, werden die Farbverlaufsstopps eines linearen Farbverlaufspinsels entlang einer Linie, der Farbverlaufsachse, positioniert. Sie können die Ausrichtung und Größe der Linie mithilfe der Pinsel StartPoint - und EndPoint Eigenschaften ändern. Wenn Sie StartPoint und EndPoint beim Pinsel anpassen, können Sie horizontale und vertikale Farbverläufe erstellen, die Farbverlaufsrichtung umkehren, die Farbverlaufsspannweite verdichten und vieles mehr.
Standardmäßig sind die linearen Gradient-Pinsel StartPoint und EndPoint relativ zu dem Bereich, der bemalt wird. Der Punkt (0,0) stellt die obere linke Ecke des gezeichneten Bereichs dar, und (1,1) stellt die untere rechte Ecke des gezeichneten Bereichs dar. Der Standardwert StartPoint eines LinearGradientBrush ist (0,0), und sein Standardwert EndPoint ist (1,1), wodurch ein diagonaler Farbverlauf erzeugt wird, der in der oberen linken Ecke beginnt und sich bis zur unteren rechten Ecke des bemalten Bereichs erstreckt. Die folgende Abbildung zeigt die Farbverlaufsachse eines linearen Farbverlaufpinsels mit Standard StartPoint und EndPoint.
Im folgenden Beispiel wird gezeigt, wie Sie einen horizontalen Farbverlauf erstellen, indem Sie StartPoint und EndPoint angeben. Beachten Sie, dass die Farbverlaufsstopps die gleichen sind wie in den vorherigen Beispielen. Durch einfaches Ändern der Elemente StartPoint und EndPoint wurde der Farbverlauf von diagonal zu horizontal geändert.
<!-- 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. Die Farbverlaufsachse ist mit einer gestrichelten Linie markiert, und die Farbverlaufsstopps werden mit Kreisen markiert.
Das nächste Beispiel zeigt, wie sie einen vertikalen Farbverlauf erstellen.
<!-- 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. Die Farbverlaufsachse ist mit einer gestrichelten Linie markiert, und die Farbverlaufsstopps werden mit Kreisen markiert.
Radiale Farbverläufe
Wie ein LinearGradientBrush malt ein RadialGradientBrush einen Bereich mit Farben, die entlang einer Achse miteinander vermischen. In den vorherigen Beispielen wurde gezeigt, wie die Achse eines linearen Farbverlaufpinsels eine gerade Linie ist. Die Achse eines radialen Farbverlaufpinsels wird durch einen Kreis definiert; seine Farben "strahlen" von seinem Ursprung nach außen aus.
Im folgenden Beispiel wird ein radialer Gradientenpinsel verwendet, um das Innere eines Rechtecks zu malen.
<!-- 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. Die Farbverlaufsstopps des Pinsels wurden hervorgehoben. Beachten Sie, dass, obwohl die Ergebnisse unterschiedlich sind, die Farbverlaufsstopps in diesem Beispiel mit den Farbverlaufsstopps in den vorherigen Beispielen eines linearen Farbverlaufs identisch sind.
Das GradientOrigin gibt den Startpunkt der Verlaufsachse eines radialen Verlaufspinsels an. Die Farbverlaufsachse verläuft vom Farbverlaufsursprung bis zum Farbverlaufskreis. Der Farbverlaufskreis eines Pinsels wird durch seine Eigenschaften Center, RadiusX und RadiusY definiert.
Die folgende Abbildung zeigt mehrere radiale Farbverläufe mit unterschiedlichen GradientOrigin, Center, RadiusX und RadiusY Einstellungen.
RadialGradientBrushes mit unterschiedlichen GradientOrigin-, Center-, RadiusX- und RadiusY-Einstellungen.
Angeben transparenter oder Partially-Transparent Farbverlaufsstopps
Da Verlaufsstopps keine Deckkrafteigenschaft haben, müssen Sie den Alphakanal der Farben in der ARGB-Hexadezimalnotation im Markup angeben oder die Color.FromScRgb-Methode verwenden, um Verlaufsstopps zu erstellen, die transparent oder teilweise transparent sind. In den folgenden Abschnitten wird erläutert, wie teilweise transparente Farbverlaufsstopps in XAML und Code erstellt werden.
Angeben der Farbdurchsichtigkeit in "XAML"
In XAML verwenden Sie die ARGB-Hexadezimalnotation, um die Deckkraft einzelner Farben anzugeben. Die ARGB-Hexadezimalnotation verwendet die folgende Syntax:
#
aarrggbb
Die aa in der vorherigen Zeile stellt einen zweistelligen Hexadezimalwert dar, der zum Angeben der Deckkraft der Farbe verwendet wird. Rr, gg und bb stellen jeweils einen zweistelligen Hexadezimalwert dar, der verwendet wird, um die Menge an Rot, Grün und Blau in der Farbe anzugeben. Jede hexadezimale Ziffer kann einen Wert von 0-9 oder A-F aufweisen. 0 ist der kleinste Wert, und F ist der größte. Ein Alphawert von 00 gibt eine vollständig transparente Farbe an, während ein Alphawert von FF eine vollständig undurchsichtige Farbe erstellt. Im folgenden Beispiel wird die HEXAdezimale ARGB-Notation verwendet, um zwei Farben anzugeben. Die erste ist teilweise transparent (sie hat einen Alphawert von x20), während die zweite vollständig undurchsichtig ist.
<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 Farbdurchsichtigkeit im Code
Wenn Sie Code verwenden, können Sie mit der statischen FromArgb Methode einen Alphawert angeben, wenn Sie eine Farbe erstellen. Die Methode verwendet vier Parameter vom Typ Byte. Der erste Parameter gibt den Alphakanal der Farbe an. die anderen drei Parameter geben die Rot-, Grün- und Blauwerte der Farbe an. Jeder Wert sollte zwischen 0 und 255 (einschließlich) liegen. Ein Alphawert von 0 gibt an, dass die Farbe vollständig transparent ist, während ein Alphawert von 255 angibt, dass die Farbe vollständig undurchsichtig ist. Im folgenden Beispiel wird die FromArgb Methode verwendet, um zwei Farben zu erzeugen. Die erste Farbe ist teilweise transparent (sie hat einen Alphawert von 32), während die zweite vollständig undurchsichtig ist.
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 verwenden, die es Ihnen ermöglicht, ScRGB-Werte zu nutzen, um eine Farbe zu erstellen.
Malen mit Bildern, Zeichnungen, Visuellen und Mustern
ImageBrush, DrawingBrushund VisualBrush Klassen ermöglichen es Ihnen, einen Bereich mit Bildern, Zeichnungen oder visuellen Elementen zu zeichnen. Informationen zum Zeichnen mit Bildern, Zeichnungen und Mustern finden Sie unter "Malerei mit Bildern, Zeichnungen und Visuellen Elementen".
Siehe auch
Zusammenarbeit auf GitHub
Die Quelle für diesen Inhalt finden Sie auf GitHub, wo Sie auch Issues und Pull Requests erstellen und überprüfen können. Weitere Informationen finden Sie in unserem Leitfaden für Mitwirkende.
.NET Desktop feedback