[Win8] Windows 8 Development notes (5): conversion and projection, and rotating Avatar Creation

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.