Brush In WPF

WPF中的畫刷

前面說過的，可以設置顏色的地方有，基本圖形的邊線Stroke, 填充Fill, 還有文字的顏色Foreground。當時都是直接設置成一個顏色值，如：<RectangleWidth="80"Height="60"Stroke="Blue"Fill="Red" />, 這樣就有了一個邊線是藍色的紅色矩形。但實際上這些可以設置顏色的屬性都是畫刷類型的，只是當直接寫成顏色值的時候，系統自動轉換成了純色畫刷。就像下面這樣：

<Rectangle Width="80" Height="60">    

 <Rectangle.Stroke>          

  <SolidColorBrush Color="Blue" />      

 </Rectangle.Stroke>      

 <Rectangle.Fill>          

  <SolidColorBrush Color="Red" />      

 </Rectangle.Fill>          

</Rectangle>

SliverLight中的畫刷有以下幾種：

SolidColorBrush: 純色畫刷。主要屬性有：Color。

LinearGradientBrush: 線性漸變畫刷。主要屬性有：StartPoint, EndPoint, GradientStop, SpreadMethod。

RedialGradientBrush: 徑向漸變畫刷。主要屬性有：Center, RadiusX, RadiusY, GradientOrigin, GradientStop。

ImageBrush: 圖像畫刷。主要屬性有：ImageSource, Stretch, AlignmentX, AlignmentY。

VideoBrush: 視頻畫刷。主要屬性有：SourceName, Stretch, AlignmentX, AlignmentY。

1. SolidColorBrush.

純色畫刷比較簡單，就是設置一個顏色值給Color屬性。但這個顏色值可以設置成：

顏色字符串：如 Red，Blue等等。總共有256個命名的顏色串。

RGB值：如 #0099FF, #F1F1F1等等。這個跟網頁中指定的顏色一樣。

ARGB值：如#880099FF, 比RGB多了Alpha通道信息，用於指定透明度。

RGB還有一種方式就是如：#09F， #809F，這就是把每一位重復，這樣就得到#0099FF， #880099FF。

2. LinearGradientBrush.

先寫個最簡單的。

<Canvas       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      <Rectangle Width="80" Height="60">          <Rectangle.Fill>              <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">                  <GradientStop Offset="0" Color="Blue" />                  <GradientStop Offset="1" Color="Red" />              </LinearGradientBrush>          </Rectangle.Fill>              </Rectangle>  </Canvas>

漸變的設計挺有意思的，StartPoint和EndPoint描述了一條線，左上角是0,0, 右下角是1,1，這條線是相對於對象的大小

的相對位置，也就是說，假定對象的寬度和高度都是1. 這樣，不管對象是什么大小，都可以用同樣的值來描述。如果不設置

StartPoint和EndPoint，那么就是從左上角到右下角的一條線。這條線就是漸變的基准線。

然后每一個GradientStop中的Offset就是基於這條線上的相對位置，同樣，這條線也假定長度為1. Offset就是0到1中間

的一個值，也就指定了基准線上位置。再指定一個Color, 就代表從上一個點到這個點的線性漸變顏色。

那么，上面的設置就使得rectangle填充成從右上角的藍色到右下角的紅色漸變。

注意，實際上這些相對值，就是StartPoint，EndPoint, Offset都是可以設成小於0或大於1的值。

下來，再看幾個例子。

橫向漸變：就是把StartPoint和EndPoint設成: ( 0, 0 ) –> ( 1, 0 ), 也就是Y值不變，X值變。

縱向漸變：就是把StartPoint和EndPoint設成：( 0, 0 ) –> ( 0, 1 ), 也就是X值不變，Y值變。

多個顏色值漸變：就是多放幾個GradientStop。

<Canvas       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      <Rectangle Width="80" Height="60" Canvas.Left="0">          <Rectangle.Fill>              <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">                  <GradientStop Offset="0" Color="Blue" />                  <GradientStop Offset="1" Color="Red" />              </LinearGradientBrush>          </Rectangle.Fill>              </Rectangle>        <Rectangle Width="80" Height="60" Canvas.Left="90">          <Rectangle.Fill>              <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">                  <GradientStop Offset="0" Color="Blue" />                  <GradientStop Offset="1" Color="Red" />              </LinearGradientBrush>          </Rectangle.Fill>      </Rectangle>        <Rectangle Width="80" Height="60" Canvas.Top="70">          <Rectangle.Fill>              <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">                  <GradientStop Offset="0" Color="Red" />                  <GradientStop Offset="0.2" Color="Orange" />                  <GradientStop Offset="0.4" Color="Yellow" />                  <GradientStop Offset="0.6" Color="Green" />                  <GradientStop Offset="0.8" Color="Blue" />                  <GradientStop Offset="1" Color="Purple" />              </LinearGradientBrush>          </Rectangle.Fill>      </Rectangle>        <Rectangle Width="80" Height="60" Canvas.Top="70" Canvas.Left="90">          <Rectangle.Fill>              <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">                  <GradientStop Offset="0" Color="Red" />                  <GradientStop Offset="0.4" Color="Blue" />                  <GradientStop Offset="0.4" Color="Yellow" />                  <GradientStop Offset="0.6" Color="Yellow" />                  <GradientStop Offset="0.6" Color="Green" />                  <GradientStop Offset="1" Color="Orange" />              </LinearGradientBrush>          </Rectangle.Fill>      </Rectangle>    </Canvas>

