一起谈.NET技术,Hello,Expression Blend 4 (含Demo教程和源码)

简介:   前言  这段时间的开发不会用到Blend,到年底才会大量用到,本来打算到时候在写Blend相关的笔记,不过看到一些朋友还比较感兴趣,所以这里提前整理了一下。  首先,我希望你记住下面几点:  1、 Blend并不完全是为Designer设计的,玩得最好的一定是Programmer  2、必须了解Behavior,Blend很多特性基于Behavior  Expression Blend 的技术发展历史  2007  Blend的第一个版本就可以进行基本的动画设计。

  前言

  这段时间的开发不会用到Blend,到年底才会大量用到,本来打算到时候在写Blend相关的笔记,不过看到一些朋友还比较感兴趣,所以这里提前整理了一下。

  首先,我希望你记住下面几点:

  1、 Blend并不完全是为Designer设计的,玩得最好的一定是Programmer
  2、必须了解Behavior,Blend很多特性基于Behavior

  Expression Blend 的技术发展历史

  2007

  Blend的第一个版本就可以进行基本的动画设计。它通过提供一个Object and Timeine面板来进行动画的设计,这和Flash有些类似。在程序中,一段动画就是一个Timeline对象。

  那么TimeLine对象是怎样实现动画效果的呢?我们首先看一下抽象类TimeLine的定义:

 
 
namespace System.Windows.Media.Animation
{
public abstract class Timeline : DependencyObject
{
public bool AutoReverse { get ; set ; }
public TimeSpan ? BeginTime { get ; set ; }
public Duration Duration { get ; set ; }
public FillBehavior FillBehavior { get ; set ; }
public RepeatBehavior RepeatBehavior { get ; set ; }
public double SpeedRatio { get ; set ; }

public event EventHandler Completed;
}
}

  我们查看MS文档的描述:时间线表示时间段。它提供的属性可以让您指定该时间段的长度(Duration),开始时间(BeginTime),重复次数(RepeatBehavior),该时间段内时间进度的快慢(SpeedRatio)等等。从TimeLine派生的类可以提供动画功能(例如DoubleAnimation,ColorAnimation等)。一些时间线类:

 
  
System..::..Object
System.Windows..::..DependencyObject
System.Windows.Media.Animation.Timeline
System.Windows.Media.Animation.ColorAnimation
System.Windows.Media.Animation.ColorAnimationUsingKeyFrames
System.Windows.Media.Animation.DoubleAnimation
System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames
System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames
System.Windows.Media.Animation.PointAnimation
System.Windows.Media.Animation.PointAnimationUsingKeyFrames
System.Windows.Media.Animation.Storyboard
  现在我们仿佛有了一点能实现动画的基础了,然而光靠TimeLine还是不行的,看具体定义我们知道DoubleAnimation定义了一个Double属性的开始值和结束值,而ColorAnimation定义了一个Color属性的其实颜色和最终颜色,可它们怎样和一个控件关联,以及怎样播放呢?TimeLine并没有定义这些。这就要了解神奇的StoryBoard:
 
 
