天天看點

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 ,如需轉載請自行聯系原作者

繼續閱讀