WPF RenderTransform and LayoutTransform in VB.NET

RenderTransform does not push out neighboring elements and LayoutTransform push out neighboring elements. RenderTransform and LayoutTransform both the property of Framework Element.
  • 5666
 

Framework element in WPF has two properties to support display transformations Layout Transform and RenderTransform. Transform defines how to manage the appearance of element. It affects the rendering position of element.

Windows Presentation Foundation (WPF) provides several transform classes that enable you to transform an object without knowing how the underlying structure of element configured. WPF provide transformation classes are   RotateTransform, ScaleTransform, SkewTransform, TranslateTransform, TransformGroup and MatrixTransform.

Namespace and Assembly for LayoutTransform and Render Transform

Namespace - System.Windows.Control
Assembly - System.Windows.Controls.Layout.Toolkit.dll

RenderTransform: RenderTransform does not push out neighboring elements and it is applied after the layout pass is complete. It does not change the appearance of consecutive control. In RenderTransform process the result user interface is rendered to the screen. RenderTransform is inhertied from UI Element.It does not affect other control.

LayoutTransform: LayoutTransform push out neighboring elements and it is applied after the before the layout pass. It changes the appearance of consecutive control. It is computed at different stage of layout process:

  1. Measure - compute the DesiredSize of each element.
  2. Arrange - determined the position of child elements within their parent element.

It affects the position or size of other control.
 

Step 1: Open MainWindow.xaml file

Step 2:  Edit all button properties remove content property from all buttons than add background image on all button.
You have use two ways to add background image on button.In first button i have used image control into button control and reset of the button i have used ImageBrush property. Both look like similar but there is a difference. Image control use it own size to represent image but on the other hand ImageBrush property of Button control use button to fit.

RenderTransform

Code :

In this code i have used three buttons.

<
Window
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation          xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
xmlns:d=http://schemas.microsoft.com/expression/blend/2008xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc
:Ignorable="d"
x:Class="Transformation.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<
StackPanel>
        <Button Height="104" HorizontalAlignment="Center" x:Name="button1"VerticalAlignment="Top" Width="76">
            <Image Source="blue.jpg"/>
        </Button>
        <Button Height="104" HorizontalAlignment="Center" x:Name="button2"VerticalAlignment="Top" Width="76" >
            <Button.RenderTransform>
                <RotateTransform Angle="45"/>
            </Button.RenderTransform>
            <Button.Background>
                <ImageBrush ImageSource="red.jpg"/>
            </Button.Background>
        </Button>
        <Button Height="104" HorizontalAlignment="Center" x:Name="button3"VerticalAlignment="Top" Width="76" >
            <Button.Background>
                <ImageBrush ImageSource="green1.jpg"/>
            </Button.Background>
        </Button>
    </StackPanel>
</
Window>

Output: Figure 1

Render45.gif
 

Step 4: Add RotateTransform class is used to rotate a button. RotateTransform rotate the WPF object in clock wise. Namespace for RotateTranform class isSystem.Windows.Media.RotateTransform. In this code, I have used <RotateTransformAngle="45"/> on second button with RenderTransformRotateTransform class rotates the button up to 45 degree. Two buttons do not push out other button to get its place to fit. It one edge set over the first button and some part of button hide below third button. But if you use LayoutTransform in place of ReanderTransform you will see the different output. See figure 3.

Code:  Change only in second button

Step 5: Now change the set Angle value 90 of RotateTransform in second button. See the output in figure 2.

          
<RotateTransform Angle="90"/>

You will see that it is fixed in its place other consecutive button same as usual at their position there is no change in position of three buttons but if you use RotateTransform class in LayoutTransform you will see the different output. To get the difference see figure 4.

<Button Height="104" HorizontalAlignment="Center" x:Name="button2"VerticalAlignment="Top" Width="76" >
            <Button.RenderTransform>
                <RotateTransform Angle="90"/>
            </Button.RenderTransform>
            <Button.Background>
                <ImageBrush ImageSource="red.jpg"/>
            </Button.Background>
</
Button>

Output: Figure 2

Render90.gif
 

LayoutTransform

Code:  Change only in second button.
<Button Height="104" HorizontalAlignment="Center" x:Name="button2"VerticalAlignment="Top" Width="76" >
            <Button.LayoutTransform>
                <RotateTransform Angle="45"/>
            </Button.LayoutTransform>
            <Button.Background>
                <ImageBrush ImageSource="red.jpg"/>
            </Button.Background>
        </Button>

Output: Figure 3

Layout45.gif

Code:  Change only in second button

        <Button Height="104" HorizontalAlignment="Center" x:Name="button2"VerticalAlignment="Top" Width="76" >
            <Button.LayoutTransform>
                <RotateTransform Angle="90"/>
            </Button.LayoutTransform>
            <Button.Background>
                <ImageBrush ImageSource="red.jpg"/>
            </Button.Background>
        </Button>

Output: Figure 4
 

Layout90.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.