Windows Phone 7 不温不火学习之《Expression Blend 创建渐变效果和创建Storyboard动画》

　　说起Expression Blend ，开发过Silverlight 或者WPF的同学肯定会暗爽一把。微软把这一神器免费提供给我们开发者使用，特别是自从WP7 发布就立刻免费，可以看出微软对WP7的重视。

　　年底又好消息不断，微软和NOKIA组成战略合作伙伴，NOKIA将把携地图数据与营销能力加入WP7的创新等，无疑给我们WP7开发者一剂强心剂。好了废话不多说，回到主题。

Expression Blend 工具简介

• 一款专业设计工具，制作基于Microsoft Silverlight的应用程序的精美复杂用户界面。
• 让设计人员集中精力从事创作，开发人员集中精力从事编程工作。每个团队成员都可以单独进行工作而不妨碍其他成员的进度。
• 可以在绘图板上绘制形状、路径和控件，修改其外观和行为，可以导入图像、视频和声音。
• 可以创建用于动态显示设计的可视化元素或者音频元素的Storyboard，并可以选择在用户与应用程序进行交互时触发这些Storyboard。（本篇文章将涉及到这个内容）
• 可重新设计应用于基本控件的模板，使应用程序具有独特的外观和行为。

 　　之前写过一篇文章，是使用Expression Blend 创建ApplicationBar ，得益于这个神器ApplicationBar的创建不用我们自己手工写代码即可完成，本篇也将继续使用这一工具来创建一个带渐变效果的Ellipse ，并且为它添加Storyboard 动画行为。而相同的功能在Android 上的使，比如渐变的效果，就需要另外添加一个XML文件，然后在XML文件输写一定量的代码控制渐变效果，并将其赋值给VIEW。使用Expression Blend 我们可以不用写一行代码就可以轻视实现这一功能，工具会自动添加我们实现好的代码。

　　下面开始使这一工具为Ellipse添加渐变效果。

　　在Expression Blend 的工具栏上的Rectangle 点右键，弹出选择面板，使用Ellipse :

在屏幕上，画一个矩形图形，然后使用Selection工具，点击图形并转到这个图形对象的Properties，设置它的渐变颜色：

找以Brushes面板，点击Gradient brush选项卡，下面的Editor 颜色面板，这里就是设置渐变颜色的调色板：

 

下面有条状态条分别有三个箭头，这里我们可以设置多个箭头，代码颜色区别点。依次为开始-》中间点-》结束点，如果哪个箭头你想去掉，只要按住然后往旁边其他方向拉即可将其拉走。这时你可以尝试着调整某个箭头或者点击上面的颜色板设置你需要的渐变颜色。

　　设置完后，你可以将这个渐变颜色值保存为资源字典，以后其他同样需求的功能即可直接引用资源字典。创建资源字典如下步骤：

如图，在属性面板的旁边有一个Resouce选项卡，在此资源选项卡上添加一个资源字典，用来存放资源。然后转到属性面板，在Brushes下面有一个Fill代码当前对象所使用的资源，如本篇使的渐变Brush，Fill最右链有一个Advanced options按钮，点击它会弹出一系列选择，如图：

前两个比较简单，我们主要来看中间四个选项：

• Local Resouce 使用本地的资源，即本地的资源字典里面的资源
• System Resouce 使用系统资源，会列出当前系统可以用到的所有样式资源
• Edit Resouce 编辑资源
• Convert to New Resouce 将当前编辑好的资源转换成一个新的可重复利用的资源

这里我们就要利用Convert to New Resouce 将资源转换到我们的资源字典中，然后再让它使用本地我们保存好的资源。假设，我们的资源名称为Brush1，就可以看到它会产生如下的代码：

 

<Ellipse x:Name="ellipse" HorizontalAlignment="Left" Height="131" Margin="76,138,0,0" Stroke="Black" VerticalAlignment="Top" Width="124" RenderTransformOrigin="0.5,0.5" Fill="{StaticResource Brush1}">
                <Ellipse.RenderTransform>
                    <CompositeTransform/>
                </Ellipse.RenderTransform>
            </Ellipse>

 

那么它是如何读得到这个资源的呢？原来Expression Blend 不单在我们当前编辑的页面上添加代码，而且还跑到App.xaml中为我们写好全局的资源，查看下代码：

 

 <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
         
    </Application.Resources>

 

 

Tip：这用做在VS2010 或vs 2010 expression 上是看不到即时效果的，必须运行才可以看到效果。

最终实现的效果如下：

 

　　下面我们为它添加一个Storyboard ，使它可以忽大忽移位忽小等动作。

再次使用Selection工具，选中该对象，转到Objects and Timeline 添加一个叫testStory 的Storyboard ：

上图我己经事先为该对象加入四个动作关键帧，每添加一个关键帧就需要转到布局改变一下对象的位置或者大小，使其对应该帧可以记录我们所改变的动作，具体要添加多少帧可以看具体项目的需求。设置完后上面有五个按钮可以预览我们所制作的Storyboard 。之后Expression Blend 会在相应的面页上产生我们刚才设置过后的xaml代码，但这些代码并不包含可直接运行代码。必须在CS里面显式的设置该Stoyboard 是运行或者是停止等状态，代码如下：

 

更详细的用法，可以参考这位博友的文章：nowpaper 相当牛B的人哟。

　　最后祝大家情人节快乐。

 

源码下载：Expression Blend