2007年11月19日星期一

Silverlight 与 WPF 的一些差异

首先,这两者使用的namespace是不同的,不要以为都是<Canvas />作为根元素那就是同一个类,其实从XML语义的角度来说不同namespace的同名节点代表着不同类别的实体。Silverlight的默认namespace是http://schemas.microsoft.com/client/2007,而WPF的默认namespace则是http://schemas.microsoft.com/winfx/2006/xaml/presentation。有趣的是,WPF是不兼容Silverlight文档的,也就是说一个具备Silverlight namespace的文档用WPF方式直接打开XAML的话就会立即抛出异常,然而反过来做则是可以的。如果在Silverlight调用的XAML中使用WPF或Silverlight以外的namespace,则会抛出异常,这说明了Silverlight不是没做namespace检查,而是刻意兼容WPF文档的。

其次,这种兼容并不意味着完全一致的呈现方式,其实两者对于同样的XAML在呈现上是会有略微差别的。我现在发现的一个细微差异是关于StrokeThickness的“溢出”效果的。首先说说Rectangle吧,假设一个长宽都是100的Rectangle,而它的StrokeThickness从0向50增长,那么你可以看到其边框的变化是从无到有,从最细到完全填充整个矩形,在这个过程中边框的延伸都是向矩形内部方向的,没有对外溢出。然而如果StrokeThickness超过50继续增长呢?这时候WPF与Silverlight的表现就有所不同了,WPF表现为与StrokeThickness等于50时一致,没有任何变化;Silverlight表现为矩形的长宽自动扩大为StrokeThickness的两倍,以确保相对的两条边框是不会互相重叠的,因此矩形不断向外“溢出”。注意“溢出”是以矩形的中点为变换(Transform)中点(Center Point)的,也就是说向上下左右四个方向等距离延伸。

我们再来看看Ellipse,同样先创建一个长轴和短轴都是100的Ellipse,然后开始增加StrokeThickness,直到超过50。Silverlight的表现和之前的Rectangle一样,那就是向外“溢出”,不过变换中点变成了左上角,扩展后的圆形向右下延伸了。WPF则更奇怪一些,同样的“溢出”问题,不过根据原来100*100的区域进行了类似Clip(剪裁)的效果。也就是说,如果StrokeThickness为200,那么这时候圆的直径为200,然而因为Ellipse的长宽都设置为100,因此就剪裁出左上角100*100的区域,你只能看到左上角的1/4圆。

看到Ellipse的效果后,我们可以反过来解释Rectangle的,其实WPF中的Rectangle不是不“溢出”,而是“溢出”后经过剪裁就和没有“溢出”一样。我们发现了的Silverlight与WPF差异,也就在于“溢出”后是否对区域进行剪裁。

这时候使用Expression Design做设计的朋友就要注意了,因为Expression Design导出的XAML无论选择WPF还是Silverlight,其namespace都是WPF的,虽然都能正常打开,但在Silverlight中看到的效果可能就与你想要的效果有所差别。

最后,有兴趣关注Silverlight的朋友,欢迎订阅我的blog:

1 条评论: