BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Transforms - Scaling

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.

Scale Transform Centre

In the examples so far, you can see that the scaling is performed from the top-left of the control. This point of the control does not move, whilst the rest of the element is scaled directly towards or away from the location. This is because, by default, the centre point for the transform is at the co-ordinates (0,0), which is the top-left corner of the control's bounding box.

You can move the centre point using the CenterX and CenterY properties. You set these using the standard co-ordinate system, relative to the bounding box of the control. For example, change the XAML for the transform as shown below to set the centre point to (40,11). This is roughly central to the control vertically and left of centre horizontally.

<ScaleTransform ScaleX="{Binding ElementName=XSlider,Path=Value}"
                ScaleY="{Binding ElementName=YSlider,Path=Value}"
                CenterX="40" CenterY="11"/>

Run the program again and scale the text box using the sliders. You should see that the transform is centred around the new position.

RenderTransform vs LayoutTransform

As mentioned earlier, there are two ways in which you can apply a transform. The first is the render transform, which is applied after the layout system has finished positioning and sizing controls. This is the transformation type that we have used so far. It is commonly used for special effects and animation because it does not affect the layout of the controls around it.

To better see the effect of a render transform, let's wrap the textbox in a StackPanel and add a Button alongside it. Replace the XAML for the TextBox with the following code:

<StackPanel Grid.ColumnSpan="2" Orientation="Horizontal">
    <TextBox 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}"
            CenterX="40" CenterY="11"/>
        </TextBox.RenderTransform>
    </TextBox>
    <Button Height="22" VerticalAlignment="Top" Margin="0 20">OK</Button>
</StackPanel>

Run the program and resize the text box using the sliders. You will see that the button is unaffected, even when it and the text box overlap, as shown below.

WPF ScaleTransform using RenderTransform

To apply the transform before the layout system starts, you can use the LayoutTransform property instead of RenderTransform. When applied in this way, the transform adjusts the control first, then the layout system positions and resizes the control using the normal rules. This can make quite a difference to the item being transformed and to neighbouring controls.

Let's update the text box to use a layout transform:

<TextBox Margin="20"
         Width="100" Height="22"
         HorizontalAlignment="Left" VerticalAlignment="Top">
    <TextBox.LayoutTransform>
        <ScaleTransform ScaleX="{Binding ElementName=XSlider,Path=Value}"
                        ScaleY="{Binding ElementName=YSlider,Path=Value}"
                        CenterX="40" CenterY="11"/>
    </TextBox.LayoutTransform>
</TextBox>

Run the program and change the scaling to see the results. There are two key changes. Firstly, resizing the text box now causes the button to move. This is because the scale changes the size of the control within the layout system and the button is positioned using StackPanel rules.

Secondly, the centre position for the scaling no longer has any effect. The scaling and centre positions are applied as before. However, the layout system then moves the control to the top left of the StackPanel, so the control always remains in the same place.

WPF ScaleTransform using LayoutTransform

5 March 2015