范例
当前位置:首页 > 其他范文 > 范例 > 列表页

wpf,范例

小草范文网  发布于:2017-03-06  分类: 范例 手机版

篇一:Expression_Blend实例中文教程

Expression Blend实例中文教程

开篇

随着计算机软件开发分工细节化,微软对已有的产品线进行了调整,在保持原有经典开发工具Visual Studio基础上,又推出了一套新的设计开发工具系列,Expression Studio。 Expression Studio设计工具系列包含四项主要产品: ?

Expression Blend(下称Blend),是一款用于设计桌面和Web应用用户界面的可视化工具。用户可以通过拖拉控件方式创建用户交互界面;另外Blend中,包含一款软件原型建模工具SketchFlow, 该工具允许用户快速开发出专业的项目原型,创建设计原型后,以丰富的界面效果展示给客户,该工具将在后文详细讲述。

?

Expression Design(下称Design),是一款专业的图形图像设计编辑工具,主要是为项目美工设计人员准备,如果你对Photoshop,Fireworks或者Illustrator熟悉,可以把Design看做同类产品,其中使用原理大部分都是相同的,而Design的优势是可以和Blend完美无缝结合,创建图形后,可以直接转换成为XAML,供Blend调用,由于本系列教程是讲述 Blend,这里就不再对Design过多描述,在后文用到时,我们将详细讲述。

?

Expression Encoder(下称Encoder)是一款专业的视频编辑工具,开发人员可以使用该工具编辑视频项目,并发布到Web服务器,Silverlight项目可以在应用中进行高质量播放调用。 由于本系列教程是讲述 Blend,这里就不再对Encoder过多描述,在后文用到时,我们将详细讲述。

?

Expression Web(下称Web),是一款专业的Web页面设计工具。如果您对Dreamweaver熟悉,可以把Web看做同类产品。Web允许开发人员通过即见即所得的模式,设计和开发符合Web标准的网站。由于本系列教程是讲述 Blend,这里就不再对Web过多描述,在后文用到时,我们将详细讲述。

既然本系列文章讲述Blend,我想我们应该多了解一些Blend方面的知识。我们一直在说Blend强大,具体它强大在哪里呢?

首先作为交互性设计工具,Blend解决了传统开发中开发人员和设计人员配合不容易协调的瓶颈。无论是桌面应用还是Web应用,越来越注重用户体验性,而程序代码设计和美工设计也逐渐被细分化,而两者在项目中的配合是至关重要的,相信有不少开发人员都有过相同的经历和感触,程序开发人员和美工设计人员一遍又一遍的修改框架希望能够达到完美匹配。Blend正是针对该问题推出了一系列的解决方案,例如,在Blend中编辑Silverlight或WPF项目UI代码的同时,也会直接绑定到Visual Studio中,实现双向修改代码功能; 在Blend中,可以快速导入PhotoShop图形和Illustrator矢量图,方便项目UI设计。

其次,Blend是一款通用的设计工具,支持设计跨平台跨浏览器的

Silverlight和WPF应用项目,为了简化设计人员的工作量,Blend支持一个简单的可重复利用的元素叫做行为(Behaviors),设计人员可以直接应用不同的行为到项目中,无需编写任何代码,例如,可以直接应用拖拉行为到项目,让项目支持拖拽控件。 在微软Expression官方网站,有大量的行为(Behaviors)代码下载,免费使用。

最后是快捷方便的设计方式,以及软件项目原型设计工具SketchFlow。 在Silverlight中, VisualStateManager的编辑是很复杂的,如果仅靠

Visual Studio进行代码编辑,是非常浪费时间和精力的事情,如果使用Blend进行编辑,会大大的提高效率。 另外,使用Blend进行控件的

样式和模板设计也是非常方便的,我们将在后文详细描述。 值得一提的是SketchFlow,该项目是现在为数不多的优秀建模工具之一。使用该工具,开发人员可以快速的建立项目原型,以Silverlight的方式展示给客户或者项目团队成员,我们将在后文详细描述。

通过以上的描述,我们可以清楚明白,从事Silverlight和WPF项目开发,Blend是必不可少的设计工具,学会了Blend会在开发过程中达到事半功倍的效果。 也正式以上的原因,才会有了本系列文章教程,本系列教程旨在为了让更多的开发人员了解和学习Expression Blend的使用,希望能够让更多的开发人员加入到Silverlight和WPF开发行列。

界面快速入门

上一篇主要介绍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部分:是工具面板菜单

篇二:Blend4精选案例图解教程

(一):丰富的形状(Shape)资源 .................................................................................... 1

(二):找张图片玩特效 ......................................................................................................... 6

(三):一键拖拽 ................................................................................................................... 15

(四):请给我路径指引 ....................................................................................................... 17

(五):可视数据管理 ........................................................................................................... 26

