WPF學習筆記-用Expression Design製作向量圖然後匯出為XAML

第一次用Windows live writer寫東西，感覺不錯，哈哈~~

1.在白紙上完全憑感覺，想象來畫圖難度很大，尤其是象我這樣毫無美術基礎，毫無藝術細胞的人而言。因此可以找個參照物，比如一張數位照片，對著這個圖片描，可以大體上把物體的輪廓描出來。

2.Ctrl+C然後Ctrl+V，在Expression Design中添加一張位元影像，注意，此時Design會自動建立一個圖層(layer)，雙擊修改圖層名為MousePhoto:

3.單擊Layer面板右下角的New layer按鈕，添加新圖層MousePath，並將這個新圖層移到MousePhoto層的下面：

4.單擊MousePhoto層的鎖按鈕，鎖定此層，防止圖片移動。

5.在工具條中選擇B-Spline工具：

6.開始描滑鼠圖片的外輪廓，沿著外輪廓放置幾個錨固點。如果要作一條閉合曲線，可以將滑鼠指標指向起始點，此時曲線會自動閉合，然後單擊即可：

7.上面的幾個點只是粗略的定位，現在可以精確的調整每個點位置，或添加/刪除錨固點。

在工具箱中選擇Direct Select工具，調整各個錨固點的位置，使閉合缺陷盡量與滑鼠圖片的外輪廓重合：

 

經驗：平滑的曲線可以近似的看做一系列相切的圓弧串連而成。因此這些錨固點最好是放置在每段圓弧的切點和中間點處。

8.再次選擇B-Spline工具，畫滑鼠滑輪處的縫隙。這幾條縫隙中間有尖角，可以在添加尖角處錨固點之前按下alt鍵的方法來畫尖角：

 

外輪廓加一條縫隙完成後的樣子：

9.重複以上動作，完成滑鼠其餘部分的描繪：

10.這個“素描”看起來似乎比較單調乏味，沒有多少立體感，現在給她添加點顏色。在工具條中選擇Selection工具：

然後選中外側輪廓，在Appearance面板中選擇Fill，設定兩個Stop的顏色，

然後選擇Gradient Transform工具，調整顏色梯度的漸層方向：

這樣，我的滑鼠就看起來稍微好些了：

上面的這個東東灰不溜秋的，還是很彆扭。如果象實物一樣是彩色的，就好看多了。不過這應該是屬於美工(Designer)的任務了。

11.接下來將我的作品匯出為XAML，以供Blend使用。

12.選中所畫的滑鼠，然後選擇：File->Export…，彈出Export對話方塊：

配置Export Properties，然後點Export All按鈕。

13.開啟Expression Blend，選擇Add existing items,將Design中匯出的Mouse.xaml檔案添加到項目中。開啟這個檔案，就可以看到我的滑鼠了：

14.選中Mouse.xaml中的滑鼠，然後Ctrl+C，開啟上篇文章中的自訂按鈕所在檔案window1.xaml，Ctrl+V將其粘貼到Grid中，然後在window1.xaml中選中滑鼠圖案，將其拖到圓形自訂按鈕中：

按住alt鍵，然後放開滑鼠，即可將滑鼠圖片設定為圓形自訂按鈕的Content: