在WPF中使用漸層筆刷(GradientBrush)

在WPF中要達到漸層效果非常簡單
只要在想要展示漸層效果的地方使用漸層筆刷上色就可以了
筆刷的分類可見在WPF中的筆刷(Brush)

而漸層筆刷分為兩個實體類別
第一類是線性漸層(LinearGradientBrush)
也就是遵照一個線性的方向去漸層

<Rectangle>
<Rectangle.Fill>
<!--gradually change according a vector-->
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

結果就像

StartPoint和EndPoint都是以該筆刷作用範圍的左上為(0,0)，右下為(1,1)
除非想要做接合效果(好幾個物件像是連在一起)，否則不會超出1
另外GradientStop.Offset是0-1之間的一個小數
相對於StartPoint為0，EndPoint為1的向量相對位置
上面的例子裡只有設起始點的顏色，所以就是單純的漸進
那如果增加一個

<GradientStop Offset="0.5" Color="Red" />

那就會變成

另外一類則是放射漸層(RadialGradientBrush)
也就是從一個點放射向外的漸層筆刷

<Rectangle>
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5"
Center="0.5,0.5"
RadiusX="0.5"
RadiusY="0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>

這裡面的座標跟線性漸層筆刷是一樣的
Center, RadiusX和RadiusY構成一個圓
然後從GradientOrigin為放射中心做出漸層

這邊的圓形會因為Brush作用的範圍而變形
另外，如果放射中心在圓的外面，那就會拉出一個椎形
比如將上面例子中的GradientOrigin改為"0,0"
那結果就會變成

--
參考資料
LinearGradientBrush 類別
RadialGradientBrush 類別