namespace System.Windows.Media.Animation
{
public sealed class Storyboard : Timeline
{
public static readonly DependencyProperty TargetNameProperty;
public static readonly DependencyProperty TargetPropertyProperty;

public TimelineCollection Children { get ; }

public void Begin();
public void Pause();
public void Resume();

public void Stop();
}
}

  这里看虽然StoryBoard同样继承与TimeLine,但却比其他兄弟类多了一些属性:Begin,Pause,Resume,Stop,还有一个TimeLine的集合属性,以及两个附加属性TargetName和TargetProperty。

  原来,StoryBoard才是真正和UI线程打交道的类,它的原理大概就是这样:一个StoryBoard对象包含一些TimeLine元素,每个TimeLine对象如DoubleAnimation定义动画,并用StoryBoard的两个附加属性来描述作用于哪个元素的哪个属性,当调用StoryBoard对象的Begin()方法时,UI线程会根据TimeLine的描述,找到对应元素的属性,时间线内不断修改其属性值,这样就实现了动画。

  值得注意的是,StoryBoard本身也是继承自TimeLine。有人不明白,StoryBoard主要用于实现动画而不是定义动画,为什么它也要继承自TimeLine呢?其实这是一种很好的设计模式(后面会写一篇架构和设计模式的文章,标题暂定《谁是架构师?》),从某种程度上我们可以把StoryBoard视为一些特定动画的集合,UI线程将这一些动画一起执行,然而我们可以把这个动画集合也视为一个特定的动画,所以StoryBoard也继承自TimeLine,这样你可以把一个StoryBoard对象作为另一个StoryBoard对象的子元素。

  Blend的Objects and TimeLine面板实现的就是上述功能。在面板上点击新建就会在XAML中新增一个StoryBoard对象,选择不同的时间之后没改变一个元素的某个属性,都会增加对应属性类型的TimeLine对象,这就实现了用Blend对动画的编辑。

  然而一个控件通常有许多状态,在不同的状态下会有不同的动画组,在第一版本中Blend几乎是无能为力的,所幸的是微软的Silverlight以及Blend的技术发展非常快!

  2008

  如前面描述,一个控件有非常复杂的状态,如果全靠这样一个一个修改属性值,软件开发将会变得非常痛苦而低效。在Blend SP1中,Blend Team革命性的提出了VSM(Visual State Manager)试图状态管理器,一个控件可以有很多状态,一个状态到另一个状态有很多属性值需要发生改变,这样就需要启动一个StoryBoard过渡不同的状态。而VSM则管理不同的状态,所以他们有以下关系:

  给自己的控件添加状态非常简单,在Blend中有一个State面板:   

  状态分为状态组VisualStateGroup以及状态VisualState,一个VisualStateGroup包含多个VisualState,其理解的很好的一个例子是看Button控件:

  CommonStates(VisualStateGroup)

  Normal

  MouseOver

  Pressed

  Disabled

  FocusStates(VisualStateGroup)

  Unfocused

  Fouces

  状态统一由VisualStateManager管理,VisualManager类有一个附加属性VisualStateManager.VisualStateGroups,我们看Button默认模板的定义:

 
 
< ControlTemplate TargetType ="Button" >
< Grid >
< VisualStateManager.VisualStateGroups >
< VisualStateGroup x:Name ="CommonStates" >

< VisualStateGroup.Transitions >
< VisualTransition To ="MouseOver" GeneratedDuration ="0:0:0.5" />
</ VisualStateGroup.Transitions >
< VisualState x:Name ="Normal" />
< VisualState x:Name ="MouseOver" >
< Storyboard >
< DoubleAnimation Duration ="0" To ="1"

Storyboard.TargetProperty
="Opacity"

Storyboard.TargetName
="BackgroundAnimation" />
< ColorAnimation Duration ="0" To ="#F2FFFFFF"

Storyboard.TargetProperty
="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"

Storyboard.TargetName
="BackgroundGradient" />
< ColorAnimation Duration ="0" To ="#CCFFFFFF"

Storyboard.TargetProperty
="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"

Storyboard.TargetName
="BackgroundGradient" />
< ColorAnimation Duration ="0" To ="#7FFFFFFF"

Storyboard.TargetProperty
="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"

