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

原文: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的强大魅力!

时间: 2024-09-01 09:45:16

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

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

原文:Blend4精选案例图解教程(五):可视数据管理 应用程序中我们会经常需要操作数据,在程序设计之初示例数据一般都是手工添加,Blend4提供了非常方便的数据管理能力,包括丰富的数据类型和内置示例数据,这样我们在程序设计时可以可视化进行绑定示例数据和管理静态数据.本次教程将演示Blend4中的这一优秀特性. 1.新建Silverlight项目 2.在项目默认视图中,打开数据面板,创建示例数据 3.新建示例数据,输入名称   4.生成的SampleDataSource 5.可以在Collect

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

原文:Blend4精选案例图解教程(三):一键拖拽 拖拽效果,常规实现方法是定义MoveLeftDwon.MoveLeftUp.MouseMove事件,在Blend的世界里,实现对象的拖拽,可以不写一行代码,而且非常简单,本次教程跟大家分享这个技巧. 1.新建项目,在默认设计视图添加一个元素,这里添加一个图片 视图树 设计视图 2.在资源面板(Asset)中,找到Behavior分类,选择MouseDragElementBehavior,从名字上我们就应该能理解这个行为实现的功能     3.把

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

原文:Blend4精选案例图解教程(二):找张图片玩特效       Blend中的特效给了我们在处理资源时更多的想象空间,合理地运用特效往往会得到梦幻般效果,本次教程展示对图片应用特效的常规操作,当然特效不仅限于使用在图片上,还也可以应用到动画和视频中. OK,开始本次旅程 1. 在项目中添加一张现有的图片 如果添加的图片大于250KB,会提示推荐把图片嵌入到XAP包中,这样图片在浏览器加载XAP文件时会一起被下载到本地. 2.把图片拖到UserControl中 3.在资源面板中,选择特效(E

最新Award Bios设置图解教程

我们来介绍一下Award Bios的设置,其实Award Bios和AMI Bios里面有很多东西是相同的,可以说基本上是一样的,虽然有些名字叫法不同,但是实际作用是一样的.在前文中已经了解了一些Bios的基本知识,和设置,那么在这篇文章里面我就会更详细的介绍一下Bios的超频设置,希望对那些想超频但是又没有接错过超频的玩家能有一些帮助.稍老一点的机器,可以参考这篇文章:BIOS设置图解教程 和AMI Bios一样,再开机画面时按下"Del"键进入Bios设置菜单(有些是按F1键):

Ubuntu 12.04系统安装图解教程

Ubuntu 12.04系统安装图解教程 一.介绍: Ubuntu分为桌面版(desktop)和服务器版(Server),下面为大家介绍服务器版本Ubuntu Server 12.04的详细安装过程. Ubuntu Server 12.04系统镜像下载地址: http://releases.ubuntu.com/12.04/ 二.安装系统:用启动盘成功引导之后,出现下面的界面 选择语言:中文(简体) 默认第一项:安装Ubuntu服务器版 询问是否继续安装所选择的语言版本,选择"yes"

award bios是什么 award bios设置图解教程

首先我们先来简单的了解一下什么是award bios? award bios就是AWARD公司的BIOS,Award 是个公司名称,BIOS是基本输入输出系统! BIOS就是(Basic Input/Output System,基本输入/输出系统的缩写)在电脑中起到了最基础的而又最重要的作用.是电脑中最基础的而又最重要的程序.把这一段程序放在一个不需要供电的记忆体(芯片)中,这就是平时所说的BIOS. 今天西西小编在网上收集了一些award bios的相关设置教程,整合除了一套比较全面的,相信一

DM分区图解教程

教大家的是DM分区教程,分区是我们经常要做的事情,但是很多童鞋却不会,下面这个DM分区图解教程可详细列出了分区的步骤哦,想不会都难.下面赶紧来学习下吧! 进入DOS环境启动DM,进入DM的目录直接输入"dm"即可进入DM,开始一个说明窗口,按任意键进入主画面.DM提供了一个自动分区的功能,完全不用人工干预全部由软件自行完成,选择主菜单中的"(E)asy Disk Instalation"即可完成分区工作.虽然方便,但是这样就不能按照你的意愿进行分区,因此一般情况下不

简单实用的DIY组装电脑图解教程

DIY组装电脑对于高手来说,并不难,新手就需要注意很多事情了,如果完全是自己动手组装一台电脑,对新手来说还是有一点难度的,起码要了解电脑配置的兼容性,否则适合自己的电脑配置都写不出,写好电脑配置单之后,就可以去电脑城或者网上购买配置单的配件回来自己组装,电脑组装的时候,要先准备好工具,然后开始着手安装硬件,其中需要注意,CPU安装到主板上的时候,不要强行安装CPU到CPU插槽里,若插入的方向错误,CPU就无法插入,此时应该立即更改插入方向,另外主板插线的也需要注意别插错,否则电脑没法使用,或者部

《Android开发案例驱动教程》

<Android开发案例驱动教程>   作者:关东升,赵志荣Java或C++程序员转变成为Android程序员 采用案例驱动模式展开讲解知识点,即介绍案例->案例涉及技术->展开知识点->总结的方式 本书作者从事多年一线开发和培训,讲解知识点力求细致,深入浅出 目    录 前言 第1章  Android操作系统概述 1 1.1  Android历史介绍 1 1.2  Android架构 1 1.3  Android平台介绍 2 1.4  现有智能手机操作系统比较 4 第2章