天天看点

Silverlight4Beta之CompositeTransform

Silverlight中的Transform相信大家已经很熟悉了,它们有ScaleTransform, SkewTransform, RotateTransform和TranslateTransform

当我们要做一些有趣的效果时,这些Transform联合起来应用也挺叫人头疼的,看着那么一大长传的xaml总是令人不爽。

而Silverlight4Beta中引入的CompositeTransform则解决了这个问题

看一下类图

<a href="http://www.024hi.com/Images/cnblogs/Silverlight4BetaCompositeTransform_138E4/image.png"></a>

接下来做个例子,只有xaml哦

&lt;UserControl x:Class="SilverlightApplication3.MainPage" 

    mc:Ignorable="d" 

    d:DesignHeight="300" d:DesignWidth="400"&gt; 

    &lt;UserControl.Resources&gt; 

        &lt;Style  TargetType="Slider"&gt; 

            &lt;Setter Property="Width" Value="200"/&gt; 

        &lt;/Style&gt; 

    &lt;/UserControl.Resources&gt; 

    &lt;Grid x:Name="LayoutRoot" Width="210"&gt; 

        &lt;StackPanel x:Name="ContentStackPanel"&gt; 

                &lt;Image.RenderTransform&gt; 

                    &lt;CompositeTransform x:Name="cr1"/&gt; 

                &lt;/Image.RenderTransform&gt; 

            &lt;/Image&gt; 

            &lt;StackPanel Orientation="Horizontal"&gt; 

                &lt;TextBlock Text="CenterX"/&gt; 

                &lt;Slider Value="{Binding ElementName=cr1,Path=CenterX,Mode=TwoWay}"/&gt; 

            &lt;/StackPanel&gt; 

                &lt;TextBlock Text="CenterY"/&gt; 

                &lt;Slider Value="{Binding ElementName=cr1,Path=CenterY,Mode=TwoWay}"/&gt; 

                &lt;TextBlock Text="Rotation"/&gt; 

                &lt;Slider Value="{Binding ElementName=cr1,Path=Rotation,Mode=TwoWay}"/&gt; 

                &lt;TextBlock Text="ScaleX"/&gt; 

                &lt;Slider Value="{Binding ElementName=cr1,Path=ScaleX,Mode=TwoWay}"/&gt; 

                &lt;TextBlock Text="ScaleY"/&gt; 

                &lt;Slider Value="{Binding ElementName=cr1,Path=ScaleY,Mode=TwoWay}"/&gt; 

                &lt;TextBlock Text="TranslateX"/&gt; 

                &lt;Slider Value="{Binding ElementName=cr1,Path=TranslateX,Mode=TwoWay}"/&gt; 

                &lt;TextBlock Text="TranslateY"/&gt; 

                &lt;Slider Value="{Binding ElementName=cr1,Path=TranslateY,Mode=TwoWay}"/&gt; 

        &lt;/StackPanel&gt; 

    &lt;/Grid&gt; 

&lt;/UserControl&gt;

相关的Transform只要那加粗的三行代码就可实现,是不是很方便呢?

F5运行后的效果如图

ok.have fun~

本文转自紫色永恒51CTO博客,原文链接:http://www.cnblogs.com/024hi/archive/2009/12/12/1622723.html ,如需转载请自行联系原作者

继续阅读