Expression Blend实例中文教程(2) - 界面快速入门

上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习。

在开始使用Blend前,首先需要进行Silverlight的开发环境搭建,在银光中国网SilverlightChina.Net)有篇“轻松建立Silverlight开发环境”,其中列出了建立Silverlight开发环境的几个步骤,另外,我在过去发布过一篇“Silverlight开发工具集合”文章,也列出了Silverlight项目开发必装工具软件,这里对于开发环境的搭建,我就不再赘述。

Silverlight开发环境搭建成功后,我们将通过实例介绍Blend入门操作,我使用的Blend是英文版本,我将对照翻译成中文。

首先使用Blend按照以下步骤创建一个新的Silverlight项目,

1. 点击左上角的“File - New Project”,这时会弹出一个新建项目窗口,如下图

在上图可以看到Blend支持创建两个类型的项目,一个是Silverlight,另一个是WPF,本系列主要讨论Silverlight,所以,我们选择“Project Type -Silverlight”,在选中Silverlight类型后,在弹出窗口右边会出现四个项目模板,

(1) Silverlight 3 Application + Website

该选项是“创建Silverlight 3客户端应用其中包含Website项目”,选择该选项后,Blend会自动创建Web项目在同一个解决方案下,编译后运行,会在Web项目中产生测试页面,在客户端显示Silverlight客户端。

(2) Silverlight 3 Application

该选项是“创建Silverlight 3客户端应用”,选择该选项后,Blend仅创建Silverlight客户端,编译后,自动生成一个测试页面。

(3) Silverlight 3 Control Library

该选项是“创建Silverlight控件类库”,选择该选项后,Blend会创建Silverlight空白类库,主要用于创建Silverlight自定义控件。

(4) Silverlight 3 SketchFlow Application

该选项是“创建Silverlight 3 SketchFlow应用”,选择该选项后,Blend会创建Silverlight 3 SketchFlow应用。

在项目模板窗口下,是创建项目的名称,项目路径和项目后台语言支持。

本文将创建一个Silverlight 3 Application + Website + C# 完整项目,方便以后解释项目细节。

创建新项目后,可以在Blend看到当前工作去,我将重要的几个部分添加了标识,下面详细描述各个部分的作用:

A部分: 是菜单选项;

B部分:是DockPanel菜单,鼠标点击后,会弹出对应的窗口,例如“对象和时间线”或者“项目管理”等;

C部分:是工具面板菜单

D部分:项目面板

上图可以看出在SilverlightBlendDemo解决方案下,有两个项目:

1. SilverlightBlendDemo: 该项目是Silverlight客户端项目,主要承载Silverlight客户端页面和控件;

2. SilverlightBlendDemoSite: 该项目是Silverlight服务器端项目,主要承载服务器端代码,例如WCF Service或者DAL数据层代码;

E部分:文档切换栏, 该栏目显示所有打开的项目文件,可以自由切换;

F部分:主要工作区,叫做美工板,所有页面和控件设计都在该区域;

G部分:视图和代码切换栏,该栏目提供三个选项,第一个是视图选项,第二个是代码选项,第三个是视图和代码同时显示选项;

H部分:属性和资源选项栏,从这里可以设置控件属性和对应项目资源;

I部分:使用该部分缩放F部分美工板,启动动画效果,设置控件对齐选项以及查看文件注释内容;

以上窗口部件是创建项目后,默认显示的几个窗口,另外还有几个常见的窗口部件,也介绍一下:

1. 首先介绍一下菜单扩展部分,当你把鼠标选中C部分菜单按钮,会弹出扩展菜单按钮,功能如下:

2. 在扩展菜单中,最后一项是Silverlight资源工具按钮 ,点击选中后,会弹出以下窗口,其中包含所有控件,样式集合,行为代码集合以及动画效果和媒体文件集合。在设计的时候,如果添加新控件,可以从这个选项进行选择。

3. Object and Timeline - 对象和时间线面板,可以使用该面板对页面控件对象进行分层管理,另外也可以对当前对象进行动画设计,详细动画设计,将在下文描述。

4. 属性设置面板,在上文H部分,我们介绍了属性和资源选项框,这里我把属性框单独列出来,在美工面板创建一个按钮控件后,选中该按钮,在属性面板中显示各种属性,例如背景,笔刷等等,从这个面板可以不用输入代码,直接设计控件属性。

5. 控件模板样式资源面板。从该面板,选择设计控件样式。

6. 调试结果面板,在该面板显示调试错误信息和输出信息;

今天写到这里了,下次继续写,下面是网友经常问的几个Blend问题,我做了统一回答,希望能帮到更多朋友。

如果您在学习中遇到问题,请留言或者加入QQ群讨论。超级群 22308706, 100844510 (200人满)

常见的几个问题:

为什么Blend中没有相对应的Silverlight控件?

答:在Blend中没有Silverlight控件,需要确认是否安装Silverlight Tools for Visual Studio 2008 Sp1 和 Silverlight Toolkit控件扩展包,在Silverlight Tools中包含了基础控件包,而Silverlight Toolkit是扩展控件。

为什么Blend中没有智能提示功能?

答:确认Blend的版本,在Blend2.5之前的版本,Blend不支持IntelliSense。

为什么Visual Studio 2008 Sp1没有Silverlight项目视图设计界面?

答:从Silverlight 3开始,微软屏蔽了Visual Studio 2008 Sp1的Silverlight项目视图设计功能,推荐使用Blend 3进行Silverlight项目视图设计。 在Visual Studio 2010中,重新恢复了Silverlight项目视图设计功能。

