[silverlight] silverlight3新增功能1:三维效果(透视转换)
既然已经开始做SL3项目,而且document也已经入手了,那就开始学习吧。虽然直接读document比较方便,但谢谢学习心得总是好事。
首先应该看看Silverlight 3 中的新增功能,Silverlight中重大的改进之一就是3D效果了,以前宣称"FLASH杀手"却连3D都没有真是难以置信的厚脸皮(还是说其实FLASH的3D也是模拟出来的?)。先来看看效果吧,是参考Silverlight 3 Beta 新特性解析(2)-Graphics篇 - 笑看风云淡 后做出来的:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
XAML
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0" Color="#FF979797"/>
<GradientStop Offset="1" Color="#FF676767"/>
</LinearGradientBrush>
</Grid.Background>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
<Image HorizontalAlignment="Center" Width="300" Margin="20,5" Source="logo.jpg">
<Image.Projection>
<PlaneProjection x:Name="ImageProjection"/>
</Image.Projection>
</Image>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="CenterOfRotationX: -5" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-5" Width="380" Maximum="5" Value="{Binding CenterOfRotationX, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding CenterOfRotationX, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="5" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="CenterOfRotationY: -5" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-5" Width="380" Maximum="5" Value="{Binding CenterOfRotationY, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding CenterOfRotationY, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="5" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="CenterOfRotationZ: -5" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-5" Width="380" Maximum="5" Value="{Binding CenterOfRotationZ, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding CenterOfRotationZ, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="5" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="RotationX: -360" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-360" Width="380" Maximum="360" Value="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="360" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="RotationY: -360" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-360" Width="380" Maximum="360" Value="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="360" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="RotationZ: -360" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-360" Width="380" Maximum="360" Value="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="360" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="GlobalOffsetX: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding GlobalOffsetX, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding GlobalOffsetX, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="GlobalOffsetY: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding GlobalOffsetY, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding GlobalOffsetY, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="GlobalOffsetZ: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding GlobalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding GlobalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="LocalOffsetX: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding LocalOffsetX, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding LocalOffsetX, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="LocalOffsetY: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding LocalOffsetY, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding LocalOffsetY, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="LocalOffsetZ: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding LocalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding LocalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
</StackPanel>
</Grid>
(题外话,新增的Element-To-Element Binding功能很方便,以前使用Slider需要在ValueChanged事件中写代码实现,而且也不能这样个绑定ToolTip。)
稍微注释一下:
首先应该看看Silverlight 3 中的新增功能,Silverlight中重大的改进之一就是3D效果了,以前宣称"FLASH杀手"却连3D都没有真是难以置信的厚脸皮(还是说其实FLASH的3D也是模拟出来的?)。先来看看效果吧,是参考Silverlight 3 Beta 新特性解析(2)-Graphics篇 - 笑看风云淡 后做出来的:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0" Color="#FF979797"/>
<GradientStop Offset="1" Color="#FF676767"/>
</LinearGradientBrush>
</Grid.Background>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
<Image HorizontalAlignment="Center" Width="300" Margin="20,5" Source="logo.jpg">
<Image.Projection>
<PlaneProjection x:Name="ImageProjection"/>
</Image.Projection>
</Image>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="CenterOfRotationX: -5" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-5" Width="380" Maximum="5" Value="{Binding CenterOfRotationX, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding CenterOfRotationX, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="5" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="CenterOfRotationY: -5" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-5" Width="380" Maximum="5" Value="{Binding CenterOfRotationY, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding CenterOfRotationY, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="5" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="CenterOfRotationZ: -5" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-5" Width="380" Maximum="5" Value="{Binding CenterOfRotationZ, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding CenterOfRotationZ, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="5" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="RotationX: -360" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-360" Width="380" Maximum="360" Value="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="360" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="RotationY: -360" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-360" Width="380" Maximum="360" Value="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="360" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="RotationZ: -360" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-360" Width="380" Maximum="360" Value="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="360" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="GlobalOffsetX: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding GlobalOffsetX, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding GlobalOffsetX, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="GlobalOffsetY: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding GlobalOffsetY, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding GlobalOffsetY, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="GlobalOffsetZ: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding GlobalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding GlobalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="LocalOffsetX: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding LocalOffsetX, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding LocalOffsetX, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="LocalOffsetY: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding LocalOffsetY, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding LocalOffsetY, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
<TextBlock Text="LocalOffsetZ: -500" Width="200" HorizontalAlignment="Right"/>
<Slider Minimum="-500" Width="380" Maximum="500" Value="{Binding LocalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}"
ToolTipService.ToolTip="{Binding LocalOffsetZ, Mode=TwoWay, ElementName=ImageProjection}" />
<TextBlock Text="500" Width="50"/>
</StackPanel>
</StackPanel>
</Grid>
(题外话,新增的Element-To-Element Binding功能很方便,以前使用Slider需要在ValueChanged事件中写代码实现,而且也不能这样个绑定ToolTip。)
稍微注释一下:
LocalOffsetX 沿旋转对象平面的 x 轴平移对象。
LocalOffsetY 沿旋转对象平面的 y 轴平移对象。
LocalOffsetZ 沿旋转对象平面的 z 轴平移对象。
GlobalOffsetX 沿屏幕对齐的 x 轴平移对象。
GlobalOffsetY 沿屏幕对齐的 y 轴平移对象。
GlobalOffsetZ 沿屏幕对齐的 z 轴平移对象。
CenterOfRotationX、CenterOfRotationY、CenterOfRotationZ则是旋转中心点
感觉上三维效果可以实现过去大部分的2D效果。其他的也不需要多说了吧,A silverlight is worth a thousand words.
作者:dino.c
出处:http://www.cnblogs.com/dino623/
说明:欢迎转载并请标明来源和作者。如有错漏请指出,谢谢。