Transform allows UI elements to twist and rotate without changing the geometric shape and position of the logic, just like watching an object with a magnifier.
All attributes of the transform type can be changed.
Rotatetransform, scaletransform, and translatetransform are inherited from the transform class.
Next we will create a new project transformtest for practical use.
Put a button on the screen:
Next, add a rotation change to the button.
<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 specifies the rotation angle. The default rotation point is the upper left corner. You can use centerx and centery.
Next let's take a look at scaletransform scaling and transformation.
<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>
As you can see, the button scaling will appear:
Similarly, you can use the following code to implement translation transformation.
<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>
Of course, the effect is:
We can see that the position of the button has not changed, and the change is rendertransform. This is very important.
Next, let's take a look at the concept of projection. Let's create a new image for demonstration.
<Grid background = "{staticresource applicationpagebackgroundthemebrush}"> <image horizontalalignment = "center" verticalignment = "center" Height = "400" width = "400" Source = "header .jpg"/> </GRID>
Change the projection attribute:
<Grid background = "{staticresource applicationpagebackgroundthemebrush}"> <image horizontalalignment = "center" verticalignment = "center" Height = "400" width = "400" Source = "header .jpg"> <image. projection> <planeprojection rotationy = "45"> </planeprojection> </image. projection> </image> </GRID>
In this way, we can add a timer to display the 3D Rotation of the Avatar.
First, use X: Name to add a name to the control property:
<Grid background = "{staticresource applicationpagebackgroundthemebrush}"> <image horizontalalignment = "center" verticalignment = "center" Height = "400" width = "400" Source = "header .jpg"> <image. projection> <planeprojection X: Name = "pro" rotationy = "45"/> </image. projection> </image> </GRID>
Go to the mainpage. XAML. CS background code area and add the following code under the onnavigatedto method below:
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; }
Run the project to see the rotating avatar.