原文:Blend4精选案例图解教程(一):丰富的形状(Shape)资源

Blend4资源面板中内置了丰富的形状素材,为我们在构建程序时提供极大的方便。系统默认内置18种常用形状,通过其属性设置可以自定义出更多衍生形状,或者通过Direct Selection工具手动绘制,我们可以获得更自由的形状编辑。当然我们还可以登陆 Expression Gallery 下载别人分享的素材(似乎并不多),来扩充形状资源库。

因为形状的用法比较一致,重点是形状的不同属性设置,在此仅举一例来展示形状的常规用法。

1、 新建项目

2、 项目文件生成后,在Objects and Timeline面板中选中LayoutRoot

3、 然后在资源(Assets)面板中选中Shapes

4、 我们可以通过双击或者拖拽的方式添加一个形状,这里我们使用Star来作演示,Star已添加到LayoutRoot中,如图

5、 选择Selection工具

确认五角星处于被选择状态(如未选择可以通过点击选择)

6、 在属性(Properties)面板中,我们可以对形状进行一系列的属性设置,直到符合我们的需要。下面我们对五角星进行简单的修饰。

把颜色调为红色

去边框

OK,这样一个标准的五角星制作完成

7、 通过组合不同的属性设置,我们可以获得更多的效果:

手绘风格:

效果:

更改Fill属性为渐变效果

效果:

更改外观属性

效果:

如果你愿意,可以做出更多的效果!

以上效果我们也可以通过XAML来实现,以下为完整代码:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
x:Class="ShapesDemo.MainPage"
Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="White">
<ed:RegularPolygon InnerRadius="0.702" Margin="244,193,296,187" PointCount="20" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" StrokeThickness="0" RenderTransformOrigin="0.5,0.5">
<ed:RegularPolygon.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFFF0001" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</RadialGradientBrush>
</ed:RegularPolygon.Fill>
</ed:RegularPolygon>
</Grid>
</UserControl>

在实际项目中,不推荐使用代码的方式来进行大规模的效果设计,Blend的设计功能,VS无可替代;作为程序员将Blend和VS的结合使用才能带来高效的SilverLight应用程序开发。后续章节,将通过实例一步一步展现Blend的强大魅力!

Blend4精选案例图解教程(一):丰富的形状(Shape)资源的更多相关文章

  1. Blend4精选案例图解教程(三):一键拖拽

    原文:Blend4精选案例图解教程(三):一键拖拽 拖拽效果,常规实现方法是定义MoveLeftDwon.MoveLeftUp.MouseMove事件,在Blend的世界里,实现对象的拖拽,可以不写一 ...

  2. Blend4精选案例图解教程(四):请给我路径指引

    原文:Blend4精选案例图解教程(四):请给我路径指引 路径在界面设计中,可以起到很好的辅助作用,我常常使用它来对元素进行规则排列和非规则排列控制. 本次教程将演示,Blend中路径的常规用法. 1 ...

  3. Blend4精选案例图解教程(五):可视数据管理

    原文:Blend4精选案例图解教程(五):可视数据管理 应用程序中我们会经常需要操作数据,在程序设计之初示例数据一般都是手工添加,Blend4提供了非常方便的数据管理能力,包括丰富的数据类型和内置示例 ...

  4. Blend4精选案例图解教程(二):找张图片玩特效

    原文:Blend4精选案例图解教程(二):找张图片玩特效 Blend中的特效给了我们在处理资源时更多的想象空间,合理地运用特效往往会得到梦幻般效果,本次教程展示对图片应用特效的常规操作,当然特效不仅限 ...

  5. C#温故知新:《C#图解教程》读书笔记系列

    一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...

  6. win8.1系统的安装方法详细图解教程

    win8.1系统的安装方法详细图解教程 关于win8.1系统的安装其实很简单 但是有的童鞋还不回 所以今天就抽空做了个详细的图解教程, 安装win8.1系统最好用U盘安装,这样最方便简单 而且系统安装 ...

  7. Zabbix3.x安装图解教程

    准备知识: Zabbix3.x比较之前的2.0界面有了很大的变化,但是安装部署过程与2.x基本完全一样. 1.Zabbix2.x安装图解教程 http://www.osyunwei.com/archi ...

  8. 《C#图解教程》读书笔记之一:C#和.NET框架

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.在.NET之前的编程世界 C#语言是在微软公司的.NET框架上开发程序而设计的,首先作者给大家纠正了一下C# ...

  9. 《C#图解教程》读书笔记之二:存储、类型和变量

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.类型初窥:掀起你的盖头来 (1)C程序是一组函数和数据类型,C++程序是一组函数和类,而C#程序是一组类型声 ...

随机推荐

  1. eclipse Maven构建的project无法公布lib到tomcat的解决方法

    问题: eclipse导入基于Maven的web项目时,公布到tomcat中.发现lib文件夹及jar包没有公布过去. 解决方式: eclipse中,选择项目属性Properties --> D ...

  2. [Android学习笔记]View的measure过程学习

    View从创建到显示到屏幕需要经历几个过程: measure -> layout -> draw measure过程:计算view所占屏幕大小layout过程:设置view在屏幕的位置dr ...

  3. 用VBA宏从一个工作薄复制内容到另一个工作薄

    我们项目管理有两个工作薄,一个里面有多个表,每天建一个,记录当天项目,另一个工作薄,有多个表,其中一个是所有项目汇总. 以前都是第一个工作薄一个表做完,再复制粘贴到第二个工作薄的汇总表中. 写了个VB ...

  4. ogre sample分析(一)

    ogre自带了一些例子,逐个过一遍并自己动手做一些调整 1 Sample_BezierPatch:这个例子直接用数值来构造顶点缓存并创建entity,这种方法一般只能创建简单对象,本人以为复杂对象顶点 ...

  5. hdu 4291 A Short problem(矩阵+取模循环节)

    A Short problem                                                          Time Limit: 2000/1000 MS (J ...

  6. 201215-03-19---cocos2dx内存管理--具体解释

    因为cocos2dx我们的使用c++写的,所以内存管理就是一个绕只是去的坎,这个你不懂内存仅仅懂业务逻辑的话,还玩什么c++,今天看了半天这个东西,事实上本质上是理解的,可是就是有一个过不去的坎,最终 ...

  7. Eclipse 未开始 【Ubuntu】

    /usr/lib/eclipse/configuration/1408532831122.log : !SESSION 2014-08-20 19:07:11.055 ---------------- ...

  8. 为什么使用 React? Edit on GitHub

    为什么使用 React? React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库.很人多认为 React 是 MVC 中的 V(视图). 我们创造 ...

  9. poj2236(并查集)

    题目连接 题意:一张图上分布着n台坏了的电脑,并知道它们的坐标.两台修好的电脑如果距离<=d就可以联网,也可以通过其他修好的电脑间接相连.给出操作“O x”表示修好x,给出操作“S x y”,请 ...

  10. cisco san交换机配置

    1.配置交换机的管理地址switch(config)# interface mgmt 0 switch(config-if)# ip adress 192.168.100.108 255.255.25 ...