Übersicht über WPF-Pinsel

Artikel
08/20/2008

Aktualisiert: November 2007

Alles, was auf dem Bildschirm sichtbar ist, ist sichtbar, weil es mit einem Pinsel gezeichnet wurde. Mit einem Pinsel werden z. B. der Hintergrund einer Schaltfläche, der Vordergrund von Text und die Füllung einer Form beschrieben. In diesem Thema werden die Begriffe zum Zeichnen mit Windows Presentation Foundation (WPF)-Pinseln erklärt und Beispiele bereitgestellt. Mithilfe von Pinseln können Sie Benutzeroberfläche (user interface, UI)-Objekte, angefangen von einfachen Objekten über Objekte in Volltonfarbe bis hin zu Objekten mit komplexen Mustern und Bildern, zeichnen.

Zeichnen mit einem Pinsel

Ein Brush "zeichnet" einen Bereich mit zugehöriger Ausgabe. Je nach Pinsel kann die Ausgabe einen anderen Typ aufweisen. Einige Pinsel zeichnen einen Bereich mit einer Volltonfarbe, andere mit einem Farbverlauf, Muster, Bild oder einer Zeichnung. Die folgende Abbildung zeigt Beispiele für jeden der verschiedenen Brush-Typen.

Beispiele für Pinsel

Pinseltypen

Bei den meisten visuellen Objekten können Sie angeben, wie sie gezeichnet werden. In der folgenden Tabelle werden einige allgemeine Objekte und Eigenschaften aufgelistet, mit denen Sie einen Brush verwenden können.

Klasse	Pinseleigenschaften
Border	BorderBrush, Background
Control	Background, Foreground
Panel	Background
Pen	Brush
Shape	Fill, Stroke
TextBlock	Background

In den folgenden Abschnitten werden die verschiedenen Brush-Typen beschrieben und jeweils ein Beispiel bereitgestellt.

Zeichnen mit einer Volltonfarbe

Ein SolidColorBrush zeichnet einen Bereich mit einer Vollton-Color. Es gibt viele Möglichkeiten, die Color für einen SolidColorBrush anzugeben: Sie können beispielsweise den Alpha-, Rot-, Blau- und Grünkanal angeben oder eine der vordefinierten Farben verwenden, die von der Colors-Klasse bereitgestellt werden.

Im folgenden Beispiel wird ein SolidColorBrush verwendet, um die Fill für ein Rectangle zu zeichnen. In der folgenden Abbildung ist das gezeichnete Rechteck dargestellt.

Mit SolidColorBrush gezeichnetes Rechteck

Ein mit einem SolidColorBrush gezeichnetes Rechteck

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a SolidColorBrush and use it to
// paint the rectangle.
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
</Rectangle>

Weitere Informationen über die SolidColorBrush-Klasse finden Sie unter Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen.

Zeichnen mit einem linearen Farbverlauf

Ein LinearGradientBrush zeichnet einen Bereich mit einem linearen Farbverlauf. Ein linearer Farbverlauf mischt zwei oder mehr Farben entlang einer Linie, der Farbverlaufsachse. Sie verwenden GradientStop-Objekte, um die Farben und ihre Positionen im Farbverlauf anzugeben.

Im folgenden Beispiel wird ein LinearGradientBrush verwendet, um die Fill für ein Rectangle zu zeichnen. In der folgenden Abbildung ist das gezeichnete Rechteck dargestellt.

Mit LinearGradientBrush gezeichnetes Rechteck

Ein mit einem LinearGradientBrush gezeichnetes Rechteck

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a LinearGradientBrush and use it to
// paint the rectangle.
LinearGradientBrush myBrush = new LinearGradientBrush();
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <LinearGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Weitere Informationen über die LinearGradientBrush-Klasse finden Sie unter Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen.

Zeichnen mit einem radialen Farbverlauf

Ein RadialGradientBrush zeichnet einen Bereich mit einem radialen Farbverlauf. Ein radialer Farbverlauf mischt zwei oder mehr Farben entlang eines Kreises. Wie bei der LinearGradientBrush-Klasse verwenden Sie GradientStop-Objekte, um die Farben und ihre Positionen im Farbverlauf anzugeben.

Im folgenden Beispiel wird ein RadialGradientBrush verwendet, um die Fill für ein Rectangle zu zeichnen. In der folgenden Abbildung ist das gezeichnete Rechteck dargestellt.

Mit RadialGradientBrush gezeichnetes Rechteck

