用Microsoft Expression Design 2 设计SilverLight应用程序界面

SilverLight出来很久了，一直没有机会真正的去了解的，最近我做了一次功能体验如果把SilverLight的XAML想成HTML的话，那Microsoft Expression Blend 就是一个Dreamweaver，虽然不是很完善，但靠微软的实力我想不用多久，这些产品就会普及到应用层，今天我来讲的是Expression Design， Expression Design是一设计工具，将图型转换成XAML代码，所在SilverLight中，有很绚丽的效果图片，都不是真正的图片，而是通过XAML代码实现的,下面我们就来体验一下这个过程吧

1.我们新建一个文件，作为系统登录的界面。

2.在工作区中，我们绘制一个登录框，选择矩型工具，在编辑矩型属性中，将矩型设置成

3.用文字工具写相关的信息，在右边的文字属性中设置文字的效果

4.设置输入框的样式，加入渐变

5.添加按钮的样式

6.按钮上添加上文字

7.为了方便以后修改，所以要保存好这个Design文件

8.选择"文件"单中的"导出"

9.设置属性，选择"XAML SilverLight画布",也就是生成我们想要的XAML代码

10.根据需求，可以设置导出属性。

11.生成的代码

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Document" Width="437" Height="259" Clip="F1 M 0,0L 437,0L 437,259L 0,259L 0,0">
 <Canvas x:Name="层_1" Width="460" Height="320" Canvas.Left="0" Canvas.Top="0">
  <Path x:Name="Path" Width="437" Height="259" Canvas.Left="-9.53674e-007" Canvas.Top="0" Stretch="Fill" Data="F1 M 6.5,1.5L 430.5,1.5C 433.261,1.5 435.5,3.73856 435.5,6.5L 435.5,252.5C 435.5,255.261 433.261,257.5 430.5,257.5L 6.5,257.5C 3.73858,257.5 1.5,255.261 1.5,252.5L 1.5,6.5C 1.5,3.73856 3.73858,1.5 6.5,1.5 Z " StrokeThickness="3" StrokeLineJoin="Round">
   <Path.Stroke>
    <LinearGradientBrush StartPoint="0.5,-0.304939" EndPoint="0.5,1.30494">
     <LinearGradientBrush.GradientStops>
      <GradientStop Color="#5AFFFFFF" Offset="0"/>
      <GradientStop Color="#00FFFFFF" Offset="1"/>
     </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
   </Path.Stroke>
   <Path.Fill>
    <LinearGradientBrush StartPoint="0.5,-0.314372" EndPoint="0.5,1.31437">
     <LinearGradientBrush.GradientStops>
      <GradientStop Color="#5AFFFFFF" Offset="0"/>
      <GradientStop Color="#5AFFFFFF" Offset="1"/>
     </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
   </Path.Fill>
  </Path>
 </Canvas>
</Canvas>

文件下载

晒晒我做的登录界面