Getting Started with WinUI LayoutTransformControl
This topic demonstrates how to use the RadLayoutTransformControl for WinUI.
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
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
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
