[silverlight] silverlight3新增功能1：三维效果（透视转换）

      既然已经开始做SL3项目，而且document也已经入手了，那就开始学习吧。虽然直接读document比较方便，但谢谢学习心得总是好事。
      首先应该看看Silverlight 3 中的新增功能，Silverlight中重大的改进之一就是3D效果了，以前宣称"FLASH杀手"却连3D都没有真是难以置信的厚脸皮（还是说其实FLASH的3D也是模拟出来的？）。先来看看效果吧，是参考Silverlight 3 Beta 新特性解析（2）-Graphics篇 - 笑看风云淡 后做出来的：

  <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.