Przegląd Pędzle WPF

Wszystko widoczne na ekranie jest widoczne, ponieważ zostało namalowane przez szczotkę. Na przykład szczotka służy do opisywania tła przycisku, pierwszego planu tekstu i wypełnienia kształtu. W tym temacie przedstawiono pojęcia dotyczące malowania za pomocą pędzli programu Windows Presentation Foundation (WPF) i przedstawiono przykłady. Pędzle umożliwiają malowanie obiektów interfejsu użytkownika (UI) z wszystkimi prostymi, solidnymi kolorami po złożone zestawy wzorców i obrazów.

Malowanie pędzlem

" Brush Maluje" obszar z jego danymi wyjściowymi. Różne szczotki mają różne typy danych wyjściowych. Niektóre pędzle malują obszar o stałym kolorze, a inne z gradientem, deseniem, obrazem lub rysunkiem. Na poniższej ilustracji przedstawiono przykłady poszczególnych Brush typów.

Brush types
Przykłady pędzla

Większość obiektów wizualnych umożliwia określenie sposobu ich malowania. W poniższej tabeli wymieniono niektóre typowe obiekty i właściwości, za pomocą których można użyć elementu Brush.

Klasa Właściwości pędzla
Border BorderBrush, Background
Control Background, Foreground
Panel Background
Pen Brush
Shape Fill, Stroke
TextBlock Background

W poniższych sekcjach opisano różne Brush typy i podano przykład każdego z nich.

Malowanie za pomocą koloru stałego

Element SolidColorBrush maluje obszar z solidnym Colorelementem . Istnieje wiele sposobów określania wartości typu : na przykład można określić ColorSolidColorBrushjego alfa, czerwony, niebieski i zielony kanał lub użyć jednego ze wstępnie zdefiniowanych kolorów dostarczonych przez klasę Colors .

W poniższym przykładzie użyto obiektu do SolidColorBrush malowania Fill obiektu Rectangle. Na poniższej ilustracji przedstawiono malowany prostokąt.

A rectangle painted using a SolidColorBrush
Prostokąt malowany przy użyciu narzędzia SolidColorBrush

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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a SolidColorBrush and use it to
' paint the rectangle.
Dim myBrush As New SolidColorBrush(Colors.Red)
exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
</Rectangle>

Aby uzyskać więcej informacji na temat SolidColorBrush klasy, zobacz Malowanie za pomocą kolorów stałych i gradientów — omówienie.

Malowanie z gradientem liniowym

Element LinearGradientBrush maluje obszar z gradientem liniowym. Gradient liniowy łączy co najmniej dwa kolory na linii, oś gradientu. Obiekty służą GradientStop do określania kolorów gradientu i ich położenia.

W poniższym przykładzie użyto obiektu do LinearGradientBrush malowania Fill obiektu Rectangle. Na poniższej ilustracji przedstawiono malowany prostokąt.

A rectangle painted using a LinearGradientBrush
Prostokąt malowany przy użyciu elementu LinearGradientBrush

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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a LinearGradientBrush and use it to
' paint the rectangle.
Dim myBrush As 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>

Aby uzyskać więcej informacji na temat LinearGradientBrush klasy, zobacz Malowanie za pomocą kolorów stałych i gradientów — omówienie.

Malowanie gradientem promieniowym

Obszar RadialGradientBrush jest malowany gradientem promieniowym. Gradient promieniowy łączy co najmniej dwa kolory w kółko. Podobnie jak w przypadku LinearGradientBrush klasy, obiekty służą GradientStop do określania kolorów gradientu i ich pozycji.

W poniższym przykładzie użyto obiektu do RadialGradientBrush malowania Fill obiektu Rectangle. Na poniższej ilustracji przedstawiono malowany prostokąt.

A rectangle painted using a RadialGradientBrush
Prostokąt malowany za pomocą radialGradientBrush

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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a RadialGradientBrush and use it to
' paint the rectangle.
Dim myBrush As 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>

Aby uzyskać więcej informacji na temat RadialGradientBrush klasy, zobacz Malowanie za pomocą kolorów stałych i gradientów — omówienie.

Malowanie za pomocą obrazu

Obiekt ImageBrush maluje obszar z elementem ImageSource.

W poniższym przykładzie użyto elementu do ImageBrush malowania Fill elementu Rectangle. Na poniższej ilustracji przedstawiono malowany prostokąt.

A Rectangle painted by an ImageBrush
Prostokąt malowany przy użyciu obrazu

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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create an ImageBrush and use it to
' paint the rectangle.
Dim myBrush As 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>

Aby uzyskać więcej informacji na temat ImageBrush klasy, zobacz Malowanie przy użyciu obrazów, rysunków i wizualizacji.

Malowanie za pomocą rysunku

Element DrawingBrush maluje obszar z elementem Drawing. Obiekt Drawing może zawierać kształty, obrazy, tekst i multimedia.

