近来尝试使用Silverlight介入早期的iPad开发，尝试做一些原型用来测试交互设计的效果。由于Silverlight开发工具的便利及对触屏显示器的支持，开发速度非常快，虽然不能完全模拟在iPad上的效果，但也可以算是达到了一半快速原型的目的。以下是使用Dell的触控显示器的原型实际效果：
与此同时，为了方便下次使用，我把用于iPad模拟的项目文件制作成了一个Visual Studio 的项目模板，点此下载，以下是预览效果：
下载ZIP文件包后，拷到
C:\Users\[Your Name]\Documents\Visual Studio 2010\Templates\ProjectTemplates\Silverlight
以后在新建Visual Studio项目的时候，在Silverlight分类下便可以看到这款模板
今天将在北京举行Silverlight 3的发布，到时候我会演示Expression Blend 3的SketchFlow功能。通过对RTM版本的Expression Blend的试用，发现在性能，UX等各方面都有很大的提升，虽然现在还不能确定SketchFlow对未来项目设计上的影响，但是总是看到了一些新的亮点和机会。欢迎关注今天的Silverlight 3的发布。
前面我提及的由我们中国团队参与的DeepZoomPix项目已经成功的运作了2个月时间，其中MSN Brazil 开始使用DeepZoomPix展示2009 Cannes Film Festival的图片.摄影师Thomas Hawk也在使用DeepZoomPix
同时早些时间DeepZoom Composer软件也支持直接向DeepZoomPix发布照片
PlaneProjection帮助我们对图形及图像视频对象进行透视变形的效果处理，一个典型的PlaneProjection应用的XAML参数如下所示
对于PlaneProjection的操作主要是旋转(Rotation)和位移(Offset)
对于旋转RotationXYZ来说比较容易理解，主要空间关系如下图所示:
CenterOfRotationX,Y,Z的默认值是x=0.5 y=0.5 z=0，其中xy分别为0表示图形左上角，为1表示图像右下角，0-1实际上是图形宽高的百分比关系，可以超过1，那样坐标轴心点将在图象之外。Z轴根据现阶段的应用来看，是一个象素级单位，其变化关系可以如下图所示：
LocalOffsetX,Y,Z和GlobalOffsetX,Y,Z用来移动图形的位置，其中LocalOffset以图形自身的坐标系为坐轴系统来移动，也就是说如果图象被旋转，那么他自身的坐标系与屏幕将发生改变。而GlobalOffset将永远以屏幕的坐标系为坐标系统来移动图形，不受图形自身旋转或位置变化而产生影响。
基于Silverlight DeepZoom技术的技术展示站DeepZoomPix已经正式推出，这个项目我们团队参与有历时半年之久，从POC到最终的产品。同时相关开发人员的资源也已经上线，这个网站是基于之前我提到的MoonCake Service进行的后续产品开发。其中Silverlight客户端仍然保持原有Mooncake的风格，Website前端在后来我们团队也对其进行了重新设计，有兴趣可以尝试一下。
最近的项目,已经有人在网上公开了.我们称之为Mooncake Viewer,主要功能是可以从FLickr或Smugmug帐号抓取用户的照片,在服务器端生成一个适合Silverlight使用的Deepzoom格式文件.而这个项目中包含一个使用Silverlight开发的Viewer,可以让用户嵌入自己的网站或博客与其它人分享.有兴趣的话可以尝试一下:访问地址
开发比较动态,图形化的应用,总是会出现CPU占用率高的问题,这个问题无论是WPF还是FLASH还是Silverlight中,都会出现,大部分情况也就是一些loop中,不断的进行一些操作造成的.从最近silverlight 2的开发经验中来看,在一直运行的loop中做赋值操作,有一些效率很高,有一些就非常消耗,举例:在loop中,不停的对对象进行Canvas.SetLeft或SetTop,都不会占用CPU资源,而如果在loop中改变了对象的Scale值..或是所有RenderTransform的值,都会相当消耗CPU资源.改变对象的Visibility,也会严重消耗CPU资源.所以,如果CPU占用高,不妨检查这样一些操作,也许可以不用理会SetLeft,但Visibility和Scale值的改变,就值得注意了!
在Silverlight做逐帧事件可以用DispatcherTimer计时器,或使用一个空的Storyboard，在每次Completed事件中写你的执行代码然后再启动Storyboard，但是哪一种更好呢？这里有一个解释来自Adam Kinney:
The DispatcherTimer is a lower resolution timer than the timer behind the Storyboard class, which causes loss in fidelity. Additionally, the Storyboard execution is more stable across the different supported OSs and Browsers. I ll put together a sample to show the comparision.
不管怎样使用空的Storyboard来做逐帧是一个很好的解决方案,为此我设计了一个用于替代DispatcherTimer的StoryboardTimer类,可以在程序中和使用DispatcherTimer一样使用:
public class StoryboardTimer
{
private TimeSpan interval;
public TimeSpan Interval {
get { return interval; }
set {
interval = value;
sbTimer.Duration = new Duration(interval);
}
}
public event RoutedEventHandler Tick;
private void RaiseTick()
{
if (Tick != null)
{
Tick(this, new RoutedEventArgs());
}
}
Storyboard sbTimer;
private bool startFlag;
public static int StoryboardTimerCount = 0;
public StoryboardTimer()
{
sbTimer = new Storyboard();
startFlag = false;
sbTimer.Completed += new EventHandler(sbTimer_Completed);
(Application.Current).Resources.Add("sbTimer"+StoryboardTimer.StoryboardTimerCount, sbTimer);
StoryboardTimer.StoryboardTimerCount++;
}
void sbTimer_Completed(object sender, EventArgs e)
{
RaiseTick();
if (startFlag)
{
sbTimer.Begin();
}
}
public void Start()
{
startFlag = true;
sbTimer.Begin();
}
public void Stop()
{
startFlag = false;
}
}
使用方法
StoryboardTimer timer= new StoryboardTimer();
timer.Interval = TimeSpan.FromSeconds(frameRate);
timer.Tick += new RoutedEventHandler(timer_Tick);
void timer_Tick(object sender, RoutedEventArgs e)
{
//dosomething
}
[原文地址]
这是有关”部件与状态”模式系列的最后一篇!
今天,我们讨论一些关于如何使用”部件与状态”模式的使用建议.我们还会看看有关VisualStageManager在未来的Silverlight及WPF中的情况.
“部件与状态”模式使用推荐
1.在UserControls用户控件和Custom Control自定义控件中使用”部件与状态”模式
就像我们在第一篇中提到的,”部件与状态”模式只是一个模式.在实际运行中并不是强制的,你可以在创建控件时不采用这种方式.
但是,我们觉得这是一个很好的模式.而且Blend针对自定义控件的的可视化编辑方式只支持这种模式.
虽然我们这一系列一直关注在自定义控件Custom Controls中的VSM,但是你同样可以在用户控件User Control中使用他.
2.自行命名VSM xmlns
因为一个已知的Silverlight 2 Beta 2 Bug,你必须在头部申明VisualStateManager的xmlns.
xmlns:vsm=“clr-namespace:System.Windows;assembly=System.Windows”
3.命名约定
为了控件的一致性,我们推荐使用如下的一些命名约定.
4.CommonStates 和 FocusStates 比较特殊
许多控件都使用了这二个状态组
如果你的控件也有这些状态的特征,为了一致性,我们推荐使用相同的组名和名称
5.能够适应模板中没有Parts & States的情况
有很多原因能说明为什么控件模板中没有给一些部件和状况:设计师可能没有创建等原因.
需要有一些良好的编写习惯去防止由于部件遗失造成的程序崩溃.
注意:VisualStateManager.GoToState()方法已经有这种预防措施,当VisualState没有找到时,会返回false.
6.考虑支持一个”fallback”状态(当状态不存在时,用另一状态替代)
在复杂的控件中,可以提供一个fallback控制当某些状态不存在时提供一种替代方案
if (VisualStateManager.GoToState(this, “FocusContent”, useTransitions) == false){VisualStateManager.GoToState(this, “Focus", useTransitions);}
这个处理方式的好处显而易见:当设计师没有提供合适的状态时,控件能够继续进行一些视觉上的正常表现.
但也有一些不好的影响:fallback状态机制并不是完全整合在”部件与状态”模式中,这意味着Blend软件并不能很好的识别出来(在可视化编辑中)
所以,请减少使用fallback状态并只在控件非常复杂时才使用.
同样,如果你认为这种方式对你有用的话,让我们知道!我们乐意接受你的反馈.
7.子类的状态应该添加在新的状态组中(而不是已存在的状态组)
如你所知,每一个状态组是orthogonal(同时使用二个组中的二个状态).这使得子类很容易添加新的状态组.例如,你可以创建一个StackButton从Button继承并添加一个StackState组:
这个可以正常运作因为StackState状态组的状态是完全独立于Button的CommonStates & FocusStates.
然尔,如果你想把一个新的状态加到一个已经存在的状态组中,这个状态组的逻辑就变得混乱.就无法保证在状态发生时找到正确的状态.
我们这个例子简单一些.BasicControl定义了二个状态在CommonStates中:Normal,MouseOver.创新的逻辑是:
现在,ExtendedControl从BasicControls继承并想加一个Pressed状态,这个逻辑状态的目标可能是:
然尔,并没有好的方式让ExtendedControl去添加有关(而且鼠标按钮没有按下)MouseOver状态的检测,因为这个逻辑存在于Button基类中.
这一切都说明:子类通常只能把状态加到新的状态组中.但我们推荐如果是全新的状态(不破坏原有逻辑的),可以加到状态组中.
注意:为在未来解决这些问题我们有不同的方式(有好的也有坏的).我们现在正在提供一个Triggers-Based基于触发的解决方案.如果想了解更多,继续阅读.
展望未来
VSM & Windows Presentation Foundation
Silverlight的”控件与状态”模式改变了WPF存在的很多现有特性(像ControlTemplates,GetTemplateChild() Hellper,etc).
然尔,这些相关的特性如VisualStateManager和相关的类并不存在于WPF中.好消息是我们在下一版的WPF中会包含VisualStageManager!
为了让大家能够把Silverlight 2的控件和皮肤移植到WPF,下一版.NET Framework会支持得更好一些.为帮助我们实现,我们会在下一版的完整WPF发售前,就中提供一个包含VisualStateManager的程序集.现然这个计划还为时尚早,未来会提供时间表的细节.
未来的Silverlight特性
经常有人问在Silverlight控件模型中,Triggers触发器在哪里?
有很多原因使得我们不打算在Silverlight 2 的发布中加入触发器.一个主要的技术挑战是我们的属性系统架构不够达到能支持触发器.这在未来的Silverlight会改变,并会加入触发器的支持.
触发器和VSM之间如何协作呢?我们初步的方案是这样构想的:
提供一个GoToState触发器去调用状态变化.
设计师会有一个选项去使用内置的控件状态(不使用视觉状态变化的逻辑去控制).或者,设计师愿意在XAML中使用所有的触发器和VSM状态变化.也可能设计师能够自行添加新的状态到新状态组或存在的状态组中,而不去考虑控件的代码的情况下.
更多激动的特性会到来!
结束
这就是这四篇的有关Silverlight 2 “部件与状态”模式的全部了.如果你有问题,请反馈给我们.
如果这一系列还不够了解VisualStateManager,这有一些其它资源:
Silverlight 2 Beta 2 即将到来，而除了Beta 2的到来外,另外值得关注的是有关Expression Blend针对Beta 2的更新
其中之一是,新的Expression Blend 2.5 (June 2008),将支持其于IDE情况下的模板建立和修改,也就是还原了与WPF中的Edit Template一样的功能,这样我们在开发Silverlight应用的时候,不用手写大片大片的Xaml代码了
另一则是同样是新的Blend中,将添加对"状态管理器"VisualStateManager的支持,VisualStateManager用于管理控件的状态,这是Silverlight 2 控件中所设定的机制,如按钮有鼠标移上,移开,点击等各种状态,在Silverlight中,所有控件都通过一个叫VisualStateManager的模式进行状态的管理,而在新的Blend中,在IDE中将直接支持对于状态的管理,将大大简化操作,直接在IDE中完成对各状态的视觉效果设计