Silverlight开发历程—3DEffects实现3D特效

 3DEffects也称Perspective Transforms(透明变形)，实现UIElement 的三维效果主要对象是Projection 类，位于System.Window.Media.Projection命名空间下。

下面是一个利用3D特效制作一个三维效果的用户登录界面：

XAML：

 <Grid x:Name="LayoutRoot" Background="White" >
        <StackPanel Width="400"  Height="280" Margin="150,50,150,116">
            <!--投影特效-->
            <StackPanel.Effect>
                <DropShadowEffect BlurRadius="10" Direction="220" Color="Black" Opacity="0.5" ShadowDepth="25">
                </DropShadowEffect>
            </StackPanel.Effect>
            <!--3D 特效-->
            <StackPanel.Projection>
                <PlaneProjection  RotationZ="-10"  RotationX="-30" RotationY="-40" />
            </StackPanel.Projection>
            <!--渐变-->
            <StackPanel.Background>
                <LinearGradientBrush>
                    <GradientStop Offset="0" Color="White" />
                    <GradientStop Offset="1" Color="Black" />
                </LinearGradientBrush>
            </StackPanel.Background>
            <!--内容-->
            <TextBlock Text="Silverlight 3D Effects" FontSize="20" />
            <TextBlock Text="UserName:"  Margin="10" />
            <TextBox Margin="10" Width="200" />
            <TextBlock Text="PassWord:"  Margin="10" />
            <TextBox Margin="10" Width="200" />
            <Button Width="100" Height="30" Content="Login"/>
        </StackPanel>
    </Grid>

运行结果：

 

Projectino 包括三个重要的属性，分别是 RotationX、RotationY、TotationZ，分别代表三维空间的X轴、Y轴、Z轴.

RotationX 属性指定围绕对象的水平轴旋转
RotationY 属性围绕旋转中心的 y 轴旋转。
RotationZ 属性围绕旋转中心的 z 轴（直接穿过对象平面的直线）旋转

下面分别从Projection的X轴、Y轴、Z轴不同视角来查看旋转视角的效果:

X 轴旋转：

Grid x:Name="LayoutRoot" Background="White">
        <Image Stretch="None"  Source="../images/jiqiren2.jpg">
            <!--添加模糊效果-->
            <Image.Effect>
                <DropShadowEffect BlurRadius="20" Direction="250" Opacity="0.5" Color="Black" />
            </Image.Effect>
            <Image.Projection>
                <PlaneProjection RotationX="-60"  />
            </Image.Projection>
        </Image>
    </Grid>

效果：

Y轴视角：

<Grid x:Name="LayoutRoot" Background="White">
        <Image Stretch="None"  Source="../images/jiqiren2.jpg">
            <!--添加模糊效果-->
            <Image.Effect>
                <DropShadowEffect BlurRadius="20" Direction="250" Opacity="0.5" Color="Black" />
            </Image.Effect>
            <Image.Projection>
                <PlaneProjection RotationY="-60"  />
            </Image.Projection>
        </Image>
    </Grid>

效果：

 

Z轴视角：

<Grid x:Name="LayoutRoot" Background="White">
        <Image Stretch="None"  Source="../images/jiqiren2.jpg">
            <!--添加模糊效果-->
            <Image.Effect>
                <DropShadowEffect BlurRadius="20" Direction="250" Opacity="0.5" Color="Black" />
            </Image.Effect>
            <Image.Projection>
                <PlaneProjection RotationZ="45"  />
            </Image.Projection>
        </Image>
    </Grid>

效果：

下面我们看一下 X轴、Y轴、Z轴的旋转轨迹：

Projection除了对X、Y、Z轴的值旋转之外，还允许调整Projection对Silverlight目标对象进行基于三维空间的定位。

LocalOffsetX 沿旋转对象X轴平定位一个对象。
LocalOffsetY 沿旋转对象 Y 轴平定位一个对象。
LocalOffsetZ 沿旋转对象Z 轴平定位一个对象。

GlobalOffsetX 沿屏幕对齐的 x 轴定位一个对象。
GlobalOffsetY 沿屏幕对齐的 y 轴定位一个对象。
GlobalOffsetZ 沿屏幕对齐的 z 轴定位一个对象。

下面为了更好的体会对象的X轴，Y轴，Z轴的旋转效果，我们做一个例子可以通过拖动进度条来更改X轴，Y轴，Z轴的值：

XAML:

 
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <ImageBrush ImageSource="../images/widows7.jpg" />
        </Grid.Background>
        <!--3D 元素-->
        <Grid Width="200" Height="160" Background="Green" >
            <TextBlock Foreground="White" Text="Windows Phone 7" Grid.Column="0" FontFamily="Arial" FontSize="22" Margin="6,58,6,20">
            </TextBlock>
            <Grid.Effect>
                <DropShadowEffect Direction="50" BlurRadius="60" Color="Green" Opacity="0.8" />
            </Grid.Effect>
            <Grid.Projection>
                <PlaneProjection  x:Name="prots" />
            </Grid.Projection>
        </Grid>
        <!--Silder 控件和元素之间的TwoWay 数据绑定用来设置Projection属性-->
        <Slider Height="23" Grid.Column="0" Grid.Row="1" Maximum="180" Minimum="-180" Value="{Binding RotationX,Mode=TwoWay,ElementName=prots}" />
        <Slider Height="23" Grid.Column="0" Grid.Row="2" Maximum="180" Minimum="-180" Value="{Binding RotationY,Mode=TwoWay,ElementName=prots}"/>
        <Slider Height="23" Grid.Column="0" Grid.Row="3" Maximum="180" Minimum="-180" Value="{Binding RotationZ,Mode=TwoWay,ElementName=prots}"/>
        <!--用TextBox显示 坐标-->
        <TextBox  Height="23" Width="150" Grid.Column="1"  Grid.Row="1" Margin="10" IsReadOnly="True" Text="{Binding RotationX,Mode=TwoWay,ElementName=prots}"/>
        <TextBox  Height="23" Width="150" Grid.Column="1"  Grid.Row="2" Margin="10" IsReadOnly="True" Text="{Binding RotationY,Mode=TwoWay,ElementName=prots}"/>
        <TextBox  Height="23" Width="150" Grid.Column="1"  Grid.Row="3" Margin="10" IsReadOnly="True" Text="{Binding RotationZ,Mode=TwoWay,ElementName=prots}"/>
    </Grid>

效果：