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&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~