Telerik UI for Windows Phone by Progress

RadLayoutTransformControl allows the applying of layout transformations on its content, while also affecting the outer elements that get affected by it.

This topic will explain you the following:

Creating a RadLayoutTransformControl instance

In order to use RadLayoutTransformControl in your Windows Phone applications, you have to add a reference to the following assembly:

  • Telerik.Windows.Controls.Primitives.dll

After adding reference to the aforementioned dll, you can declare a new RadLayoutTransformControl instance as any normal Silverlight control.

Note

To use RadLayoutTransformControl in the XAML you have to add the following namespace declaration:

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
CopyXAML
<telerikPrimitives:RadLayoutTransformControl/>

Adding Content

RadLayoutTransformControl derives from the ContentControl and the way to set its content is the same as by its parent. To set the content of RadLayoutTransformControl you have to use its Content property. It is of type object, so you can assign everything to it - simple strings, UIElements, UserControls etc.

Note
Note that if you want to set multiple UIElements as content of RadLayoutTransformControl you have to wrap them in a layout control such as Grid, StackPanel, Canvas etc.
CopyXAML
<telerikPrimitives:RadLayoutTransformControl>
    <Button Content="Button 1" HorizontalAlignment="Center"></Button>
</telerikPrimitives:RadLayoutTransformControl>

You can also bind the Content of RadLayoutTransformControl to a data object and use the ContentTemplate property to define a DataTemplate to visualize the object.

Applying a Transform

In order to apply a transform to the content of RadLayoutTransformControl you have to use the LayoutTransform property. It is of type Transform, the same type as the RenderTransform property of the UIElement, so it can be used with the Transforms provided by the Silverlight framework. Here is an example of a Button rotated to 45 degrees.

CopyXAML
<telerikPrimitives:RadLayoutTransformControl>
    <telerikPrimitives:RadLayoutTransformControl.LayoutTransform>
        <RotateTransform Angle="45" />
    </telerikPrimitives:RadLayoutTransformControl.LayoutTransform>
    <Button Content="Button 1" HorizontalAlignment="Center"></Button>
</telerikPrimitives:RadLayoutTransformControl>

Here is a snapshot of the result.

Layout Transform-Getting Started-01