(一):丰富的形状(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属性为渐变效果

效果:

更改外观属性

篇三:WPF——基础教程XAMl

本主题介绍可扩展应用程序标记语言 (XAML) 语言的功能,并演示如何使用 XAML 编写 Windows Presentation Foundation (WPF) 应用程序。本主题专门介绍了 Windows Presentation Foundation (WPF) 实现的 XAML.XAML 本身是比 Windows Presentation Foundation (WPF) 更广泛的一个语言概念。

具有流控制支持的声明性语言XAML 简化了为 .NET Framework 编程模型创建 UI 的过程。您可以在声明性 XAML 标记中创建可见的 UI 元素,然后使用代码隐藏文件(通过分部类定义与标记相连接)将 UI 定义与运行时逻辑相分离。在 XAML 中混合代码和标记的功能很重要,因为 XML 本身是声明性的,不会为流控制真正建议一个模型。基于 XML 的声明性语言非常直观,可以为用户(尤其是具有 Web 设计和技术背景的人员)创建从原型到生产的各种界面。与其他大多数标记语言不同,XAML 直接呈现托管对象的实例化。这种常规设计原则简化了使用 XAML 创建的对象的代码和调试访问。

XAML 文件是指通常使用 .xaml 扩展名的 XML 文件。

下面的 XAML 示例演示了小标记在创建作为 UI 一部分的按钮时的必要性。创建的按钮通过主题样式获得默认的可视化表示形式,通过其类设计获得默认的行为。

XAML 对象元素

XAML 有一组规则,这些规则将对象元素映射为类或结构,将属性

(Attribute) 映射为属性 (Property) 或事件,并将 XML 命名空间映射为 CLR 命名空间。XAML 元素映射为被引用程序集中定义的 Microsoft .NET 类型,而属性 (Attribute) 则映射为这些类型的成员。

上面的示例指定了两个对象元素:<STACKPANEL>(具有一个结束标记)和<BUTTON>同样具有多个属性;下一节将介绍属性)。字符串 StackPanel 和 Button 都将映射为某个类的名称,该类由 WPF 定义并且是 WPF 程序集的一部分。在指定对象元素标记时,可以为 XAML 处理创建一条指令,以便在加载 XAML 页时创建指定类的一个新实例。每个实例都是通过调用基础类或结构的默认构造函数并对结果进行存储而创建的。为了可用作 XAML 中的对象元素,该类或结构必须公开一个公共的默认(无参数)构造函数。

设置属性

XAML 中的属性是通过使用各种可能的语法在对象元素上设置属性来设置的。根据所设置的属性的特征,给定属性可使用的语法会有所不同。

通过设置属性值,可以为(本文来自:WwW.xiaOCaofAnweN.Com 小草范文 网:wpf,范例)对象元素添加功能或特征。对象元素的基础对象实例的初始状态基于默认的构造函数行为。通常,您的应用程序将使用其他一些实例,而不是任何给定对象的完全默认的实例。

属性语法

在 XAML 中,属性 (Property) 常常可以表示为属性 (Attribute)。属性 (Attribute) 语法是最简单的属性 (Property) 设置语法,并将成为过去使用标记语言的开发人员可以使用的最直观的语法。例如,以下标记将创建一个具有红色文本和蓝色背景的按钮,还会创建指定为 Content 的显示文本。

属性元素语法

对于一个对象元素的某些属性 (Property),属性 (Attribute) 语法是不可能实现的,因为提供属性 (Property) 值所需的对象或信息不能充分地表示为简单的字符串。对于这些情况,可以使用另一个语法,即属性元素语法。属性元素语法用标记的内容设置包含元素的引用的属性。一般而言,内容就是作为属性值的类型的某个对象(值设置实例通常被指定为另一个对象元素)。属性元素本身的语法为 <类型名称.属性>。指定内容之后,必须用一个结束标记结束属性元素,就像其他任何元素(语法为 )一样。对于同时支持属性 (Attribute) 和属性 (Property) 元素语法的属性 (Property),尽管这两种语法的细微之处(如空白处理)略有不同,但它们的结果通常是一样的。如果可以使用属性 (Attribute) 语法,那么使用属性 (Attribute) 语法通常更为方便,且能够实现更为精简的标记,但这只是一个风格的问题,而不属于技术限制。下面的示例演示了在前面的属性 (Attribute) 语法示例中设置的相同属性 (Property),但这次对 Button 的所有属性 (Property) 使用了属性 (Property) 元素语法。

XAML 的属性 (Property) 元素语法表示了与标记的基本 XML 解释之间的巨大背离。对于 XML,<类型名称.属性> 代表了另一个元素,该元素仅表示一个子元素,而与 TypeName 父级之间没有必然的隐含关系。在 XAML 中,<

类型名

称.Property> 直接表示 Property 是类型名称 的属性(由属性元素内容设置),而绝不会是一个名称相似(碰巧名称中有一个点)但却截然不同的元素。 属性和类继承

