.NET 4.0+

WPF Transforms - Scaling

by Richard Carr, published at http://www.blackwasp.co.uk/ScaleTransform.aspx

The one hundred and forty-first part of the Windows Presentation Foundation Fundamentals tutorial begins to look at the two-dimensional transformations that can be applied to controls. This article examines the ability to scale items horizontally and vertically and explains the difference between render and layout transforms.

Transforms

WPF includes some very powerful features to enable you to create rich and beautiful user interfaces. Amongst the available effects are the transforms, each derived from the Transform class. These can be added to controls, shapes and other user interface elements to apply standard transformations. For example, you can scale, rotate, translate and skew elements in two-dimensional space.

Transforms change the view of a control but not its functionality. They are particularly useful for creating complex interfaces that would not be possible using technologies such as Windows Forms. They can be applied to a control permanently or used within animations or in response to events. For example, you might decide to increase the size of a button with a scale transform or slide it with a translation when the mouse pointer enters its bounding box.

The time at which a transform is applied is important. WPF provides two options. You can add a transform before the layout system determines the size and position of all of the controls or afterwards. This affects the layout of the control being transformed and, potentially, other controls around it.

In this article we will look at the basics of applying a transform using the ScaleTransform class. This allows you to scale the control in the horizontal and vertical directions independently. It is a simple but useful effect, and one that will easily demonstrate the differences of applying transforms before or after the layout is determined.

To begin, let's start a new demo solution. Create a new WPF application in Visual Studio named, "ScaleTransformDemo". Once prepared, replace the XAML of the main window with the following code:

<Window x:Class="ScaleTransformDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Transform Demo" Height="200" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBox Grid.ColumnSpan="2" Margin="20"
                 Width="100" Height="22"
                 HorizontalAlignment="Left" VerticalAlignment="Top"/>

        <Label Grid.Row="1">ScaleX</Label>
        <Slider Name="XSlider" Grid.Column="1" Grid.Row="1"
                Minimum="0.5" Maximum="2" Value="1"/>

        <Label Grid.Row="2">ScaleY</Label>
        <Slider Name="YSlider" Grid.Column="1" Grid.Row="2"
                Minimum="0.5" Maximum="2" Value="1"/>
    </Grid>
</Window>

The window includes a TextBox and two Sliders. We'll link the sliders to a ScaleTransform for the text box shortly, allowing the horizontal and vertical size of the control to be adjusted. Both sliders have a range from 0.5 to 2. The values applied to a scale transform are multipliers, so it will be possible to reduce the text box to half its standard size or to double its width or height.

Adding a Render Transform

The first way in which we will apply scaling to the text box is using a render transform. This applies the effect after the layout system has finished processing. The control is first positioned and sized without the transform applied. Next, the transform changes the shape of the control without affecting any neighbouring user interface elements.

To apply this type of transform you use the element's RenderTransform property. We'll set this to an instance of ScaleTransform, using the ScaleX and ScaleY properties to increase or decrease the sizes. For the demo, rather than setting these to discrete values, we'll use data binding to link them to the slider values.

Update the TextBox's XAML, as follows:

<TextBox Grid.ColumnSpan="2" Margin="20"
            Width="100" Height="22"
            HorizontalAlignment="Left" VerticalAlignment="Top">
    <TextBox.RenderTransform>
        <ScaleTransform ScaleX="{Binding ElementName=XSlider,Path=Value}"
                        ScaleY="{Binding ElementName=YSlider,Path=Value}"/>
    </TextBox.RenderTransform>
</TextBox>

Run the program and try adjusting the sliders to see the control shrink and grow. Click the text box and enter text to see that this is scaled in the same manner.

The scaling properties are not limited to positive values. If you scale using a negative multiplier, the control will be resized and flipped horizontally or vertically. To demonstrate, update the XAML for the sliders so that the minimum value is -1.

<Label Grid.Row="1">ScaleX</Label>
<Slider Name="XSlider" Grid.Column="1" Grid.Row="1" Minimum="-1" Maximum="2" Value="1"/>
        
<Label Grid.Row="2">ScaleY</Label>
<Slider Name="YSlider" Grid.Column="1" Grid.Row="2" Minimum="-1" Maximum="2" Value="1"/>

Run the program and drag the slider thumbs to the left to scale by a negative value.