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

简介: 原文:零元学Expression Blend 4 - Chapter 4元件重复运用的观念 本章将教大家Blend元件重复运用的观念,这在Silverlight设计中是非常重要的,另外加码赠送渐层工具(Gradient Tool)。
原文: 零元学Expression Blend 4 - Chapter 4元件重复运用的观念


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

?

本章将教大家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之路

 

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

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

 

 

目录
相关文章
零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果
原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图以及...
1046 0
零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果
原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Paths...
1035 0
零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术
原文:零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术 本章所介绍的是便利且快速的内建工具Clone ? 本章所介绍的是便利且快速的内建工具Clone ? ? 为什麽会说像是影分身之术呢? ? 请参照火影忍者(NARUTO): 《分身术》会分身术者,能以一身分出几身,几十身,乃至千百身。
1228 0
|
容器
零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用
原文:零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用 本章将教大家如何运用Blend的内建元件RaidoButton做出选单选项...
1230 0
零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步
原文:零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步 如果需要经常的使用某一项工具,总会希望能够更快速的使用各项设定达到效果 今天要介绍的...
1216 0
零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异
原文:零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异 因为先前写到自制Button时需特别注意Tem...
1297 0
零元学Expression Blend 4 - Chapter 1 缘起
原文:零元学Expression Blend 4 - Chapter 1 缘起 本来都使用Adobe相关工具从事设计工作的我,因缘际会下,接触到了Expression Blend 4,让我完全的对微软的设计工具改观。
1132 0
零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I
原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化;教你如何把CheckBox...
1199 0
零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II
原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckBox。
1186 0
零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下)
原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字的...
1215 0