原文地址:https://www.cnblogs.com/xiaowie/p/9279725.html

时间: 2024-10-20 08:55:09

Expression Blend实例中文教程(2) - 界面快速入门的相关文章

Expression Blend实例中文教程(9) - 行为快速入门Behaviors

在Blend强大的设计功能支持下,设计人员和开发人员可以无代码实现Silverlight/WPF动画效果,例如上文介绍的StoryBoard,就是一个典型例子,设计人员和开发人员仅需提供必要元素,即可实现简单动画.通常来说,在一个项目中会经常出现重复的动画或者相似的动画,如果每次都创建一个新的StoryBoard,这样显着项目代码十分臃肿,而且有时还会影响项目运行效率.另外在多个项目中都会用到一个相同的动画效果,如果能把这个动画效果编译成通用类提供调用,也就可以达到事半功倍的效果.为了解决以上问

Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(VSM)

Visual State Manager,中文又称视觉状态管理器(简称为VSM),是Silverlight 2中引进的一个概念.通过使用VSM,开发人员和设计人员可以轻松的改变项目控件的视觉效果,在项目中VSM主要用于创建自定义控件以及控件模板.为了能够打造个性绚丽的Silverlight项目,学习掌握VSM是非常必要的.本文将介绍VSM的快速入门知识以及VSM在Blend中的使用方法. 在学习VSM前,首先,了解以下几个基本概念: 正如前文所说,VSM视觉管理器是用户控制项目控件的视觉效果,S

Expression Blend实例中文教程(3) - 布局控件快速入门Grid

上一篇对Blend 3开发界面进行了快速入门介绍,本篇将基于Blend 3介绍Silverlight控件.对于微软开发工具熟悉的朋友,相信您很快就熟悉Blend的开发界面和控件. XAML概述 Silverlight的控件绘制是由XAML语言进行支持的.什么是XAML语言? 简单的说,XAML(Extensible Application Markup Language )是一款基于XML的描述性语言,中文也叫做可扩展应用程序标记语言. 该语言是由微软开发创建,主要用于构建WPF和Silverl

Expression Blend实例中文教程(7) - 动画基础快速入门Animation

通过前面文章学习,已经对Blend的开发界面,以及控件有了初步的认识.本文将讲述Blend的一个核心功能,动画设计.大家也许注意到,从开篇到现在,所有的文章都是属于快速入门,是因为这些文章,都是我曾经学习的经验和工作中使用到的经验总结出来的.在我个人认为,掌握了这些核心功能也就等于掌握了Blend的开发方法.在以后开发项目中使用Blend开发工具,这些知识应该足够用了.当然,特殊项目也需要特殊对待,如果您在项目开发中,有新的Blend开发经验,希望您能够毫不吝啬的分享,在这里,我表示深深的谢意.

[转]Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard

上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/To/By 动画和关键帧动画. 对于Silverlight动画设计,StoryBoard是非常重要的一个功能,StoryBoard不仅仅可以对动画的管理,而且还可以对动画的细节进行控制,例如控制动画的播放,暂停,停止以及跳转动画位置等. 为了简化开发人员和设计人员的设计过程,Blend提供了专门的工具

Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border

上一篇,介绍了Canvas布局控件在Blend中的使用.本篇继续介绍布局控件StackPanel,ScrollViewer和Border. 相对于Grid和Canvas来说,StackPanel,ScrollViewer和Border是比较简单的布局控件,实现的功能相对来说单一. 首先来说说StackPanel控件.从字面意思理解,是堆栈面板的意思.堆栈内的所有内容将按照顺序进行排列,排列方式分水平排列和垂直排列两种方式. 对于StackPanel的使用,主要是对控件水平或者垂直排列,使用该控件

Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates

上篇,介绍了控件样式(Style)和模板(Template)的基础概念,并且演示了使用Blend设计控件样式.本篇将继续介绍使用Blend设计自定义控件模板 - ControlTemplate.ControlTemplate可以称为控件模板,简单的理解为控件结构和行为的集合.在项目设计中,经常会使用ControlTemplate创建新的控件模板或者修改现成的控件模板,使用项目的UI具有独特性.如何使用Blend创建和修改ControlTemplate是本文即将讨论的话题. 概述 对于Contro

Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template

在上一篇,介绍了Visual State Manager视觉状态管理器,其中涉及到控件的样式(Style)和模板(Template),本篇将详细介绍样式(Style)和模板(Template)在Silverlight项目中的应用,并介绍如何使用Blend设计样式(Style)和模板(Template). 在LOB(Line-of-Business)企业级应用项目开发中,为了使项目的视觉效果多样化,不仅仅使用动画效果,而且经常还需要修改部分控件的样式(Style)和模板(Template). 在S

Expression Blend实例中文教程(10) - 缓冲动画快速入门Easing

随着Rich Internet application(RIA)应用技术的发展,各个公司越来越注重于项目的用户体验性,在保证其功能完善,运行稳定的基础上,绚丽的UI和人性化的操作设计会给用户带来舒适的体验效果.前文我们学习了Blend设计简单的动画,可以使用StoryBoard快速创建一个动画效果,但是该动画效果看起来缺乏自然效果,让用户感觉太过机械化,大大的降低了用户体验性.为了是动画更为人性化,看起来更自然化,我们可以通过以下两个方式来解决: 方法1. 使用前文所提及的,帧动画技术,为了是动