Silverlight4.0教程之使用CompositeTransform復合變形特效實現倒影

微軟于PDC2009上發布Silverlight 4 Beta版，微軟在Silverlight 4版本中處理了約8000個的Silverlight終端用戶的請求，加入了一系列另開發人員興奮的新特性，最突出的主要體現在幾個方面：

開發工具增強：Visual Studio 2010具有可視化的設計工具，創建項目時可以選擇運行時版本是3.0還是4.0，BLEND4加入XAML和C#代碼全方位智能感知功能、XAML的樣式應用更為易用等。

攝像頭與MIC硬件支持：可以用極少量的代碼實現啟用用戶本機的WebCam和Mic，并可進行本地錄制。

報表打印支持：報表打印問題在Silverlight4中得到的較好的解決。

更強大的基礎類控件（RichTextBox、DataGrid增強版）：富文本控件RichTextBox和具有可粘貼、排序功能的DataGrid被加入。

WCF增強：終于支持TCP通訊，比較HTTP提升3-5倍，限于4502-4534端口。

兼容性增強：對Google的Chrome瀏覽器的支持。

MEF支持：MEF全稱為Managed Extensibility Framework，譯為“托管擴展框架”，支持創建大型復雜的應用程序。

運行速度提升：啟動速度和渲染速度較前個版本提升約2倍左右。

DRM增強：支持PlayReady，可以對視頻和音頻的播放進行的保護，補充了對H.264的DRM保護。

其它增強：本地文件讀寫、鼠標右鍵事件支持、剪粘板支持。

以前當我們需要將多種變形效果（ScaleTransform、TranslateTransform、SkewTransform、RotationTransform）的疊加應用到一個Silverlight對象時一般是使用TransformGroup來組合變形對象，例如下面的代碼我們要實現對一個矩形的變形

XAML：

1?<Rectangle?Width="100"?Height="80"?Fill="Red">?
2?????<Rectangle.RenderTransform>?
3?????????<RotateTransform?Angle="45"/>?
4?????</Rectangle.RenderTransform>?
5?</Rectangle>?

如果要為這樣寫好的XAML代碼添加疊加變形時，我們不得不寫更多的變形對象和添加一個TransformGroup把這些變形對象“包”起來，變為以下的樣子。

XAML：

1?<Rectangle?Height="100"?Width="80"?Fill="Red">?
2?????<Rectangle.RenderTransform>?
3?????????<TransformGroup>?
4?????????????<ScaleTransform?ScaleX="0.8"?ScaleY="0.8"?/>?
5?????????????<SkewTransform?AngleX="30"?/>?
6?????????????<RotateTransform?Angle="45"?/>?
7?????????</TransformGroup>?
8?????</Rectangle.RenderTransform>?
9?</Rectangle>?

?

?

從上面的XAML代碼看來，在我們使用這種方式手寫編碼來疊加變形效果在代碼上面稍顯“羅嗦”，在Silverlight4.0中加入了新的變形對象CompositeTransform，我們可以稱為“復合變形對象”，通過CompositeTransform我們可以簡以上的XAML代碼大大簡化，等效XAML如下。

XAML：

1?<Rectangle?Height="100"?Width="80"?Fill="Red">?
2?????<Rectangle.RenderTransform>?
3?????????<CompositeTransform?SkewX="30"?Rotation="45"?ScaleX="0.8"?ScaleY="0.8"?/>?
4?????</Rectangle.RenderTransform>?
5?</Rectangle>?

上面使用復合變形實現的效果與TransformGroup是完全一致的，但代碼上簡潔了許多，接下來我們使用復合變形對象實現一個“簡潔版”的倒影效果。

XAML：

1??????<Grid?Background="Black">?
2??????????<StackPanel?Width="500"?Height="460"?Margin="5"?
3??????????????????????Orientation="Vertical">?
4??????????????<TextBlock?FontSize="16"?Width="430"?Height="20"?Foreground="White">?
5??????????????????CompositeTransform（組合變形對象）簡化實現倒影效果?
6??????????????</TextBlock>?
7??????????????<Image?Width="400"?Height="240"?Stretch="Fill"??
8?????????????????????Source="Images/avatar_8.jpg"/>?
9??????????????<Image?x:Name="imgShadow"?Width="400"?Height="200"?Stretch="Fill"?
10????????????????????Source="Images/avatar_8.jpg">?
11?????????????????<Image.OpacityMask>?
12?????????????????????<LinearGradientBrush?EndPoint="0.5,1"??
13??????????????????????????????????????????StartPoint="0.5,0">?
14?????????????????????????<GradientStop?Offset="0"/>?
15?????????????????????????<GradientStop?Color="White"?Offset="1"/>?
16?????????????????????</LinearGradientBrush>?
17?????????????????</Image.OpacityMask>?
18?????????????????<Image.RenderTransform>?
19?????????????????<!--使用CompositeTransform（組合變形對象）實現倒影-->?
20?????????????????????<CompositeTransform?TranslateX="35"?TranslateY="200"?
21?????????????????????????????????????????SkewX="10"??
22?????????????????????????????????????????ScaleY="-1"?/>?
23?????????????????</Image.RenderTransform>?
24?????????????</Image>?
25?????????</StackPanel>?
26?????</Grid>?

運行結果如圖所示。

等效的C#代碼如下：

1??????????//等效C#后臺代碼實現?
2??????????void?CompositeTransformSample_Loaded(object?sender,?RoutedEventArgs?e)?
3??????????{?
4??????????????//創建組合變形對象?
5??????????????CompositeTransform?ct?=?new?CompositeTransform()?
6??????????????{?
7??????????????????TranslateX?=?35,?
8??????????????????TranslateY?=?200,?
9??????????????????SkewX?=?10,?
10?????????????????ScaleY?=?-1?
11?????????????};?
12?????????????//應用組合變形?
13?????????????imgShadow.RenderTransform?=?ct;?
14?????????}?

使用復合變形代碼雖然簡潔，但它的CenterX和CenterY是相對固定的，你不能夠根據不同的變形屬性改變它的變形中心點，尤其是在動畫過程時，否則你可能還需要通過TransformGroup來實現變形疊加效果或動畫，不過CompositeTransform還是適用于大多數場合的變形。