Ein mit einem RadialGradientBrush gezeichnetes Rechteck

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a RadialGradientBrush and use it to
// paint the rectangle.
RadialGradientBrush myBrush = new RadialGradientBrush();
myBrush.GradientOrigin = new Point(0.75, 0.25);
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <RadialGradientBrush GradientOrigin="0.75,0.25">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Weitere Informationen über die RadialGradientBrush-Klasse finden Sie unter Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen.

Zeichnen mit einem Bild

Ein ImageBrush zeichnet einen Bereich mit einem ImageSource-Element.

Im folgenden Beispiel wird ein ImageBrush verwendet, um die Fill von einem Rectangle zu zeichnen. In der folgenden Abbildung ist das gezeichnete Rechteck dargestellt.

Mit einem Bild gezeichnetes Rechteck

Ein mit einem ImageBrush gezeichnetes Rechteck

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create an ImageBrush and use it to
// paint the rectangle.
ImageBrush myBrush = new ImageBrush();
myBrush.ImageSource = 
    new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg"  />
  </Rectangle.Fill>
</Rectangle>

Weitere Informationen über die ImageBrush-Klasse finden Sie unter Zeichnen mit Bildern, Zeichnungen und visuellen Elementen.

Zeichnen mit einer Zeichnung

Ein DrawingBrush zeichnet einen Bereich mit einem Drawing-Element. Eine Drawing kann Formen, Bilder, Text und Medien enthalten.

Im folgenden Beispiel wird ein DrawingBrush verwendet, um die Fill für ein Rectangle zu zeichnen. In der folgenden Abbildung ist das gezeichnete Rechteck dargestellt.

Mit DrawingBrush gezeichnetes Rechteck

Ein mit einem DrawingBrush gezeichnetes Rechteck

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a DrawingBrush and use it to
// paint the rectangle.
DrawingBrush myBrush = new DrawingBrush();

GeometryDrawing backgroundSquare =
    new GeometryDrawing(
        Brushes.White,
        null,
        new RectangleGeometry(new Rect(0, 0, 100, 100)));

GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));

LinearGradientBrush checkerBrush = new LinearGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.Black, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.Gray, 1.0));

GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);

DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);

myBrush.Drawing = checkersDrawingGroup;
myBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
myBrush.TileMode = TileMode.Tile;

exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,100,100" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing>
            <GeometryDrawing.Geometry>
              <GeometryGroup>
                <RectangleGeometry Rect="0,0,50,50" />
                <RectangleGeometry Rect="50,50,50,50" />
              </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Brush>
              <LinearGradientBrush>
                <GradientStop Offset="0.0" Color="Black" />
                <GradientStop Offset="1.0" Color="Gray" />
              </LinearGradientBrush>
            </GeometryDrawing.Brush>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

Weitere Informationen über die DrawingBrush-Klasse finden Sie unter Zeichnen mit Bildern, Zeichnungen und visuellen Elementen.

Zeichnen mit einem visuellen Element

Ein VisualBrush zeichnet einen Bereich mit einem Visual-Objekt. Beispiele für visuelle Objekte sind: Button, Page und MediaElement. Mit einem VisualBrush können Sie Inhalt von einem Teil der Anwendung in einen anderen Bereich projizieren. Dies ist beim Erstellen von Reflektionseffekten und beim Vergrößern von Teilen des Bildschirms sehr nützlich.

Im folgenden Beispiel wird ein VisualBrush verwendet, um die Fill für ein Rectangle zu zeichnen. In der folgenden Abbildung ist das gezeichnete Rechteck dargestellt.

Mit VisualBrush gezeichnetes Rechteck

Ein mit einem VisualBrush gezeichnetes Rechteck

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a VisualBrush and use it
// to paint the rectangle.
VisualBrush myBrush = new VisualBrush();

//
// Create the brush's contents.
//
StackPanel aPanel = new StackPanel();

// Create a DrawingBrush and use it to
// paint the panel.
DrawingBrush myDrawingBrushBrush = new DrawingBrush();
GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));
RadialGradientBrush checkerBrush = new RadialGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.MediumBlue, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.White, 1.0));
GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);
myDrawingBrushBrush.Drawing = checkers;
aPanel.Background = myDrawingBrushBrush;

// Create some text.
TextBlock someText = new TextBlock();
someText.Text = "Hello, World";
FontSizeConverter fSizeConverter = new FontSizeConverter();
someText.FontSize = (double)fSizeConverter.ConvertFromString("10pt");
someText.Margin = new Thickness(10);

aPanel.Children.Add(someText);

