使用 Expression Interactive Designer体验WPF

最近忙里偷闲体验一下.NET 3.0  Framework中的WPF，感触颇深。
记得前一阵看过一个 Thom Robbins的ppt，其中谈到WPF带来的根本性变化，要彻底的改变以往程序员的开发流程。示意如下：

前两天安装完毕VS2005 wpf extension（November CTP version）后使用wizard创建了一个wpf application发现，在vs2005中设计xaml文件很不爽。打开xaml设计器等待时间很长，而且xaml文件不能手工编辑（可能是个例，能cut/paste，不能键入新字符，不知大家的如何？），另外发现在退出vs2005时常常引起错误。
做程序久了，很少愿意使用UI设计类的工具设计UI，但实在难以忍受vs2005 wpf extension这些或大或小的不便之处了，就下载了一个Expression Interactive Designer来试试看。发现现在这个CTP版本使用起来不错的，至少比在vs里编辑xaml方便多了，而且支持timeline编辑，可以很方便的
实现动画功能，看上去很像flash啊，看来以后这些presentation要殊途同归了。
言归正传，下面是EID编辑出来的xaml文件

  1<Grid 
  2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5    xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
  6    mc:Ignorable="d"
  7    
  8    x:Name="DocumentRoot"
  9    x:Class="CodeSearch.Scene1" 
 10    Width="640" Height="480" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic">
 11  <Grid.Background>
 12    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
 13      <LinearGradientBrush.GradientStops>
 14        <GradientStopCollection>
 15          <GradientStop Color="sc#1, 0.05, 0.05, 0.05" Offset="0"/>
 16          <GradientStop Color="sc#1, 0.5, 0.5, 0.5" Offset="0.602852203975801"/>
 17          <GradientStop Color="#FF000000" Offset="1"/>
 18        </GradientStopCollection>
 19      </LinearGradientBrush.GradientStops>
 20      <LinearGradientBrush.RelativeTransform>
 21        <TransformGroup>
 22          <TranslateTransform X="-0.5" Y="-0.5"/>
 23          <ScaleTransform ScaleX="1" ScaleY="1"/>
 24          <SkewTransform AngleX="0" AngleY="0"/>
 25          <RotateTransform Angle="90"/>
 26          <TranslateTransform X="0.5" Y="0.5"/>
 27          <TranslateTransform X="0" Y="0"/>
 28        </TransformGroup>
 29      </LinearGradientBrush.RelativeTransform>
 30    </LinearGradientBrush>
 31  </Grid.Background>
 32  <Grid.Resources>
 33    <Storyboard x:Key="OnLoaded">
 34            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FeedView">
 35                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="1" KeyTime="00:00:00"/>
 36            </DoubleAnimationUsingKeyFrames>
 37            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FeedView">
 38                <DiscreteObjectKeyFrame d:KeyEase="Linear;Hold;0.5;0.5;0;0" Value="{x:Static Visibility.Visible}" KeyTime="00:00:00"/>
 39            </ObjectAnimationUsingKeyFrames>
 40            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)" Storyboard.TargetName="FeedView">
 41                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.003539823008849492" KeyTime="00:00:00"/>
 42            </DoubleAnimationUsingKeyFrames>
 43            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)" Storyboard.TargetName="FeedView">
 44                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.0030395136778115484" KeyTime="00:00:00"/>
 45            </DoubleAnimationUsingKeyFrames>
 46            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[5].(TranslateTransform.X)" Storyboard.TargetName="FeedView">
 47                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-281.5" KeyTime="00:00:00"/>
 48            </DoubleAnimationUsingKeyFrames>
 49            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[5].(TranslateTransform.Y)" Storyboard.TargetName="FeedView">
 50                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-164" KeyTime="00:00:00"/>
 51            </DoubleAnimationUsingKeyFrames>
 52        </Storyboard>
 53        <Storyboard x:Key="SearchCompleted" d:StoryboardName="SearchCompleted">
 54            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)" Storyboard.TargetName="FeedView">
 55                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.01415929203539823" KeyTime="00:00:00"/>
 56                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.037168141592920353" KeyTime="00:00:00.2500000"/>
 57                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.0902654867256637" KeyTime="00:00:00.5420000"/>
 58                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.17168141592920352" KeyTime="00:00:00.7500000"/>
 59                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.35575221238938054" KeyTime="00:00:01.0420000"/>
 60                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.41061946902654861" KeyTime="00:00:01.2920000"/>
 61                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.51858407079646007" KeyTime="00:00:01.5000000"/>
 62                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.61769911504424768" KeyTime="00:00:01.7500000"/>
 63                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.74867256637168111" KeyTime="00:00:01.9580000"/>
 64                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.88495575221238865" KeyTime="00:00:02.2920000"/>
 65                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.97876106194690116" KeyTime="00:00:03"/>
 66            </DoubleAnimationUsingKeyFrames>
 67            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[5].(TranslateTransform.X)" Storyboard.TargetName="FeedView">
 68                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-278.5" KeyTime="00:00:00"/>
 69                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-272" KeyTime="00:00:00.2500000"/>
 70                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-257" KeyTime="00:00:00.5420000"/>
 71                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-234" KeyTime="00:00:00.7500000"/>
 72                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-182" KeyTime="00:00:01.0420000"/>
 73                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-166.5" KeyTime="00:00:01.2920000"/>
 74                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-136" KeyTime="00:00:01.5000000"/>
 75                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-108.00000000000001" KeyTime="00:00:01.7500000"/>
 76                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-71.000000000000057" KeyTime="00:00:01.9580000"/>
 77                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-32.500000000000185" KeyTime="00:00:02.2920000"/>
 78                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-6.000000000000405" KeyTime="00:00:03"/>
 79            </DoubleAnimationUsingKeyFrames>
 80            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)" Storyboard.TargetName="FeedView">
 81                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.0364741641337386" KeyTime="00:00:00"/>
 82                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.079027355623100315" KeyTime="00:00:00.2500000"/>
 83                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.18237082066869309" KeyTime="00:00:00.5420000"/>
 84                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.34346504559270541" KeyTime="00:00:00.7500000"/>
 85                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.55319148936170282" KeyTime="00:00:01.0420000"/>
 86                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.61702127659574613" KeyTime="00:00:01.2920000"/>
 87                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.747720364741644" KeyTime="00:00:01.5000000"/>
 88                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.87537993920973167" KeyTime="00:00:01.7500000"/>
 89                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.96352583586627183" KeyTime="00:00:01.9580000"/>
 90                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.99696048632220935" KeyTime="00:00:02.2920000"/>
 91                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="1.0759878419453304" KeyTime="00:00:03"/>
 92            </DoubleAnimationUsingKeyFrames>
 93            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[5].(TranslateTransform.Y)" Storyboard.TargetName="FeedView">
 94                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-158.5" KeyTime="00:00:00"/>
 95                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-151.5" KeyTime="00:00:00.2500000"/>
 96                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-134.5" KeyTime="00:00:00.5420000"/>
 97                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-107.99999999999997" KeyTime="00:00:00.7500000"/>
 98                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-73.499999999999915" KeyTime="00:00:01.0420000"/>
 99                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-62.9999999999998" KeyTime="00:00:01.2920000"/>
