原文:零元学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 Blend 4 - Chapter 4元件重复运用的观念的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗?

    原文:零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗? ListBox里的排列不是垂直就是水平,觉得这样的排列很枯燥乏味吗? 想要它变聪明吗? ...

  2. 零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异

    原文:零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异 因为先前写到自制Button时需特别注意T ...

  3. 零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用

    原文:零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用 本章将教大家如何运用Blend的内建元件RaidoButton做出选单 ...

  4. 零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能

    原文:零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能 今天要介绍一个Silverlight Toolkit内好用且在图片展示操作上很常见的元件 ...

  5. 零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」

    原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Bl ...

  6. 零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧

    原文:零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧 本章将延续上篇零元学Expression Blend4 - Chapter 4元件重复运用的观念所制作 ...

  7. 零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步

    原文:零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步 如果需要经常的使用某一项工具,总会希望能够更快速的使用各项设定达到效果 今天要介绍 ...

  8. 零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果

    原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果 有网友问我如何在Blend内制作出倒影效果 我提供了 ...

  9. 零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)

    原文:零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下) 抱歉久等了!!!! 终於到了动画MenuBar ...

随机推荐

  1. Redis Service

    https://raw.githubusercontent.com/MSOpenTech/redis/3.0/Windows%20Service%20Documentation.md

  2. [TypeScript] Using ES6 and ESNext with TypeScript

    TypeScript is very particular about what is and isn't allowed in a TS file to protect you from commo ...

  3. 安全配置基线Linux系统

    Linux系统安全配置基线 一:共享账号检查 配置名称:用户账号分配检查,避免共享账号存在 配置要求:1.系统需按照实际用户分配账号: 2.避免不同用户间共享账号,避免用户账号和服务器间通信使用的账号 ...

  4. web开发-MVC IoC 框架(转)

    随着Web应用的商业逻辑包含逐渐复杂的公式分析计算.决策支持等,使客户机越 来越不堪重负,因此将系统的商业分离出来.单独形成一部分,这样三层结构产生了. 其中‘层’是逻辑上的划分. 三层体系结构是将整 ...

  5. python2.x脚本转换为python3.x脚本的方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/dushu990/article/details/73549174 python2.x脚本转换为pyt ...

  6. Python 标准库 —— zipfile(读取 zip 文件)

    Python模块学习:zipfile zip文件操作 Python 学习入门(16)-- zipfile 0. 解压 with zipfile.ZipFile('../data/jaychou_lyr ...

  7. 【序列操作V】平衡树(无旋treap)

    题目描述 维护一个队列,初始为空.依次加入 n(1≤n≤105)个数 ai(-109≤ai≤109),第 i(1≤i≤n)个数加入到当前序列第 bi(0≤bi≤当前序列长度)个数后面.输出最终队列. ...

  8. 常见的面试C#技术题目

    遍历查询窗体界面的textbox为空值 ? foreach (System.Windows.Forms.Control control in this.Controls)            {   ...

  9. 【a202】&&【9208】输油管道问题

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 某石油公司计划建造一条由东向西的主输油管道.该管道要穿过一个有n 口油井的油 田.从每口油井都要有一条输油管 ...

  10. web IDE Eclipse Che安装

    安装:使用安装器安装 使用安装器安装Che 环境 依赖 下载地址 通用 任何操作系统,java8,Git,Maven 3.0.5+,Docker 1.7+ 3.12.52 - 117MB window ...