19.2 WPF和Microsoft Expression

  在进行WPF应用程序的开发中,需要编写相应的XAML文档进行窗体的布局和渲染,在Visual Studio 2008中,并没有提供很好的支持WPF应用程序设计所需要的功能,例如动画操作和图形渲染。微软提供了Microsoft Expression软件套装,在Microsoft Expression软件套装中可以使用Microsoft Expression Blend 2进行WPF应用程序窗体的布局和渲染。

19.2.1 使用Microsoft Expression Blend设计WPF
  Microsoft Expression Studio 2软件套装中,微软提供了Microsoft Expression Blend 2,用于提供WPF应用程序和Silverlight应用程序的图形开发和渲染,双击Microsoft Expression Blend 2图标打开Microsoft Expression Blend 2应用程序,如图19-2所示。
Microsoft Expression Blend 2
图19-2 Microsoft Expression Blend 2
  Microsoft Expression Blend 2和Microsoft Expression Studio 2软件套装一样,其的界面也是以黑色为主的界面。对于设计人员而言,设计人员更加偏好黑色界面以便将图形图像突出的显式在屏幕中。单击【新建】按钮,Microsoft Expression Blend 2会弹出一个新建框,开发人员能够选择相应的应用程序进行开发,如图19-3所示。
创建新建项
图19-3 创建新建项
  单击【WPF应用程序】按钮,并选择相应的位置就能够创建WPF应用程序。WPF应用程序创建后,对于开发人员和设计人员而言,其Windows应用程序开发窗口很像一张画布。在WPF应用程序中,窗体可以想象成是一个画布,这个画布能够承载多媒体、图形、图像甚至是动画。WPF应用程序提供了默认控件,这些控件包括最常用的Button按钮控件,下拉框控件以便开发人员提供用户交互功能,如图19-4所示。
  从图19-4中可以看出,WPF应用程序提供了Border、ListBox、Button、Label等常用控件,在Microsoft Expression Blend 2中,同样可以直接拖放到窗体中进行窗体布局,如图19-5所示。
WPF资源库
图19-4 WPF资源库
WPF应用程序窗体布局
图19-5 WPF应用程序窗体布局
  Microsoft Expression Blend 2同Visual Studio 2008相似,Microsoft Expression Blend 2允许开发人员直接向窗体中拖动控件以实现控件的布局,但是Microsoft Expression Blend 2并不支持控件事件的响应。当开发人员在Microsoft Expression Blend 2中双击Button按钮控件时,并不会在相应的代码中自动创建方法,Microsoft Expression Blend 2仅仅为WPF应用程序布局提供了良好的支持,若需要为WPF应用程序编写事件,需要同Visual Studio 2008相配合。

19.2.2 WPF控件样式
  使用Microsoft Expression Blend 2进行WPF应用程序开发很类似与Photoshop中进行图形图像编程。在Photoshop中进行图形图像编程时,可以针对某一个图形进行渲染,包括半透明、颜色和渐变等。在传统的Windows应用程序的开发中,如果需要让应用程序的背景或者某个按钮控件像动画一样呈现出渐变和半透明效果是非常困难的,在WPF中可以进行类似Photoshop的操作对WPF应用程序中的控件进行样式控制,如图19-6和图19-7所示。
属性控制面板
图19-6 属性控制面板
外观控制
图19-7 外观控制
  图19-6和图19-7都是针对一个控件进行样式控制。使用Microsoft Expression Blend 2进行控件样式开发的过程中,每一个控件都包含一个属性面板,属性面板用于WPF应用程序中控件的样式的控制。在WPF中,窗体都是基于XAML文档进行编写和样式控制的,如果需要使用XAML文档进行样式开发和控制,不得不记住很多属性,这样就让WPF应用程序的开发变得非常困难。在Microsoft Expression Blend 2中使用属性控制面板能够快捷的定义相应控件的属性。
  使用Microsoft Expression Blend 2进行应用程序中进行样式控制非常容易。在Photoshop中对图形图像的编程可以直接使用画笔或渐变等工具进行样式控制,同样在Microsoft Expression Blend中可以像在Photoshop中一样进行属性配置就可以实现控件的不同样式的布局,如图19-8所示。
Button控件样式控制
图19-8 Button控件样式控制
  在图19-8中,可以通过样式选择选择不同的控件样式,从左到右分别为渐变样式、平铺样式、纯色样式和半透明样式。使用XAML进行样式控制示例代码如下所示。
+展开
-XML
<Button d:LayoutOverrides="VerticalAlignmentHorizontalAlignment="Right
Margin="0,0,519.113,65VerticalAlignment="BottomWidth="104.887
Height="54.837Content="Button">

<Button.Background>
<LinearGradientBrush EndPoint="0.5,1StartPoint="0.5,0">
<GradientStop Color="#FFC8C8C8Offset="0"/>
<GradientStop Color="#FFFFFFFFOffset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>

  上述XAML代码就描述了一个渐变控件,其中为控件定义了基本的属性,包括宽度和高度。在子节点中,通过使用LinearGradientBrush,GradientStop等属性实现了控件的效果。这些样式在传统的Windows应用程序开发中要实现是非常繁琐和困难的,而在WPF应用程序中能够方便的实现渐变和图形控件。
  在属性控制面板中还包括很多其他的属性配置,这些属性包括不透明度、宽度、高度、文本对齐方式、窗体状态等,极大的方便了开发人员在开发过程中对样式的控制和封装,简化了开发人员对于窗体界面的开发。