W poniższym przykładzie użyto obiektu do DrawingBrush malowania Fill obiektu Rectangle. Na poniższej ilustracji przedstawiono malowany prostokąt.

A rectangle painted using a DrawingBrush
Prostokąt malowany przy użyciu rysowaniaBrush

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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a DrawingBrush and use it to
' paint the rectangle.
Dim myBrush As New DrawingBrush()

Dim backgroundSquare As New GeometryDrawing(Brushes.White, Nothing, New RectangleGeometry(New Rect(0, 0, 100, 100)))

Dim aGeometryGroup As New GeometryGroup()
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(0, 0, 50, 50)))
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(50, 50, 50, 50)))

Dim checkerBrush As New LinearGradientBrush()
checkerBrush.GradientStops.Add(New GradientStop(Colors.Black, 0.0))
checkerBrush.GradientStops.Add(New GradientStop(Colors.Gray, 1.0))

Dim checkers As New GeometryDrawing(checkerBrush, Nothing, aGeometryGroup)

Dim checkersDrawingGroup As 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>

Aby uzyskać więcej informacji na temat DrawingBrush klasy, zobacz Malowanie przy użyciu obrazów, rysunków i wizualizacji.

Malowanie za pomocą wizualizacji

Obiekt VisualBrush maluje obszar Visual . Przykłady obiektów wizualizacji to Button, Pagei MediaElement. Element VisualBrush umożliwia również projekcję zawartości z jednej części aplikacji do innego obszaru. Jest to bardzo przydatne w przypadku tworzenia efektów odbicia i powiększania części ekranu.

W poniższym przykładzie użyto obiektu do VisualBrush malowania Fill obiektu Rectangle. Na poniższej ilustracji przedstawiono malowany prostokąt.

A rectangle painted using a VisualBrush
Prostokąt malowany przy użyciu narzędzia VisualBrush

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;

Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a VisualBrush and use it
' to paint the rectangle.
Dim myBrush As New VisualBrush()

'
' Create the brush's contents.
'
Dim aPanel As New StackPanel()

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

' Create some text.
Dim someText As New TextBlock()
someText.Text = "Hello, World"
Dim fSizeConverter As New FontSizeConverter()
someText.FontSize = CDbl(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>

Aby uzyskać więcej informacji na temat VisualBrush klasy, zobacz Malowanie przy użyciu obrazów, rysunków i wizualizacji.

Malowanie przy użyciu wstępnie zdefiniowanych i systemowych pędzli

Dla wygody program Windows Presentation Foundation (WPF) udostępnia zestaw wstępnie zdefiniowanych i systemowych pędzli, których można użyć do malowania obiektów.

Typowe funkcje pędzla

Brush obiekty zapewniają Opacity właściwość, która może służyć do tworzenia pędzla przezroczystego lub częściowo przezroczystego. Wartość 0 sprawia, że szczotka Opacity jest całkowicie przezroczysta, podczas gdy Opacity wartość 1 sprawia, że szczotka jest całkowicie nieprzezroczyste. W poniższym przykładzie użyto Opacity właściwości , aby uzyskać SolidColorBrush nieprzezroczyste 25 procent.

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

Jeśli szczotka zawiera kolory częściowo przezroczyste, wartość nieprzezroczystości koloru jest łączona przez mnożenie z wartością nieprzezroczystości pędzla. Jeśli na przykład szczotka ma nieprzezroczystość 0,5, a kolor używany w pędzlu ma również nieprzezroczystość 0,5, kolor wyjściowy ma nieprzezroczystość 0,25.

Uwaga

Bardziej wydajne jest zmienianie wartości nieprzezroczystości pędzla niż zmiana nieprzezroczystości całego elementu przy użyciu jego UIElement.Opacity właściwości.

Możesz obracać, skalować, wypaczać i tłumaczyć zawartość pędzla przy użyciu jej Transform właściwości lub RelativeTransform . Aby uzyskać więcej informacji, zobacz Omówienie przekształcania pędzla.

Ponieważ są Animatable obiektami, Brush obiekty mogą być animowane. Aby uzyskać więcej informacji, zobacz Omówienie animacji.

Funkcje zamrażalne

Ponieważ dziedziczy ona z Freezable klasy, Brush klasa udostępnia kilka specjalnych funkcji: Brush obiekty można zadeklarować jako zasoby, współdzielone między wieloma obiektami i sklonowane. Ponadto wszystkie Brush typy z wyjątkiem VisualBrush mogą być tylko do odczytu, aby zwiększyć wydajność i zapewnić bezpieczeństwo wątków.

Aby uzyskać więcej informacji na temat różnych funkcji udostępnianych przez Freezable obiekty, zobacz Omówienie obiektów z możliwością zamrażania.

Aby uzyskać więcej informacji na temat tego, dlaczego VisualBrush obiekty nie mogą być zamrożone, zobacz VisualBrush stronę typu.

Zobacz też