New to Telerik UI for WinUI? Download free 30-day trial

Getting Started with WinUI LayoutTransformControl

This topic demonstrates how to use the RadLayoutTransformControl for .

Assembly References

In order to use the RadLayoutTransformControl suite in your projects, you have to add references to the following assembly:

  • Telerik.WinUI.Controls.dll
  • Telerik.Licensing.Runtime.dll

Defining a RadLayoutTransformControl

Here is how RadLayoutTransformControl is declared in XAML:

You can access the RadLayoutTransformControl control through an alias pointing to the Telerik.UI.Xaml.Controls.Input namespace: xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"

Example 1: Adding a RadLayoutTransformControl in XAML

<telerikPrimitives:RadLayoutTransformControl /> 

Applying Transformations

The RadLayoutTransformControl exposes a LayoutTransform which you can use to apply transformations to the content of the control. It is of type Microsoft.UI.Xaml.Media.Transform. Here's a list of possible transformations:

  • RotateTransform
  • ScaleTransform
  • SkewTransform
  • MatrixTransform
  • TransformGroup

Example 2: Applying a TransformGroup

<telerik:RadLayoutTransformControl x:Name="LayoutTransformControl"> 
    <telerik:RadLayoutTransformControl.LayoutTransform> 
        <TransformGroup> 
            <RotateTransform Angle="45" /> 
            <ScaleTransform ScaleX="2" ScaleY="2" /> 
            <SkewTransform AngleX="10" AngleY="10" /> 
        </TransformGroup> 
    </telerik:RadLayoutTransformControl.LayoutTransform> 
    <Border Background="LightBlue" Width="100" Height="100"> 
        <TextBlock Text="Content" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
    </Border> 
</telerik:RadLayoutTransformControl> 

Figure 1: Border and TextBlock with applied transformations

WinUI Border and TextBlock with applied transformations

You can also set the transformations in code, as shown in Example 3:

Example 3: Applying a MatrixTransform

this.LayoutTransformControl.LayoutTransform = new MatrixTransform()  
{  
    Matrix = new Matrix()  
    {  
        M11 = 0.3, 
        M12 = 1,  
        M21 = 2,  
        M22 = 0,  
        OffsetX = 10,  
        OffsetY = 50  
    }  
}; 

Figure 2: RadLayoutTransformControl with MatrixTransform

WinUI RadLayoutTransformControl with MatrixTransform

Telerik UI for WinUI Learning Resources

In this article
Not finding the help you need?