Silverlight4Beta之CompositeTransform

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

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

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

看一下类图

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

<UserControl x:Class="SilverlightApplication3.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    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 Source="http://www.bbniu.com/core/avatar.php?uid=77&amp;size=middle" Width="120" Height="120"> 
                <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> 
            <StackPanel Orientation="Horizontal"> 
                <TextBlock Text="CenterY"/> 
                <Slider Value="{Binding ElementName=cr1,Path=CenterY,Mode=TwoWay}"/> 
            </StackPanel> 
            <StackPanel Orientation="Horizontal"> 
                <TextBlock Text="Rotation"/> 
                <Slider Value="{Binding ElementName=cr1,Path=Rotation,Mode=TwoWay}"/> 
            </StackPanel> 
            <StackPanel Orientation="Horizontal"> 
                <TextBlock Text="ScaleX"/> 
                <Slider Value="{Binding ElementName=cr1,Path=ScaleX,Mode=TwoWay}"/> 
            </StackPanel> 
            <StackPanel Orientation="Horizontal"> 
                <TextBlock Text="ScaleY"/> 
                <Slider Value="{Binding ElementName=cr1,Path=ScaleY,Mode=TwoWay}"/> 
            </StackPanel> 
            <StackPanel Orientation="Horizontal"> 
                <TextBlock Text="TranslateX"/> 
                <Slider Value="{Binding ElementName=cr1,Path=TranslateX,Mode=TwoWay}"/> 
            </StackPanel> 
            <StackPanel Orientation="Horizontal"> 
                <TextBlock Text="TranslateY"/> 
                <Slider Value="{Binding ElementName=cr1,Path=TranslateY,Mode=TwoWay}"/> 
            </StackPanel> 
        </StackPanel> 
    </Grid> 
</UserControl>

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

 

F5运行后的效果如图

在线示例：http://www.bbniu.com/matrix/ShowApplication.aspx?id=28（感谢棒棒牛bbniu.com论坛）

ok.have fun~

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