Storyboard.TargetName
="BackgroundGradient" />
</ Storyboard >
</ VisualState >
.......

  其中VisualStateGroup还包含一个Transitions属性,Transitions是VisualTransition的集合,VisualTransition表示控件从一个状态过渡到另一个状态时发生的可视行为,其包含一个StoryBoard对象,当控件在VisualStateGroup中定义的各种状态之间过渡时将应用Transitions中的VisualTransition对象。

  通过上面的分析我们不难分析出VSM的整个逻辑:

  附加属性VisualStateManager.VisualStateGroups可以被放置于任何控件;可以通过VisualStateGroup来设置控件的状态组,每个状态组之间的过渡可视行为通过设置VisualStateGroup.Transitions来实现,Transitions实际上就是一些StoryBoard的集合,可以在定义各个子控件的属性改变;每个VisualStateGroup包含一些VisualState,VisualState包含StoryBoard属性,当过渡到这个VisualState时会触发这段动画。

  状态之间的过渡控制我们可以通过VisualStateManager.GotoState()方法来控制。所以,VSM能让你实现很复杂的动画处理,可以说有了VSM之后,Blend才开始变得强大。

  2009

  Blend的强大,得益于两个东西:第一是VSM,第二是Behavior。2009年,Blend进行了4个方面的增强:

      EasingFunction

      GoToStateBehavior

      FluidMoveBehavior

      FluidLayout

  EasingFunction(缓动函数)是个很重要的增强。以前的StoryBoard在运行时,只能根据属性的初始值和结束值进行线性改变,这样的动画有时候不够生动,比如我们可能希望在前半段时间内改变快一点,或者在某个时间段回退一下,这些都可以通过EasingFunction来实现。它本质上根据一个二次方程决定属性值的渐变,这使得我们的动画生动得多。

  每一个TimeLine的实现类几乎都定义了EasingFunction属性,微软也提供了一些基本的EasingFunction,如:

  • BackEase:在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动。

  • BounceEase:创建弹回效果。

  • CircleEase:创建使用循环函数加速和/或减速的动画。

  • CubicEase:创建使用公式 f(t) = t3 加速和/或减速的动画。

  • ElasticEase:创建表示弹簧在停止前来回振荡的动画。

  • ExponentialEase:创建使用指数公式加速和/或减速的动画。

  • PowerEase:创建使用公式 f(t) = tp(其中,p 等于 Power 属性)加速和/或减速的动画。

  • QuadraticEase:创建使用公式 f(t) = t2 加速和/或减速的动画。

  • QuarticEase:创建使用公式 f(t) = t4 加速和/或减速的动画。

  • QuinticEase:创建使用公式 f(t) = t5 加速和/或减速的动画。

  • SineEase:创建使用正弦公式加速和/或减速的动画。

  我们看一个例子:

 
 
< DoubleAnimation From ="30" To ="200" Duration ="00:00:3"
Storyboard.TargetName
="myRectangle"
Storyboard.TargetProperty
="Height" >
< DoubleAnimation.EasingFunction >
< BounceEase Bounces ="2" EasingMode ="EaseOut" Bounciness ="2" />
</ DoubleAnimation.EasingFunction >
</ DoubleAnimation >

    在Blend中设置EasingFunction的图示:

  GotoStateBehavior是一个Behavior,它用于控制我们前面VSM描述的状态的转换,在Asset面板的Behaviors中,即可以看到GotoStateBehavior控件,可以将其选择拖动到任何一个控件,即可利用Blend实现状态转换的逻辑。在Properties面板进行设置,设置触发事件,要转换的状态等:   

  如我们拖动到Button控件上,会产生如下代码:

 
 
