Silverlight中的Transform相信大家已經很熟悉了,它們有ScaleTransform, SkewTransform, RotateTransform和TranslateTransform
當我們要做一些有趣的效果時,這些Transform聯合起來應用也挺叫人頭疼的,看着那麼一大長傳的xaml總是令人不爽。
而Silverlight4Beta中引入的CompositeTransform則解決了這個問題
看一下類圖
<a href="http://www.024hi.com/Images/cnblogs/Silverlight4BetaCompositeTransform_138E4/image.png"></a>
接下來做個例子,隻有xaml哦
<UserControl x:Class="SilverlightApplication3.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Style TargetType="Slider">
<Setter Property="Width" Value="200"/>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Width="210">
<StackPanel x:Name="ContentStackPanel">
<Image.RenderTransform>
<CompositeTransform x:Name="cr1"/>
</Image.RenderTransform>
</Image>
<StackPanel Orientation="Horizontal">
<TextBlock Text="CenterX"/>
<Slider Value="{Binding ElementName=cr1,Path=CenterX,Mode=TwoWay}"/>
</StackPanel>
<TextBlock Text="CenterY"/>
<Slider Value="{Binding ElementName=cr1,Path=CenterY,Mode=TwoWay}"/>
<TextBlock Text="Rotation"/>
<Slider Value="{Binding ElementName=cr1,Path=Rotation,Mode=TwoWay}"/>
<TextBlock Text="ScaleX"/>
<Slider Value="{Binding ElementName=cr1,Path=ScaleX,Mode=TwoWay}"/>
<TextBlock Text="ScaleY"/>
<Slider Value="{Binding ElementName=cr1,Path=ScaleY,Mode=TwoWay}"/>
<TextBlock Text="TranslateX"/>
<Slider Value="{Binding ElementName=cr1,Path=TranslateX,Mode=TwoWay}"/>
<TextBlock Text="TranslateY"/>
<Slider Value="{Binding ElementName=cr1,Path=TranslateY,Mode=TwoWay}"/>
</StackPanel>
</Grid>
</UserControl>
相關的Transform隻要那加粗的三行代碼就可實作,是不是很友善呢?
F5運作後的效果如圖
ok.have fun~
本文轉自紫色永恒51CTO部落格,原文連結:http://www.cnblogs.com/024hi/archive/2009/12/12/1622723.html ,如需轉載請自行聯系原作者