myBrush.Visual = aPanel;
exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <VisualBrush TileMode="Tile">
      <VisualBrush.Visual>
        <StackPanel>
          <StackPanel.Background>
            <DrawingBrush>
              <DrawingBrush.Drawing>
                <GeometryDrawing>
                  <GeometryDrawing.Brush>
                    <RadialGradientBrush>
                      <GradientStop Color="MediumBlue" Offset="0.0" />
                      <GradientStop Color="White" Offset="1.0" />
                    </RadialGradientBrush>
                  </GeometryDrawing.Brush>
                  <GeometryDrawing.Geometry>
                    <GeometryGroup>
                      <RectangleGeometry Rect="0,0,50,50" />
                      <RectangleGeometry Rect="50,50,50,50" />
                    </GeometryGroup>
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingBrush.Drawing>
            </DrawingBrush>
          </StackPanel.Background>
          <TextBlock FontSize="10pt" Margin="10">Hello, World!</TextBlock>
        </StackPanel>
      </VisualBrush.Visual>
    </VisualBrush>
  </Rectangle.Fill>
</Rectangle>

Weitere Informationen über die VisualBrush-Klasse finden Sie unter Zeichnen mit Bildern, Zeichnungen und visuellen Elementen.

Zeichnen mit vordefinierten Pinseln und Systempinseln

Der Einfachheit halber stellt Windows Presentation Foundation (WPF) ein Set von vordefinierten Pinseln und Systempinseln bereit, die Sie zum Zeichnen von Objekten verwenden können.

Eine Liste der verfügbaren vordefinierten Pinsel finden Sie in der Brushes-Klasse. Ein Beispiel, das die Verwendung eines vordefinierten Pinsels veranschaulicht, finden Sie unter Gewusst wie: Zeichnen eines Bereichs mit einer Volltonfarbe.
Eine Liste der verfügbaren Systempinsel finden Sie in der SystemColors-Klasse. Ein Beispiel finden Sie unter Gewusst wie: Zeichnen eines Bereichs mit einem Systempinsel.

Allgemeine Pinselfeatures

Brush-Objekte stellen eine Opacity-Eigenschaft bereit, die verwendet werden kann, um einen Pinsel transparent oder teilweise transparent zu machen. Bei einem Opacity-Wert von 0 (null) wird ein Pinsel völlig transparent, während er bei einem Opacity-Wert von 1 völlig deckend wird. Im folgenden Beispiel wird die Opacity-Eigenschaft verwendet, um für einen SolidColorBrush eine Durchlässigkeit von 25 Prozent festzulegen.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <SolidColorBrush Color="Blue" Opacity="0.25" />
  </Rectangle.Fill>
</Rectangle>

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
SolidColorBrush partiallyTransparentSolidColorBrush
    = new SolidColorBrush(Colors.Blue);
partiallyTransparentSolidColorBrush.Opacity = 0.25;
myRectangle.Fill = partiallyTransparentSolidColorBrush;

Wenn der Pinsel Farben enthält, die teilweise transparent sind, wird der Durchlässigkeitswert der Farbe durch Multiplikation mit dem Durchlässigkeitswert des Pinsels kombiniert. Wenn z. B. ein Pinsel einen Durchlässigkeitswert von 0,5 und eine im Pinsel verwendete Farbe ebenfalls einen Durchlässigkeitswert von 0,5 aufweist, hat die Ausgabefarbe einen Durchlässigkeitswert von 0,25.

Tipp

Es ist effizienter, den Durchlässigkeitswert eines Pinsels als die Durchlässigkeit eines gesamten Elements mit der UIElement.Opacity-Eigenschaft zu ändern.

Sie können den Inhalt eines Pinsels drehen, skalieren, neigen und übersetzen, indem Sie seine Transform-Eigenschaft oder RelativeTransform-Eigenschaft verwenden. Weitere Informationen finden Sie unter Übersicht über Pinseltransformationen.

Da es sich um Animatable-Objekte handelt, können Brush-Objekte animiert werden. Weitere Informationen finden Sie unter Übersicht über Animationen.

Features von Freezable

Da sie von der Freezable-Klasse erbt, stellt die Brush-Klasse mehrere spezielle Features bereit: Brush-Objekte können als Ressourcen deklariert, von mehreren Objekten gemeinsam genutzt und geklont werden. Außerdem können alle Brush-Typen, ausgenommen VisualBrush, zur Leistungssteigerung als schreibgeschützt und als threadsicher festgelegt werden.

Weitere Informationen über die verschiedenen von Freezable-Objekten bereitgestellten Features finden Sie unter Übersicht über Freezable-Objekte.

Weitere Informationen darüber, warum VisualBrush-Objekte nicht fixiert werden können, finden Sie auf der Seite für den VisualBrush-Typ.

Siehe auch

Freigeben über