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

發行項
08/12/2011

本主題說明如何使用 SolidColorBrush、LinearGradientBrush 及 RadialGradientBrush 物件以純色、線形漸層及放射狀漸層繪製。

這個主題包含下列章節。

使用純色繪製區域
使用漸層繪製區域
線形漸層
放射狀漸層
指定透明或部分透明的漸層停駐點
使用影像、繪圖、視覺資料及模式繪製
相關主題

使用純色繪製區域

不論在什麼平台，最常見的作業之一就是使用純 Color 繪製區域。為了完成這個工作，Windows Presentation Foundation (WPF) 會提供 SolidColorBrush 類別 (Class)。下列各節會說明使用 SolidColorBrush 繪製的不同方式。

在 "XAML" 中使用 SolidColorBrush

若要在 XAML 中使用純色繪製區域，請選擇下列其中一個方法。

依據名稱選取預先定義的純色筆刷。例如，您可以將按鈕的 Background 設為 "Red" 或 "MediumBlue"。如需其他預先定義之純色筆刷的清單，請參閱 Brushes 類別的靜態 (Static) 屬性。以下是範例。
```

<Button Background="Red">A Button</Button>
```

選擇 32 位元色板的其中一個色彩，方法是指定單一純色之紅色、綠色及藍色的量來混合成某個色彩。指定 32 位元色板中的其中一個色彩時，格式為 "#rrggbb"，其中 rr 是兩位數字的十六進位數字，指定紅色的相對份量、gg 指定綠色的相對份量，而 bb 指定藍色的相對份量。此外，色彩可以指定為 "#aarrggbb"，其中 aa 指定色彩的 Alpha 值或透明度。這個方法可以讓您建立部分透明的色彩。在下列範例中，會使用十六進位標記法將 Button 的 Background 設為完全不透明的紅色。
```

<Button Background="#FFFF0000">A Button</Button>
```

使用屬性標記 (Tag) 語法來描述 SolidColorBrush。這個語法比較複雜，但是可以讓您指定額外設定，例如筆刷的不透明度。在下列範例中，兩個 Button 項目的 Background 屬性會設為完全不透明的紅色。第一個筆刷的色彩是用預先定義的色彩名稱來描述。第二個筆刷的色彩則是用十六進位標記法來描述。
```

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="Red" />
  </Button.Background>
</Button>

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="#FFFF0000" />
  </Button.Background>
</Button>  
```

在程式碼中使用 SolidColorBrush 繪製

若要在程式碼中使用純色繪製區域，請選擇下列其中一個方法。

使用 Brushes 類別提供的其中一個預先定義的筆刷。在下列範例中，Button 的 Background 設為 Red。
```
Button myButton = new Button();
myButton.Content = "A Button";
myButton.Background = Brushes.Red;  
```

使用 Color 結構建立 SolidColorBrush 並設定其 Color 屬性。您可以使用 Colors 類別中預先定義的色彩，或使用靜態 FromArgb 方法建立 Color。

下列範例顯示如何使用預先定義的色彩設定 SolidColorBrush 的 Color 屬性。
```
Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Red;
myButton.Background = mySolidColorBrush;
```

靜態 FromArgb 可以讓您指定色彩的 Alpha、紅色、綠色及藍色值。這些值的範圍通常都是 0-255。例如，Alpha 值為 0 時表示色彩是完全透明的，而值為 255 時表示色彩是完全不透明的。同樣地，紅色值為 0 時表示色彩中沒有紅色，而值為 255 時表示色彩中具有最大份量的紅色。在下列範例中，筆刷色彩是由指定 Alpha、紅色、綠色及藍色值加以描述。

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;

如需指定色彩的其他方法，請參閱 Color 參考主題。

使用漸層繪製區域

漸層筆刷會使用多種色彩繪製區域，這些色彩會沿著某個軸漸漸融合。您可以使用它們建立光影效果，讓控制項有立體的感覺。您也可以使用它們來模擬玻璃、金屬、水和其他平滑表面。 WPF 提供兩種類型的漸層筆刷：LinearGradientBrush 和 RadialGradientBrush。

線形漸層

LinearGradientBrush 會使用沿著某個線條 (即「漸層軸」) 定義的漸層來繪製區域。您可以使用 GradientStop 物件指定漸層的色彩及其在漸層軸上的位置。您也可以修改漸層軸，以建立水平和垂直漸層以及反轉漸層方向。漸層軸會在下一節中做說明。預設會建立對角線的漸層。

下列範例會顯示程式碼，用以建立由四個色彩組成的線形漸層。

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

這個程式碼會產生下列漸層。

對角線性漸層

注意：本主題中的漸層範例會使用預設座標系統設定起始點和結束點。預設座標系統是相對於週框方塊：0 表示週框方塊的 0%，而 1 表示週框方塊的 100%。您可以藉由將 MappingMode 屬性設為值 Absolute，變更這個座標系統。絕對座標系統不會相對於週框方塊。值會直接在本機空間中解譯。

GradientStop 是漸層筆刷的基本建置組塊 (Building Block)。漸層停駐點會指定漸層軸上位於某個 Offset 的 Color。

漸層停駐點的 Color 屬性指定漸層停駐點的色彩。您可以使用預先定義的色彩 (由 Colors 類別提供) 或指定 ScRGB 或 ARGB 值來設定色彩。在 XAML 中，您也可以使用十六進位標記法來描述色彩。如需詳細資訊，請參閱 Color 結構。
漸層停駐點的 Offset 屬性指定漸層停駐點色彩在漸層軸上的位置。位移是 Double 值，範圍從 0 到 1。漸層停駐點的位移值越接近 0，色彩就越接近漸層起始點。漸層的位移值越接近 1，色彩就越接近漸層結束點。