< Button x:Name ="button" Content ="Button" >
< i:Interaction.Triggers >
< i:EventTrigger EventName ="Click" >
< ei:GoToStateAction StateName ="VisualState" />
</ i:EventTrigger >
</ i:Interaction.Triggers >
</ Button >

  GoToStateAction本身是继承自IAttachedObject,这和我们前面讲的Behavior的原理是一样,这也是Blend利用Behavior的一个例子。

  FluidMoveBehavior:StoryBoard能够做到属性值改变过程的过渡。然而还有一种场景,那就是Silverlight中控件可以随着界面大小的调整而重新布局,这是通过控件的MeasureOverride和ArrangeOverride方法来实现。一般情况下,到界面重新布局时,控件瞬间被安排到新的位置,然而有时候我们希望看到这个重新排列的过程。

  我们可以自己写逻辑实现这一功能,但是非常复杂。Behavior的用途是什么,就是重用,所以Blend小组开发了这个Behavior。

  FluidMoveBehavior也位于Asset面板中的Behaviors部分,拖动FluidMoveBehavior到一个WPF WarpPanel控件,配置的属性即可:      可以设置AppliesTo属性为Children,这一当Grid的尺寸大小发生改变时,可以看到起内部元素重新排列的过程,你还可以设置缓动函数来设置这段动画的变化效果。如下图:   

  最后要介绍的是FluidLayout,它通常用于在两种状态之间过渡的时候,控件属性的更改没有应用动画效果,而又希望平滑过渡的效果。例如,当控件从一种状态变为另一种状态时,Grid.Row有1变为2,并且Grid.Rowspan由1变为2,这一只要开启FluidLayout就能看到变换过程。你可以在States面板中设置FluidLayout:   

  很简单,只要点击"Turn on FluidLayout"就能开启状态之间的过渡效果,当然同样可以设置缓动函数EasingFunction。

  2010

  .......

  暂停

  2010 Blend 4发布,这自然包含一些新特性,由于时间及篇幅关系,我打算到下一篇续写Blend 4的一些功能。

  Blend 4基本上没有新增知识点,主要都是围绕Behavior提供的一些很酷的功能。

  所以,对于Blend,只要掌握了VSM和Behavior,我想其他的都不是问题了。

  预告后面的内容是,一个Blend Team据说花了4年时间研究的功能 FluidMoveTagSetBehavior,这是一个很有意思的特性。相信你和我一样会非常感兴趣,还有PathListBox,它能实现更酷的效果,当然还有其他东东,到时候再揭晓了。    

  Blend并不难,而且我们看到它并不是为Designer设计的,它的许多概念都需要Programer的思维。所以其实我们是很容易去学习和利用的。多摸几次就熟悉了。

  这里主要是讲理论的,后面可能会再写一篇操作的,看时间了,相信有了理论之后,再看一面操作,就可以了。

  这里打一个广告,笔者现在辞职全职创业,手头有一个计划是和Silverlight以及Windows Azure有关的,我的QQ群(6183299)会大力分享这些方面的技术,包括ASP.NET,Silverlight,Windows Azure,WCF,Expression Blend,WCF RIA Service等等新技术,因为这些都是我们会用到的技术,希望在交流学习中能找到志同道合者一起创业。欢迎加入...

  原教程下载:http://files.cnblogs.com/hielvis/Behavior2.rar

  源代码下载:http://files.cnblogs.com/hielvis/SLBlendDemo.rar

