UWP Development, Transformation

In this article, we will explain in detail about Transformation, one of the important elements of Windows Universal Platform (UWP) development. The Transformation feature is essential for visually representing various forms of data in UWP. Transformation contributes to enhancing application responsiveness and ultimately provides a richer user experience by allowing users to manipulate UI elements.

Basics of Transformation

Transformation generally includes two key components: Position and Scale. These transformations can include Rotation, Skewing, and Translation for UI elements. In UWP, these various transformations can be implemented through the CompositeTransform class.

CompositeTransform Class

The CompositeTransform class allows for the combination of multiple transformations to perform complex transformations. This class provides the following properties:

  • TranslateX: The distance to move in the horizontal direction
  • TranslateY: The distance to move in the vertical direction
  • ScaleX: The scaling factor in the horizontal direction
  • ScaleY: The scaling factor in the vertical direction
  • Rotate: The rotation angle
  • SkewX: The horizontal skew
  • SkewY: The vertical skew

Implementing Transformation

Now, let’s implement Transformation in a UWP application. The example code below shows how to rotate, move, and scale an image using basic XAML and C# code.

XAML Code

<Page
    x:Class="TransformationExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TransformationExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Image x:Name="MyImage" Source="Assets/sample-image.png" Width="200" Height="200">
            <Image.RenderTransform>
                <CompositeTransform x:Name="MyTransform"/>
            </Image.RenderTransform>
        </Image>

        <Button Content="Transform Image" Click="OnTransformImageClick" VerticalAlignment="Bottom" />
    </Grid>
</Page>

C# Code

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;

namespace TransformationExample
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void OnTransformImageClick(object sender, RoutedEventArgs e)
        {
            // Process the transformation of the image
            CompositeTransform transform = MyTransform;
            transform.TranslateX += 50;  // Move horizontally
            transform.TranslateY += 30;  // Move vertically
            transform.ScaleX *= 1.2;      // Scale horizontally
            transform.ScaleY *= 1.2;      // Scale vertically
            transform.Rotate += 45;        // Rotate
        }
    }
}

Application of Transformation

Transformation can be used in various situations. For instance, it is useful for implementing touch and gesture-based interactions in the application’s interface. Users can interact with the application by dragging, zooming, or rotating UI elements.

Transformation through Gestures

In UWP, gesture-based transformations can be easily implemented through the Manipulation event. The example below demonstrates how users can drag or zoom in on an image with their fingers.

XAML Code (Gestures)

<Image x:Name="MyImage" Source="Assets/sample-image.png" Width="200" Height="200" 
       ManipulationMode="All" 
       ManipulationDelta="OnImageManipulationDelta">
    <Image.RenderTransform>
        <CompositeTransform x:Name="MyTransform"/>
    </Image.RenderTransform>
</Image>

C# Code (Gestures)

private void OnImageManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    CompositeTransform transform = MyTransform;

    transform.TranslateX += e.Delta.Translation.X;
    transform.TranslateY += e.Delta.Translation.Y;
    transform.ScaleX *= e.Delta.Scale.X;
    transform.ScaleY *= e.Delta.Scale.Y;

    e.Handled = true;
}

Videos and Animations of Transformation

UWP provides the ability to combine Transformation with animations to create a more engaging user experience. Using UWP’s Storyboard class, UI element properties can be animated. The following example code shows how to apply a transformation with a fade-in animation to an image when a button is clicked.

XAML Code (Animation)

<Page.Resources>
    <Storyboard x:Name="ImageTransformStoryboard">
        <DoubleAnimation Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="TranslateX" From="0" To="150" Duration="0:0:1"/>
        <DoubleAnimation Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="Rotate" From="0" To="360" Duration="0:0:1"/>
    </Storyboard>
</Page.Resources>

<Button Content="Animate Image" Click="OnAnimateImageClick" VerticalAlignment="Bottom" />

C# Code (Animation)

private void OnAnimateImageClick(object sender, RoutedEventArgs e)
{
    ImageTransformStoryboard.Begin();
}

Advanced Features of Transformation

UWP allows for the combination of Transformation and interface design to create more intuitive and manageable UIs. For example, these features enable users to directly adjust the size and position of various UI elements, making the application more user-friendly.

Drag and Drop Feature

Drag and Drop is another useful feature for applying Transformation in UWP. This allows users to drag and move UI elements, improving application responsiveness and user experience.

XAML Code (Drag and Drop)

<Grid x:Name="MainGrid" AllowDrop="True" Drop="OnDrop" DragOver="OnDragOver">
    <Image x:Name="DraggableImage" Source="Assets/sample-image.png" Width="100" Height="100" 
           PointerPressed="OnPointerPressed" PointerMoved="OnPointerMoved" PointerReleased="OnPointerReleased"/>
</Grid>

C# Code (Drag and Drop)

private bool isDragging = false;
private Point initialPoint;

private void OnPointerPressed(object sender, PointerRoutedEventArgs e)
{
    isDragging = true;
    initialPoint = e.GetCurrentPoint(MainGrid).Position;
}

private void OnPointerMoved(object sender, PointerRoutedEventArgs e)
{
    if (isDragging)
    {
        var currentPoint = e.GetCurrentPoint(MainGrid).Position;
        var transform = MyTransform;

        transform.TranslateX += currentPoint.X - initialPoint.X;
        transform.TranslateY += currentPoint.Y - initialPoint.Y;

        initialPoint = currentPoint;
    }
}

private void OnPointerReleased(object sender, PointerRoutedEventArgs e)
{
    isDragging = false;
}

Conclusion

Transformation in UWP is a powerful feature that can greatly enhance the user experience. By integrating various visual effects, animations, and gesture-based interfaces, developers can create more attractive and interactive applications. Through the various Transformation techniques and example codes introduced in this article, we hope you can effectively utilize Transformation in UWP development.

References