漸層停駐點之間每個點的色彩是以線性方式插補為兩個相鄰漸層停駐點之色彩的組合。下圖標出上一個範例中的漸層停駐點。圓圈表示漸層停駐點的位置，虛線則表示漸層軸。

線性漸層中的漸層停駐點

第一個漸層停駐點指定位移 0.0 處的色彩為黃色。第二個漸層停駐點指定位移 0.25 處的色彩為紅色。沿著漸層軸從左移到右時，這兩個停駐點之間的點會逐漸從黃色變成紅色。第三個漸層停駐點指定位移 0.75 處的色彩為藍色。第二個和第三個漸層停駐點之間的點會逐漸從紅色變成藍色。第四個漸層停駐點指定位移 1.0 處的色彩為淡黃綠色。第三個和第四個漸層停駐點之間的點會逐漸從藍色變成淡黃綠色。

漸層軸

之前已說明過，線形漸層筆刷的漸層停駐點的位置是沿著線條 (漸層軸) 決定。您可以使用筆刷的 StartPoint 和 EndPoint 屬性變更這個線條的方向和粗細。藉由管理筆刷的 StartPoint 和 EndPoint，您可以建立水平和垂直的漸層、反轉漸層方向、縮小漸層範圍等等。

根據預設，線形漸層筆刷的 StartPoint 和 EndPoint 是相對於要繪製的區域。 (0,0) 這個點表示要繪製之區域的左上角，而 (1,1) 則表示要繪製之區域的右下角。 LinearGradientBrush 的預設 StartPoint 為 (0,0)，預設 EndPoint 為 (1,1)，這樣會建立從要繪製之區域的左上角延伸至右下角的對角線漸層。下圖顯示具有預設 StartPoint 和 EndPoint 之線形漸層筆刷的漸層軸。

對角線性漸層的漸層軸

下列範例顯示如何藉由指定筆刷的 StartPoint 和 EndPoint 建立水平漸層。請注意，漸層停駐點與前述範例相同，只有變更 StartPoint 和 EndPoint，而漸層即從對角線變成水平。

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

下圖顯示建立的漸層。漸層軸以虛線標示，漸層停駐點則以圓圈標示。

水平線性漸層的漸層軸

下一個範例顯示如何建立垂直漸層。

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

下圖顯示建立的漸層。漸層軸以虛線標示，漸層停駐點則以圓圈標示。

垂直漸層的漸層軸

放射狀漸層

如同 LinearGradientBrush，RadialGradientBrush 會以沿著某個軸逐漸融合的色彩繪製區域。前述範例顯示出線形漸層筆刷的軸是條直線。放射狀漸層筆刷的軸則是由圓圈定義，其色彩會從其原點向外「放射」。

在下列範例中，會使用放射狀漸層筆刷來繪製矩形的內部。

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

下圖顯示在上一個範例中建立的漸層。其中標示了筆刷的漸層停駐點。請注意，雖然結果不同，但是這個範例中的漸層停駐點與前面線形漸層筆刷範例中的漸層停駐點是相同的。

放射狀漸層中的漸層停駐點

GradientOrigin 會指定放射狀漸層筆刷之漸層軸的起始點。漸層軸會從漸層原點放射至漸層圓圈。筆刷的漸層圓圈是由其 Center、RadiusX 及 RadiusY 屬性定義。

下圖顯示具有不同 GradientOrigin、Center、RadiusX 及 RadiusY 設定的數個放射狀漸層。

具有不同 GradientOrigin、中心、RadiusX 及 RadiusY 設定的 RadialGradientBrushes。

RadialGradientBrush 設定

指定透明或部分透明的漸層停駐點

因為漸層停駐點不提供不透明屬性，所以您必須在標記 (Markup) 中使用 ARGB 十六進位標記法指定 Alpha 色頻，或使用 Color.FromScRgb 方法建立透明或部分透明的漸層停駐點。下列各節會說明如何使用 XAML 和程式碼建立部分透明的漸層停駐點。如需設定整個筆刷的不透明度的詳細資訊，請參閱指定筆刷的不透明度一節。

在 "XAML" 中指定色彩不透明度

在 XAML 中，您可以使用 ARGB 十六進位標記法指定個別色彩的不透明度。 ARGB 十六進位標記法則使用下列語法：

#aarrggbb

上一行中的 aa 代表兩個位數的十六進位值，用來指定色彩的不透明度。 rr、gg 和 bb 分別代表兩個位數的十六進位值，用來指定紅色、綠色及藍色的數量。每個十六進位位數的值可以是 0-9 或 A-F。 0 是最小的值，F 是最大的值。 Alpha 值 00 指定色彩為完全透明，而 FF Alpha 值則會建立完全不透明的色彩。在下列範例中，會使用十六進位 ARGB 標記法指定兩個色彩。第一個是部分透明 (具有 x20 的 Alpha 值)，而第二個則是完全不透明。

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

在程式碼中指定色彩不透明度

使用程式碼建立色彩時，您可以利用靜態 FromArgb 方法指定 Alpha 值。這個方法接受四個 Byte 型別的參數。第一個參數會指定色彩的 Alpha 色頻，其他三個參數則會指定色彩的紅色、綠色及藍色值。每個值都應介於 0 到 255 之間 (含 0 和 255)。 Alpha 值為 0 會指定色彩為完全透明，而 Alpha 值為 255 則指定色彩為完全不透明。在下列範例中，會使用 FromArgb 方法產生兩個色彩。第一個色彩是部分透明 (具有 32 的 Alpha 值)，而第二個色彩是完全不透明。

            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;

或者，您也可以使用 FromScRgb 方法，這個方法可以讓您使用 ScRGB 值建立色彩。