Expression Blend使用筆刷

Expression Blend可以讓我們十分友善的建立基于WPF的UI，在本文中，我會介紹如何使用WPF畫圖形，并使用顔色等元素去修飾圖形。

什麼是筆刷？

MSDN是這樣解釋的：Everything visible on your screen is visible because it was painted by a brush. For example, a brush is used to describe the background of a button, the foreground of text, and the fill of a shape. This topic introduces the concepts of painting with Windows Presentation Foundation (WPF) brushes and provides examples. Brushes enable you to paint user interface (UI) objects with anything from simple, solid colors to complex sets of patterns and images.

我們可以這樣了解：當我們要某區域的顔色的時候，我們可以使用筆刷。

在WPF中，顔色是由System.Windows.Media下的Color結構體來封裝的。Color有三種顔色R，G，B組成。 除了這三個屬性，Color還增加了一個alpha管道屬性A。它用來表示透明度（Opacity）。值為0時，表示透明（taransparent）。值為255時，表示不透明（opaque）。預設的顔色透明度為opaque。WPF提供了下面的函數來建立顔色。

Color clr = Color.FromRgb(r, g, b)

Color clr = Color.FromArgb(a, r, g, b)

     由RGB建立的顔色被稱為标準色sRGB。這對于螢幕輸出比較适用，而對于一些特殊情況，如列印輸出。顔色要求更豐富，此時可以采用scRGB 顔色。這兩種顔色之間有對應關系，改變一種得屬性也會影響另一種。System.Windows.Media提供了一Colors靜态類，包含了141種靜态屬性色。除了Transparent屬性傳回的顔色透明度為0。其他140種顔色傳回的顔色透明度都是255。 如：Color clr = Colors.PapayaWhip;

     當改變一個區域的背景色（Background）時，我們使用畫刷（Brush類）。Brush是一個抽象類。它的類層次關系如下：

<a href="http://blog.51cto.com/attachment/201105/124134353.jpg" target="_blank"></a>

下面以一個具體的Demo來示範如何使用Expression Blend來使用筆刷畫圖。最後的效果圖如下：

<a href="http://blog.51cto.com/attachment/201105/124159267.jpg" target="_blank"></a>

1.建立WPF應用程式，将其命名為WpfBrushes

2.選擇“對象和時間軸”面闆中的Window，導航到屬性面闆，注意此時的Name是Window，Type也是Window，表示你選擇的是目前的窗體。

3.将Width、Height都設為300，友善檢視效果，當然你也可以設定為其他的值。

4.導航到屬性面闆中的Brush，如下圖

5.如果我們想要做一個漸變的背景顔色，我們可以選擇Gradient Brush Tab，具體的說明如下圖（Gradient Brush 包括 線性漸變、路徑漸變）

<a href="http://blog.51cto.com/attachment/201105/124243658.jpg" target="_blank"></a>

6.我們可以注意到，漸變的方向是從上至下的，上面的顔色比下面的要深一些，怎樣改變漸變的方向呢？可以看到有一個圖示，點選它的時候會出來進階選項，如下圖，至于怎麼StartPoint、EndPoint是設定漸變的方向的，相信學過幾何的人都會

<a href="http://blog.51cto.com/attachment/201105/124339886.jpg" target="_blank"></a>

7.我們可以看到在左側的面闆中，也可以選擇漸變的方向，如下圖：

當我們選擇Gradient Tool的時候，會發現在窗體中出現一個箭頭，如下圖，我們可以拖拉、旋轉來達到我們想要的效果

8.當我們拖動、旋轉箭頭的時候，會發現屬性面闆中值也發生了相應的改變，如下圖

<a href="http://blog.51cto.com/attachment/201105/124502284.jpg" target="_blank"></a>

9.接下來，我們往窗體中添加Shape（圖形），從左側面闆中選擇橢圓（Ellipse）

<a href="http://blog.51cto.com/attachment/201105/124522956.jpg" target="_blank"></a>

将其拖到Window中

10.設定Shape的背景，我們可以使用上述的方法來填充圓形的顔色，如下圖：

<a href="http://blog.51cto.com/attachment/201105/124605499.jpg" target="_blank"></a>

11.我們可以在畫幾個這樣的shape，調整的好看些，如下圖（可能不怎麼好看，呵呵）

<a href="http://blog.51cto.com/attachment/201105/124625514.jpg" target="_blank"></a>

12.運作下程式就能看到最終的效果，你可以讓你的程式變得更加好看

13.對于其他的筆刷，可以使用類似的方法，這裡就不再重複了，有興趣的朋友可以自己嘗試着做一下

<a target="_blank" href="http://blog.51cto.com/attachment/201105/2621421_1306385257.rar"></a>

<a href="http://down.51cto.com/data/2358221" target="_blank">附件：http://down.51cto.com/data/2358221</a>

    本文轉自xshf12345 51CTO部落格，原文連結：http://blog.51cto.com/alexis/574545，如需轉載請自行聯系原作者