19.2.3 浅谈XAML
  使用Visual Studio 2008打开项目,就会发现WPF应用程序是通过使用XAML文档进行描述的。XAML是eXtensible Application Markup Language的英文缩写,其中文名称为可扩展应用程序标记语言,它是微软公司为构建应用程序用户界面而创建的一种新的描述性语言。WPF应用程序中大量的使用了XAML对应用程序窗体进行描述。
  XAML是一种基于XML文档格式的标记语言。在WPF应用程序中,XAML用于描述窗体的样式、规则,以及事件的声明等,这种开发模型和ASP.NET中的代码隐藏页模型十分类似,这样就让XAML提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面的开发模型。
  由于XAML是一种标记语言,所以开发人员能够很快的学习XAML并将XAML投入到项目开发中。学习XAML只需要开发人员具备一定的HTML知识就能够快速的学习XAML的语法格式和掌握XAML语法规范。
  使用XAML进行窗体样式开发能够更加方便的协调开发人员和设计人员的工作,设计人员能够专注于窗体的样式控制使得开发人员能够专注于代码的编写,这样就有利于应用程序的开发。在WPF应用程序开发中,XAML能够方便的对应用程序中的控件,样式进行描述,示例代码如下所示。
+展开
-XML
<Button HorizontalAlignment="LeftMargin="86,0,0,65VerticalAlignment="Bottom
Width="104.887Height="54.837Content="Button">

<Button.Background>
<DrawingBrush Stretch="FillTileMode="NoneViewbox="0,0,20,20ViewboxUnits="Absolute">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#FFD3D3D3">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,20,20"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="#FF000000">
<GeometryDrawing.Geometry>
<EllipseGeometry Center="0,0RadiusX="10RadiusY="10"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="#FF000000">
<GeometryDrawing.Geometry>
<EllipseGeometry Center="20,20RadiusX="10RadiusY="10"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="#FFFFFFFF">
<GeometryDrawing.Geometry>
<EllipseGeometry Center="20,0RadiusX="10RadiusY="10"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="#FFFFFFFF">
<GeometryDrawing.Geometry>
<EllipseGeometry Center="0,20RadiusX="10RadiusY="10"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Button.Background>
</Button>

  上述代码通过使用XAML语法编写了使用平铺画笔进行渲染的按钮控件,其格式是按照XML文档的格式进行声明和编写的。创建一个富媒体的半透明控件,同样可以通过XAML进行控制,免除了C++/Java中复杂的编程实现,示例代码如下所示。
+展开
-XML
<Button Margin="0,114.419,134.797,51.255Content="Button
Background="#FFF7F7F7HorizontalAlignment="RightWidth="148.887Opacity="0.4"/>

  上述代码就创建了一个半透明控件,该控件属性分别包括Margin、Content、Background、HorizontalAlignment、Width和Opacity等,其中Opacity属性用于控制控件的半透明度。使用XAML文档进行WPF应用程序的样式控制可以实现可扩展的样式控制,设计人员可以通过直接对XAML文档的修改实现不同的样式控制。WPF应用程序中的任何控件都包括一些属性,这些属性能够方便的对控件进行样式控制,免除了复杂的编码实现。

19.2.4 WPF控件层次
  同Photoshop中的画布相同,WPF应用程序中也有层次分别,每一个控件都包含一个自己的层次,如图19-9所示。
WPF样式层次结构
图19-9 WPF样式层次结构
  无论是在WPF应用还是在Win From应用开发中,控件之间都有层次结构,如图19-10中所示,窗体的层次最低,用于承载控件。在窗体上的控件都是按照一个的层次堆叠在一起的,层次高的控件会遮住层次低的控件,在WPF布局中需要注意层次之间的控件的布局,如图19-10所示。
两个不同层次叠放的控件
图19-10 两个不同层次叠放的控件
  在Microsoft Expression Blend 2中,包含层次管理器方便对层次进行管理。创建WPF应用程序后,系统会默认的创建一个层,该层作为基层而存在,而控件都是基于该层而存在的,如图19-11所示。
层次管理
图19-11 层次管理
显式和隐藏层
图19-12 显式和隐藏层
  在层次管理器中,可以设置相应的控件是否显式或隐藏,以便在大量的控件中准确的选取相应的控件,如图19-12所示。使用层次管理能够方便管理控件所在的层次并且为设计人员提供了控件选取的遍历,在层次管理中还可以选择锁定层或解除层,当一个层被锁定后就无法在窗体的设计中拖动相应的层,这样能够遍历的对不需要经常更改的层进行方便的管理。

加支付宝好友偷能量挖...


评论(0)网络
阅读(139)喜欢(0)Asp.Net/C#/WCF