原文:零元学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. [NPM] List available npm scripts and support tab completion

    In this lesson we will look at different ways you can list the available npm scripts. Whether we wan ...

  2. [NPM] Run npm scripts when files change with onchange

    In this lesson we will look at how we can setup our npm scripts to execute when the file system has ...

  3. 微信小程序开发实战视频教程

    微信小程序开发实战视频教程发布  有全套的 pan.baidu.com/s/1o8GuJOY 密码:2dbo 腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间 ...

  4. 数据序列化之protobuf

    数据序列化之protobuf 很多时候需要将一些数据打包,就是把这些数据搞在一起,方便处理.最常见的情况就是把需要传输的数据,当然数据不止一条,打包成一个消息,然后发送出去,接收端再以一定的规则接收并 ...

  5. 【26.67%】【codeforces 596C】Wilbur and Points

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  6. hadoop 3.x Replication与Availability不一致

    看下面的文字前先确保你的Replication值不大于你设置的虚拟机数量 如图,显示的副本数为3,但是实际可用的只有一台机器,查看了下hadoop003,hadoop004两台机器,果然没有存储数据, ...

  7. iOS 多线程的使用

    iOS 多线程 先看一篇阮一峰写关于进程和线程的文章,快速了解线程的相关概念. 随着现在计算机硬件的发展,多核心.高频率的cpu越来越普及,为了充分发挥cpu的性能,在不通的环境下实现cpu的利用最大 ...

  8. Parallel.For

    Parallel.For 你可能忽视的一个非常实用的重载方法    说起Parallel.For大家都不会陌生,很简单,不就是一个提供并行功能的for循环吗? 或许大家平时使用到的差不多就是其中最简单 ...

  9. 全分布式的Hadoop初体验

    背景 之前的时间里对 Hadoop 的使用都是基于学长所搭建起的实验环境的,没有完整的自己部署和维护过,最近抽时间初体验了在集群环境下装机.配置.运行的全过程,梳理总结到本文中. 配置 内存:8G C ...

  10. 存储用es,消息队列用redis

    自动化确实方便,做微服务再合适不过了,单一jar包部署和管理都非常方便.只要系统架构设计合理,大型项目也能用.最近做的项目,统计中心和推荐系统,collector.calculator.recomme ...