[Win8]Windows8开发札记（五）：变换与投射以及制作旋转的头像

[Win8]Windows8开发笔记（五）：变换与投射以及制作旋转的头像

变换可以让UI元素扭曲旋转等，不用改变逻辑的几何形状和位置，就像是用放大镜看物体一样。

Transform类型的属性都可以应用变换。

主要分以下三种：RotateTransform、ScaleTransform、TranslateTransform，都继承自Transform类。

下面新建一个项目TransformTest来实战一下。

先在屏幕上放一个按钮：

接下来是给这个按钮加上旋转变化。

 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" 
                Height="200" Width="400">
            <Button.RenderTransform>
                <RotateTransform Angle="45"></RotateTransform>
            </Button.RenderTransform>
        </Button>
    </Grid>

Angle便是指定旋转角度，默认的旋转点是左上角，可以用centerX和centerY来实现。

下面来看看ScaleTransform缩放变换。

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" 
                Height="200" Width="400">
            <Button.RenderTransform>
                <ScaleTransform ScaleX="2" ScaleY="1.5"></ScaleTransform>
            </Button.RenderTransform>
        </Button>
    </Grid>

可以看见这样就会出现了button的缩放：

同理，可以使用一下代码实现平移变换。

 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" 
                Height="200" Width="400">
            <Button.RenderTransform>
                <TranslateTransform X="100" Y="-200"></TranslateTransform>
            </Button.RenderTransform>
        </Button>
    </Grid>

当然这样的效果就是：

可以看见button的位置没有变化，变的是RenderTransform。这一点非常重要。

接下来看一下投射的概念，我们新建一张图片来做演示。

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Image HorizontalAlignment="Center" VerticalAlignment="Center"  
               Height="400" Width="400" Source="头像.jpg"/>
    </Grid>

改变其中的Projection属性：

 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Image HorizontalAlignment="Center" VerticalAlignment="Center"  
               Height="400" Width="400" Source="头像.jpg">
            <Image.Projection>
                <PlaneProjection RotationY="45">
                </PlaneProjection>
            </Image.Projection>
        </Image>
    </Grid>

这样我们添加一个定时器就可以实现头像的3D旋转展示了。

先用x:name给控件属性添加名字：

 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Image HorizontalAlignment="Center" VerticalAlignment="Center"  
               Height="400" Width="400" Source="头像.jpg">
            <Image.Projection>
                <PlaneProjection x:Name="pro" RotationY="45"/>
            </Image.Projection>
        </Image>
    </Grid>

然后跳转到MainPage.xaml.cs后台代码区域，在下面的OnNavigatedTo方法下添加如下代码：

 protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            DispatcherTimer timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromMilliseconds(10);
            timer.Tick += timer_Tick;
            timer.Start();
        }

        void timer_Tick(object sender, object e)
        {
            pro.RotationY += 1;
        }

运行项目就可以看见旋转的头像了。