作为 WPF 元素的XAML 属性 (Attribute) 而出现的属性 (Property) 通常从基类继承而来。例如,在上一个示例中,如果您要查看类定义、反射结果或文档,Background 属性并不是在 Button 类上直接声明的属性。相反,Background 是从基 Control 类继承而来。

WPF XAML 元素的类继承行为是与标记的基本 XML 解释之间的另一个巨大背离。使用类继承(尤其是中间基类为抽象类时)的另一个原因在于,通过 XML 编程常用的架构类型(如 DTD 或 XSD 格式)几乎不可能准确且完整地表示 XAML 元素及其允许属性集。另外,XAML 中的“X”表示“extensible”(可扩展),而可扩展性破坏了“什么是用于 WPF 的 XAML”的任何给定表示形式的完整性。

引用值和标记扩展

标记扩展是一个 XAML 概念。在属性语法中,花括号({ 和 })表示标记扩展用法。

此用法指示 XAML 处理不要像通常那样将属性值视为一个字符串或者可直接转换为文本字符串的值。

当属性采用引用类型值时,这些属性常常需要属性元素语法(始终创建一个新实例)或通过标记扩展的对象引用。标记扩展用法有可能会返回现有实例,因此可以更加多样化,或者产生较少的对象系统开销。

当使用标记扩展提供属性值时,应改为由相关标记扩展的后备类中的逻辑提供属性值。WPF 应用程序编程中最常用的标记扩展是 Binding(用于数据绑定表达式)以及资源引用 StaticResource 和 DynamicResource.通过使用标记扩展,即使属性 (Property) 不支持对直接对象实例化使用属性 (Attribute) 语法,也可以使用属性 (Attribute) 语法为属性 (Property) 提供引用值;或者使特定行为能够符合必须用属性 (Property) 类型值填充 XAML 属性 (Property) 这一常规行为要求。

例如,下面的示例使用属性 (Attribute) 语法设置 Style 属性 (Property) 的值。Style 属性 (Property) 采用了 Style 类的一个实例,这是默认情况下不能在属性 (Attribute) 语法字符串中指定的引用类型。但在本例中,属性 (Attribute) 引用了特定的标记扩展 StaticResource.当处理该标记扩展时,它返回对以前在资源字典中作为键控资源进行实例化的某个样式的引用。

资源只是 WPF 或 XAML 启用的一种标记扩展用法。

支持 Typeconverter 的属性值

在“属性语法”一节中,曾提到属性值必须能够使用字符串进行设置。对字符串如何转换为其他对象类型或基元值的基本本机处理取决于 String 类型本身。但是很多 WPF 类型或这些类型的成员扩展了基本字符串属性处理行为,因此更复杂的对象类型的实例可通过字符串指定为属性值。在代码级别,此处理是通过指定处理字符串属性值的 CLR 类型转换器来完成的。常用于指示矩形区域尺寸(如 Margin)的 Thickness 结构类型是这样一个类型的示例:它具有针对采用该类型的所有属性 (Property) 公开的一个特殊的、支持类型转换器的属性 (Attribute) 语法,以便于在 XAML 标记中使用。下面的示例使用支持类型转换器的属性 (Attribute) 语法来为 Margin 提供值:

上面的属性 (Attribute) 语法示例与下面更为详细的语法示例等效,但在下面的示例中,Margin 是通过包含 Thickness 对象元素的属性 (Property) 元素语法设置的,而且 Thickness 的四个关键属性 (Property) 设置为新实例的属性 (Attribute):

是使用支持类型转换器的语法,还是使用更详细的等效语法,通常只是编码风格的选择问题,但支持转换器的语法有助于生成更简洁的标记。(但是,有一些对象只能采用类型转换器将属性设置为该类型,因为类型对象本身并没有默认的构造函数。例如,Cursor。)

集合类型和 XAML 集合属性

XAML 指定了一个语言功能,通过该功能,可以从标记中特意省略表示集合类型的对象元素。当 XAML 处理 器处理采用了集合类型的属性时,将隐式创建相应集合类型的实例,即使标记中不存在该集合的对象元素也是如此。在集合类型的 SDK 参考页中,特意省略集合对象元素的这种语法在 XAML 语法部分中有时候称为“隐式集合语法”。

隐式集合语法适用于实现 IList 或 IDictionary 的类型,或者适用于数组。您已经在 XAML 资源示例中看到了未调用的集合对象元素的隐式集合语法的示例:

除了根元素外,页面上作为另一个元素的子元素而嵌套的每个对象元素实际上都是下列一种或两种情况下的元素:父元素的隐式集合属性的一个成员,或者为父元素指定 XAML 内容属性值的元素(XAML 内容属性将在下一节进行讨论)。换言之,一个标记页上的父元素与子元素之间的关系实际上就是一个根对象,

本文已影响