共用方式為

WPF 筆刷概觀

  • 發行項

更新：2007 年 11 月

您在螢幕上看見的項目之所以可見，是因為它們都是以筆刷繪製的。例如，筆刷可用以描述按鈕的背景 (Background)、文字的前景 (Foreground) 及圖案的填滿。本主題介紹以 Windows Presentation Foundation (WPF) 筆刷繪製的概念並提供範例。筆刷可以讓您以任何項目 (從簡單的純色到複雜的圖樣和影像集) 繪製使用者介面 (UI) 物件。

使用筆刷繪製

Brush 會以其輸出結果來「繪製」區域。不同的筆刷有不同類型的輸出。某些筆刷會以純色繪製區域，其他筆刷則會以漸層、圖樣、影像或繪圖來繪製區域。下圖顯示每個不同 Brush 型別的範例。

筆刷範例

筆刷類型

大多數視覺物件都可以讓您指定繪製它們的方式。下表列出一些您可以搭配 Brush 使用的常見物件和屬性。

類別

筆刷屬性

Border

BorderBrush, Background

Control

Background, Foreground

Panel

Background

Pen

Brush

Shape

Fill, Stroke

TextBlock

Background

下列各節說明不同的 Brush 型別，並提供各個型別的範例。

使用純色繪製

SolidColorBrush 會使用純色的 Color 繪製區域。有各種方法可以指定 SolidColorBrush 的 Color：例如，您可以指定其 Alpha、紅色、藍色及綠色色頻，或使用 Colors 類別所提供的其中一個預先定義色彩。

下列範例是使用 SolidColorBrush 來繪製 Rectangle 的 Fill。下圖顯示繪製後的矩形。

使用 SolidColorBrush 繪製的矩形

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

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

如需 SolidColorBrush 類別的詳細資訊，請參閱使用純色和漸層繪製的概觀。

使用線形漸層繪製

LinearGradientBrush 會使用線形漸層繪製區域。線形漸層會沿著某個線條 (漸層軸) 混合兩種以上的色彩。您可以使用 GradientStop 物件指定漸層中的色彩及其位置。

下列範例是使用 LinearGradientBrush 來繪製 Rectangle 的 Fill。下圖顯示繪製後的矩形。

使用 LinearGradientBrush 繪製的矩形

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

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

如需 LinearGradientBrush 類別的詳細資訊，請參閱使用純色和漸層繪製的概觀。

使用放射狀漸層繪製

RadialGradientBrush 會使用放射狀漸層繪製區域。放射狀漸層會在圓圈中混合兩種以上的色彩。如同 LinearGradientBrush 類別，您可以使用 GradientStop 物件指定漸層中的色彩及其位置。

下列範例是使用 RadialGradientBrush 來繪製 Rectangle 的 Fill。下圖顯示繪製後的矩形。

使用 RadialGradientBrush 繪製的矩形

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

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

如需 RadialGradientBrush 類別的詳細資訊，請參閱使用純色和漸層繪製的概觀。

使用影像繪製

ImageBrush 會使用 ImageSource 繪製區域。

下列範例是使用 ImageBrush 來繪製 Rectangle 的 Fill。下圖顯示繪製後的矩形。

使用影像繪製的矩形

ImageBrush 所繪製的矩形

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>

如需 ImageBrush 類別的詳細資訊，請參閱使用影像、繪圖和視覺效果繪製。

使用繪圖繪製

DrawingBrush 會使用 Drawing 繪製區域。Drawing 可以包含圖案、影像、文字及媒體。

下列範例是使用 DrawingBrush 來繪製 Rectangle 的 Fill。下圖顯示繪製後的矩形。

使用 DrawingBrush 繪製的矩形

使用 DrawingBrush 繪製的矩形

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>

如需 DrawingBrush 類別的詳細資訊，請參閱使用影像、繪圖和視覺效果繪製。

使用視覺效果繪製

VisualBrush 會使用 Visual 物件繪製區域。Visual 物件的範例包括 Button、Page 及 MediaElement。VisualBrush 也可以讓您將應用程式某部分的內容投射到另一個區域，這在建立倒影效果和放大螢幕某些部分時相當有用。

下列範例是使用 VisualBrush 來繪製 Rectangle 的 Fill。下圖顯示繪製後的矩形。

使用 VisualBrush 繪製的矩形

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


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

如需 VisualBrush 類別的詳細資訊，請參閱使用影像、繪圖和視覺效果繪製。

使用預先定義的筆刷和系統筆刷繪製

Windows Presentation Foundation (WPF) 提供一組預先定義的筆刷和系統筆刷，方便您快速繪製物件。

常見筆刷功能

Brush 物件提供 Opacity 屬性，可以用來使筆刷變成透明或部分透明。Opacity 值為 0 會讓筆刷完全透明，Opacity 值為 1 則會讓筆刷完全不透明。下列範例是使用 Opacity 屬性讓 SolidColorBrush 變成 25% 不透明。

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

如果筆刷包含部分透明的色彩，色彩的不透明值會以乘法的方式與筆刷的不透明值結合。例如，如果筆刷的不透明值為 0.5，且筆刷中使用的色彩的不透明值也是 0.5，則輸出色彩的不透明值就會是 0.25。

注意事項：

變更筆刷的不透明值比使用項目的 UIElement.Opacity 屬性變更整個項目的不透明值更有效率。

您可以使用筆刷的 Transform 或 RelativeTransform 屬性，旋轉、縮放、扭曲及平移筆刷的內容。如需詳細資訊，請參閱筆刷轉換概觀。

因為 Brush 物件是 Animatable 物件，所以可以顯示動畫。如需詳細資訊，請參閱動畫概觀。

Freezable 功能

Brush 類別繼承自 Freezable 類別，因此可以提供數項特殊功能：Brush 物件可宣告為資源、供多個物件共用和複製。此外，除了 VisualBrush 之外的所有 Brush 型別都可以變成唯讀以改善效能並成為安全執行緒 (Thread-Safe) 的。

如需 Freezable 物件提供之不同功能的詳細資訊，請參閱 Freezable 物件概觀。

如需 VisualBrush 物件為何無法凍結的詳細資訊，請參閱 VisualBrush 型別頁面。

請參閱

工作

筆刷範例

ImageBrush 範例

DrawingBrush 範例

VisualBrush 範例

概念

使用純色和漸層繪製的概觀

使用影像、繪圖和視覺效果繪製

Freezable 物件概觀

最佳化效能：其他建議

參考

Brush

Brushes

其他資源

筆刷 HOW TO 主題