零元学Expression Blend 4 – Chapter 4元件重复运用的观念

本章将教大家Blend元件重复运用的观念，这在Silverlight设计中是非常重要的，另外加码赠送渐层工具(Gradient Tool)。

就是要让不会的新手都看的懂!

01 开始专案

打开Blend後选择Top Menu的 File->New Project(快捷键Shift+Ctrl+N)。选择Silverlight Application+ Website为你的项目类型。

02 建立一个New Item

为了达到元件重复运用，我们需要把所要做的元件，变成单独的Xaml，在Project上按右键，出现功能项目表後请以左键点选Add New Item。

03 选择 UserControl

我们选择 UserControl为我们的New Item，命名为Frog，因为我们要画青蛙!

04 选取档案进行编辑

我们可以在Progjects视窗中看到刚刚新增好的Frog.xaml档，DoubleClick它以进行编辑。

05 让我们来改变一下容器

在Objects and Timeline下的LayoutRoot上按右键点选Change layout type ->canvas，把容器变成canvas。

在之後的教学里，我将会一章一章很清楚的教大家怎麽使用Blend 4里面的容器，因为在设计中，容器是非常重要的，只要容器使用错误，非常容易版面大乱，也会做不出你想要的版面，

06 接下来使用Ellipse工具来画青蛙

我们直接使用Ellipse来把整个青蛙的雏形画出来，你可以看到只需要几个圆。

(贴心小提醒：按住Shift可以画出正圆，不按Shift则可以画出椭圆。)

07 帮青蛙填色吧!

请在Editor调整青蛙的颜色，若您不知怎麽选取颜色，请参考小猴子点部落的零元学Expression Blend4 -Chapter 3 熟悉操作第一步。

08 来点不一样的渐层效果吧!

如果你曾经尝试着使用渐层工具，但又做不出你想要的效果，不仿试试Blend 4 的渐层工具(Gradient Tool，快捷键G)。

请选择工具列Tools的Gradient Tool；看，左边的渐层区出现了一个箭头，可以利用它调整渐层的分布。

我们来调到想要的渐层样子；我想做成青蛙有昏昏欲睡的感觉。

好啦!!大功告成。

09 制成元件的最後阶段

请点选最上方TopMenu的Project->Rebuild Project。

(这个动做非常重要喔!!一定要做。)

等到状态列出现Build Succeed就是编译完了。

10 使用元件

再来我们要刺用刚刚做好的元件了，请双击MainPage.xaml後选取Tools工具列的箭头图示；直接在Search列上打上刚刚我们为青蛙所命名的档名：Frog。

看到了吗!我们的Frog以元件的方式出现了。

点击Frog後不放，直接拖到我们的主要工作区上，就是一只青蛙了!

11 以元件方式重复利用

看!要几只有几只~

(要记得善用元件方式来使用Blend 4 喔!你所做的设计就可以重复使用，甚至可以带到其他专案，对设计人员来说，可是事半功倍呢!)

本篇的教学就到此。

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您