第1個是橫向漸變，第2個是縱向漸變，第3個是多顏色漸變，第4個是帶有純色的多顏色漸變。

最后，還有一個屬性SpreadMethod, 顧名思義，這就是覆蓋方法。這是當漸變沒有填充完整個對象時，那么剩下的部分用什么

顏色來填充。可以設的值有：

Pad: 這是默認值。就是用最后一個顏色值來填充。

Repeat: 重復。就是再從第一個顏色往后開始畫漸變。

Reflect: 反射。就是從最后一個往前開始畫漸變。

<Canvas       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">        <Rectangle Width="80" Height="60">          <Rectangle.Fill>              <LinearGradientBrush SpreadMethod="Repeat" StartPoint="0,0" EndPoint="0,0.5">                  <GradientStop Offset="0" Color="Red" />                  <GradientStop Offset="0.2" Color="Orange" />                  <GradientStop Offset="0.4" Color="Yellow" />                  <GradientStop Offset="0.6" Color="Green" />               </LinearGradientBrush>          </Rectangle.Fill>      </Rectangle>        <Rectangle Width="80" Height="60" Canvas.Left="90">          <Rectangle.Fill>              <LinearGradientBrush SpreadMethod="Reflect" StartPoint="0,0" EndPoint="0,0.5">                  <GradientStop Offset="0" Color="Red" />                  <GradientStop Offset="0.2" Color="Orange" />                  <GradientStop Offset="0.4" Color="Yellow" />                  <GradientStop Offset="0.6" Color="Green" />              </LinearGradientBrush>          </Rectangle.Fill>      </Rectangle>    </Canvas>

 

3. RedialGradientBrush.

線性漸變定義了一條基准線，而徑向漸變使用Center(圓心), RadiusX(x軸半徑), RadiusY(y軸半徑)，這三個屬性定義

了一個橢圓，GradientStop中的顏色就是從圓心到四周以橢圓漸變填充。如下面例子：

<Canvas       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">        <Ellipse Width="80" Height="60">          <Ellipse.Fill>              <RadialGradientBrush>                  <GradientStop Offset="0" Color="Blue" />                  <GradientStop Offset="1" Color="Red" />              </RadialGradientBrush>          </Ellipse.Fill>      </Ellipse>    </Canvas>

這里沒有Center, RadiusX, RadiusY, 默認這三個值分別是（0.5,0.5），（0.5），（0.5）。就是以中心點向四周漸變。

再看下面的例子, 把基准圓設成一個橢圓。

<Canvas       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">        <Ellipse Width="80" Height="60">          <Ellipse.Fill>              <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.25">                  <GradientStop Offset="0" Color="Blue" />                  <GradientStop Offset="1" Color="Red" />              </RadialGradientBrush>          </Ellipse.Fill>      </Ellipse>    </Canvas>

 

還有一個屬性，GradientOrigin，用來設置漸變色從那里開始的。

<Canvas       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">        <Ellipse Width="80" Height="80">          <Ellipse.Fill>              <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="0,0">                  <GradientStop Offset="0" Color="White" />                  <GradientStop Offset="1" Color="Blue" />              </RadialGradientBrush>          </Ellipse.Fill>      </Ellipse>        <Ellipse Width="80" Height="80" Canvas.Left="90">          <Ellipse.Fill>              <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="1,0">                  <GradientStop Offset="0" Color="White" />                  <GradientStop Offset="1" Color="Blue" />              </RadialGradientBrush>          </Ellipse.Fill>      </Ellipse>        <Ellipse Width="80" Height="80" Canvas.Top="90">          <Ellipse.Fill>              <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="0,1">                  <GradientStop Offset="0" Color="White" />                  <GradientStop Offset="1" Color="Blue" />              </RadialGradientBrush>          </Ellipse.Fill>      </Ellipse>        <Ellipse Width="80" Height="80" Canvas.Top="90" Canvas.Left="90">          <Ellipse.Fill>              <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="1,1">                  <GradientStop Offset="0" Color="White" />                  <GradientStop Offset="1" Color="Blue" />              </RadialGradientBrush>          </Ellipse.Fill>      </Ellipse>        </Canvas>

最后，RadialGradientBrush也有 SpreadMethod 屬性，用法跟LinearGradientBrush一樣。

 

4. ImageBrush.

ImageBrush的Stretch屬性，與<Image>中的Stretch一樣，這里就不說了。

<Canvas       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      <Ellipse Width="80" Height="80">          <Ellipse.Fill>              <ImageBrush ImageSource="Penguins_Small.jpg" />          </Ellipse.Fill>      </Ellipse>      </Canvas>

另外，如果圖像小於填充區域的話，還可以設置AlignmentX(可設為：Left, Center, Right)和AlignmentY( Top, 

Center, Bottom)屬性來實現對齊方式。

 

5. VideoBrush.

<Canvas       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      <MediaElement x:Name="myVideo" AutoPlay="True" Source="test.wmv" Volume="4" Opacity="0"/>      <Ellipse Width="80" Height="80">          <Ellipse.Fill>              <VideoBrush SourceName="myVideo" Stretch="Fill"/>          </Ellipse.Fill>      </Ellipse>      </Canvas>

此文僅用於學習記錄。
From:  http://www.cnblogs.com/chukaren/archive/2010/03/16/1652831.html