This example shows how to apply transformation effect to UI element using ContentTransformer.

Example

Description

ContentTransfomer is a lightweight content control that apply transform effects to its content without affecting the dimension and boundary of the main container.

The following code shows the transformation of ContentTransformer is configured with set Rotation in CompositeTransform to Grid element.

Code

XAML	Copy Code
<Grid x:Name="LayoutRoot" Width="300" Height="300"> <Image Source="/ClientUIApplication1;component/Images/Application_and_Software_1.jpg" Margin="5"></Image> <Intersoft:ContentTransformer HorizontalAlignment="Left" Name="contentTransformer1" VerticalAlignment="Top"> <Intersoft:ContentTransformer.Transform> <CompositeTransform Rotation="-40"/> </Intersoft:ContentTransformer.Transform> <Grid Background="White" Width="120" Height="20" Margin="15,-10,-5,0"> <TextBlock TextWrapping="Wrap" Text="New" Foreground="Red" HorizontalAlignment="Center" FontSize="15"/> </Grid> </Intersoft:ContentTransformer> </Grid>

XAML

Copy Code

<Grid x:Name="LayoutRoot"  Width="300" Height="300">
    <Image Source="/ClientUIApplication1;component/Images/Application_and_Software_1.jpg" Margin="5"></Image>
    <Intersoft:ContentTransformer HorizontalAlignment="Left" Name="contentTransformer1" VerticalAlignment="Top">
        <Intersoft:ContentTransformer.Transform>
            <CompositeTransform Rotation="-40"/>
        </Intersoft:ContentTransformer.Transform>
        <Grid Background="White" Width="120" Height="20" Margin="15,-10,-5,0">
            <TextBlock TextWrapping="Wrap" Text="New" Foreground="Red" HorizontalAlignment="Center" FontSize="15"/>
        </Grid>
    </Intersoft:ContentTransformer>
</Grid>

Concepts

Content Model Overview

Other Resources

Locating the Samples in Local Installation

Walkthroughs and How-to Topics