目录
相关文章
|
10天前
|
人工智能 开发框架 量子技术
【专栏】.NET 技术:驱动创新的力量
【4月更文挑战第29天】.NET技术,作为微软的开发框架,以其跨平台、开源和语言多样性驱动软件创新。它在云计算、AI/ML、混合现实等领域发挥关键作用,通过Azure、ML.NET等工具促进新兴技术发展。未来,.NET将涉足量子计算、微服务和无服务器计算,持续拓宽软件开发边界,成为创新的重要推动力。掌握.NET技术,对于开发者而言,意味着握有开启创新的钥匙。
|
10天前
|
开发框架 .NET C#
【专栏】理解.NET 技术,提升开发水平
【4月更文挑战第29天】本文介绍了.NET技术的核心概念和应用,包括其跨平台能力、性能优化、现代编程语言支持及Web开发等特性。文章强调了深入学习.NET技术、关注社区动态、实践经验及学习现代编程理念对提升开发水平的重要性。通过这些,开发者能更好地利用.NET构建高效、可维护的多平台应用。
|
10天前
|
机器学习/深度学习 vr&ar 开发者
【专栏】.NET 技术:引领开发新方向
【4月更文挑战第29天】本文探讨了.NET技术如何引领软件开发新方向,主要体现在三方面:1) 作为跨平台开发的先锋,.NET Core支持多操作系统和移动设备,借助.NET MAUI创建统一UI,适应物联网需求;2) 提升性能和开发者生产力,采用先进技术和优化策略,同时更新C#语言特性,提高代码效率和可维护性;3) 支持现代化应用架构,包括微服务、容器化,集成Kubernetes和ASP.NET Core,保障安全性。此外,.NET还不断探索AI、ML和AR/VR技术,为软件开发带来更多创新可能。
|
10天前
|
开发框架 Cloud Native 开发者
【专栏】剖析.NET 技术的核心竞争力
【4月更文挑战第29天】本文探讨了.NET框架在软件开发中的核心竞争力:1) .NET Core实现跨平台与云原生技术的融合,支持多操作系统和容器化;2) 提升性能和开发者生产力,采用JIT、AOT优化,提供C#新特性和Roslyn编译器平台;3) 支持现代化应用架构,包括微服务和容器化,内置安全机制;4) 丰富的生态系统和社区支持,拥有庞大的开发者社区和微软的持续投入。这些优势使.NET在竞争激烈的市场中保持领先地位。
|
10天前
|
开发框架 .NET 开发者
【专栏】领略.NET 技术的创新力量
【4月更文挑战第29天】.NET技术自ASP.NET起历经创新,现以.NET Core为核心,展现跨平台能力,提升性能与生产力,支持现代化应用架构。.NET Core使开发者能用同一代码库在不同操作系统上构建应用,扩展至移动和物联网领域。性能提升,C#新特性简化编程,Roslyn编译器优化代码。拥抱微服务、容器化,内置安全机制,支持OAuth等标准。未来.NET 6将引入更快性能、Hot Reload等功能,预示着.NET将持续引领软件开发潮流,为开发者创造更多机会。
|
10天前
|
物联网 vr&ar 开发者
【专栏】.NET 技术:为开发注入活力
【4月更文挑战第29天】本文探讨了.NET技术的创新,主要体现在三个方面:1) .NET Core实现跨平台开发革命,支持多种操作系统和硬件,如.NET MAUI用于多平台UI;2) 性能提升与生产力飞跃,C#新特性简化编程,JIT和AOT优化提升性能,Roslyn提供代码分析工具;3) 引领现代化应用架构,支持微服务、容器化,内置安全机制。未来,.NET 7将带来更多新特性和前沿技术整合,如量子计算、AI,持续推动软件开发创新。开发者掌握.NET技术将赢得竞争优势。
|
10天前
|
人工智能 前端开发 Cloud Native
【专栏】洞察.NET 技术的开发趋势
【4月更文挑战第29天】本文探讨了.NET技术的三大发展趋势:1) 跨平台与云原生技术融合,通过.NET Core支持轻量级、高性能应用,适应云计算和微服务;2) 人工智能与机器学习的集成,如ML.NET框架,使开发者能用C#构建AI模型;3) 引入现代化前端开发技术,如Blazor,实现前后端一致性。随着.NET 8等新版本的发布,期待更多创新技术如量子计算、AR/VR的融合,.NET将持续推动软件开发的创新与进步。
|
10天前
|
人工智能 前端开发 Devops
【专栏】洞察.NET 技术在现代开发中的作用
【4月更文挑战第29天】本文探讨了.NET技术在现代软件开发中的核心价值、应用及挑战。.NET提供语言统一性与多样性,强大的Visual Studio工具,丰富的类库,跨平台能力及活跃的开发者社区。实际应用包括企业级应用、Web、移动、云服务和游戏开发。未来面临性能优化、容器化、AI集成等挑战,需持续创新。开发者应深入理解.NET,把握技术趋势,参与社区,共创美好未来。
|
10天前
|
开发工具 C# 开发者
【专栏】理解.NET 技术,开创美好未来
【4月更文挑战第29天】本文探讨了.NET技术在软件开发中的关键作用,强调其核心优势,如语言多样性、丰富类库、强大的开发工具和跨平台能力。.NET在现代应用开发中涉及企业级应用、云服务集成、微服务、移动应用和游戏开发。未来,.NET将持续创新,提升性能,拓展应用场景,并促进更紧密的社区合作,通过跨平台框架扩大应用范围。开发者应深入学习.NET,抓住技术趋势,共创美好未来。
|
10天前
|
机器学习/深度学习 人工智能 开发者
【专栏】.NET 技术:为开发带来新机遇
【4月更文挑战第29天】本文探讨了.NET技术如何为软件开发带来新机遇,分为三个部分:首先,.NET的跨平台革命,包括.NET Core的兴起、Xamarin与.NET MAUI的移动应用开发、开源社区的推动及性能优化;其次,介绍了云服务与微服务架构的集成,如Azure云服务、微服务支持、DevOps与CI/CD,以及Docker容器化;最后,讨论了AI与机器学习集成,如ML.NET、认知服务、TensorFlow和ONNX,使开发者能构建智能应用。面对这些机遇,开发者应不断学习和适应新技术,以创造更多价值。