变换可以让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;
}
运行项目就可以看见旋转的头像了。