100                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-41.499999999999588" KeyTime="00:00:01.5000000"/>
101                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-20.499999999999165" KeyTime="00:00:01.7500000"/>
102                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-5.9999999999983142" KeyTime="00:00:01.9580000"/>
103                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="-0.49999999999659916" KeyTime="00:00:02.2920000"/>
104                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="12.500000000006818" KeyTime="00:00:03"/>
105            </DoubleAnimationUsingKeyFrames>
106            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FeedView">
107                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="0.95377503852080248" KeyTime="00:00:00"/>
108                <SplineDoubleKeyFrame d:KeyEase="Linear;Linear;0.5;0.5;0.5;0.5" KeySpline="0.5,0.5,0.5,0.5" Value="1" KeyTime="00:00:00.2500000"/>
109            </DoubleAnimationUsingKeyFrames>
110        </Storyboard>
111        <Style x:Key="TreeViewStyle1" TargetType="{x:Type TreeView}">
112            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
113            <Setter Property="BorderBrush">
114                <Setter.Value>
115                    <SolidColorBrush/>
116                </Setter.Value>
117            </Setter>
118            <Setter Property="BorderThickness" Value="2,2,2,2"/>
119            <Setter Property="Padding" Value="1,1,1,1"/>
120            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
121            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
122            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
123            <Setter Property="VerticalContentAlignment" Value="Center"/>
124            <Setter Property="Template">
125                <Setter.Value>
126                    <ControlTemplate TargetType="{x:Type TreeView}">
127                        <Microsoft_Windows_Themes:ClassicBorderDecorator Background="{TemplateBinding Background}" x:Name="ClassicBorderDecorator" BorderStyle="Sunken" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
128                            <ScrollViewer Focusable="False" Background="{TemplateBinding Background}" x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" CanContentScroll="False">
129                                <ItemsPresenter x:Name="ItemsPresenter"/>
130                            </ScrollViewer>
131                        </Microsoft_Windows_Themes:ClassicBorderDecorator>
132                    </ControlTemplate>
133                </Setter.Value>
134            </Setter>
135        </Style>
136  </Grid.Resources>
137    <Grid.Triggers>
138        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
139            <BeginStoryboard x:Name="OnLoaded_BeginStoryboard" Storyboard="{DynamicResource OnLoaded}"/>
140        </EventTrigger>
141        <EventTrigger RoutedEvent="Button.Click" SourceName="Button">
142            <EventTrigger.Actions>
143                <BeginStoryboard Storyboard="{DynamicResource SearchCompleted}" x:Name="SearchCompleted_BeginStoryboard"/>
144            </EventTrigger.Actions>
145        </EventTrigger>        
146    </Grid.Triggers>
147    
148    <Grid.ColumnDefinitions>
149        <ColumnDefinition/>
150    </Grid.ColumnDefinitions>
151    <Grid.RowDefinitions>
152        <RowDefinition Height="0.3625*" />
153    <RowDefinition Height="0.6375*" />
154  </Grid.RowDefinitions>
155    <Button Click="OnClick" HorizontalAlignment="Right" Margin="0,68,138,86" Width="99" x:Name="Button" Content="Search Code" Foreground="sc#1, 0.0320657268, 0.0320657268, 0.0320657268">
156
157    </Button>    
158    <TextBox VerticalAlignment="Top" Margin="48,28,266,0" Height="21" x:Name="TextBox" Text="http://www.google.com/codesearch/feeds/search" TextWrapping="Wrap"/>
159    <TextBox Margin="47,68,267,85" x:Name="TextBox1" RenderTransformOrigin="0.5,0.5" Text="" TextWrapping="Wrap">
160        <TextBox.RenderTransform>
161            <TransformGroup>
162                <TranslateTransform X="0" Y="0"/>
163                <ScaleTransform ScaleX="1" ScaleY="1"/>
164                <SkewTransform AngleX="0" AngleY="0"/>
165                <RotateTransform Angle="-0.20186333216423114"/>
166                <TranslateTransform X="0" Y="0"/>
167                <TranslateTransform X="0" Y="0"/>
168            </TransformGroup>
169        </TextBox.RenderTransform>
170    </TextBox>
171    <TreeView Margin="46,115,29,36" x:Name="FeedView" Grid.RowSpan="2" RenderTransformOrigin="0.5,0.5" Style="{DynamicResource TreeViewStyle1}" >
172        <TreeView.RenderTransform>
173            <TransformGroup>
174                <TranslateTransform X="0" Y="0"/>
175                <ScaleTransform ScaleX="1" ScaleY="1"/>
176                <SkewTransform AngleX="0" AngleY="0"/>
177                <RotateTransform Angle="0"/>
178                <TranslateTransform X="0" Y="0"/>
179                <TranslateTransform X="0" Y="0"/>
180            </TransformGroup>
181        </TreeView.RenderTransform>
182    </TreeView>
183</Grid>

这些xaml文件代码要是手写得累够呛吧，幸好有Expression Interactive Designer。
这个简单的UI的主要功能就是从Google Code Search上搜索代码用的，这些业务性代码最好还是用vs2005来吧，在button click里编写完毕就可以了。具体代码比较简单就不一一累述了。

总结一下，未来程序的开发过程分离的要更合理了，美工人员设计UI，程序员可以更专注的编写核心逻辑代码，不用一天到晚的操心控件摆放，动画效果什么的了，呵呵。

例子代码：CodeSearch.rar