Transform은 컨트롤의 실제 속성은 그대로 둔채 모양만 변형해주는 기능이다.

 

RenderTransform과 LayoutTransform의 차이는 Transform 되는 시점이다. 아래의 표는 어느 시점에 Transform되는지 나타내고 있다.

 

 LayoutTransform

  • Measure
  • Arrange
  •  

     RenderTransform

  • Render
  •  

     

     

    Button의 위치를 이동, 크기, 회전 등등의 일을 굉장히 쉽게 할 수 있다. Transform을 이용해 크기를 변경하여도 실제 버튼의 크기는 변경되지 않는다.

     

     

     TranslateTransform 

     2차원 x-y 좌표계에서 개체를 변환(이동)합니다.

     RotateTransform

     2차원 x-y 좌표계에서 지정한 점을 기준으로 개체를 시계 방향으로 회전합니다.

     ScaleTransform

     개체의 크기를 조정에서 2차원 x-y 좌표계입니다.

     SkewTransform 

     개체에 적용되는 2차원 기울이기를 나타냅니다.

     MatrixTransform

     2-D 평면에서 개체 또는 좌표계를 조작하는 데 사용되는 임의의 행렬 유사 변환을 만듭니다. 
             

     

     

     

    4가지 Transform이 어떤 기능을 하는지 체험하기 위해 테스트 프로그램을 작성하였다.

    전체소스와 프로젝트 압축파일을 함께 올린다.

     

     

    [간단한 Transform 예제]

     

     

     

     

    <Window x:Class="AboutRenderTransform.MainWindow"

            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

            Title="MainWindow" Height="350" Width="673">

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="254*" />

                <ColumnDefinition Width="400" />

            </Grid.ColumnDefinitions>

            <Canvas>

                <Button FontSize="20" Content="버튼" x:Name="btnTest" Canvas.Left="103" Canvas.Top="134">

                <Button.RenderTransform>

                    <TransformGroup>

                        <TranslateTransform x:Name="translateBtn"/>

                        <RotateTransform x:Name="rotateBtn"/>

                        <ScaleTransform x:Name="scaleBtn"/>

                        <SkewTransform x:Name="skewBtn"/>

                    </TransformGroup>

                </Button.RenderTransform>

            </Button>

            </Canvas>

            <Grid Grid.Column="1" Margin="2,0,0,0" ShowGridLines="True" >

                <Grid.RowDefinitions>

                    <RowDefinition Height="61*" />

                    <RowDefinition Height="61*" />

                    <RowDefinition Height="60*" />

                    <RowDefinition Height="129*" />

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="141" />

                    <ColumnDefinition Width="165*" />

                </Grid.ColumnDefinitions>

                <Label Content="TranslateTransform" HorizontalAlignment="Center"  VerticalAlignment="Center" HorizontalContentAlignment="Center" Height="59" Width="141" VerticalContentAlignment="Center" />

                <Label Content="X : " Grid.Column="1" Height="28" HorizontalAlignment="Left" Margin="19,17,0,0" VerticalAlignment="Top" />

                <Label Content="Y : " Grid.Column="1" Height="28" HorizontalAlignment="Left" Margin="79,17,0,0" VerticalAlignment="Top" />

                <TextBox Text="{Binding ElementName=translateBtn, Path=X}" Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="46,19,0,0" Name="textBox1" VerticalAlignment="Top" Width="28" AcceptsTab="False" AcceptsReturn="False" VerticalScrollBarVisibility="Disabled" />

                <TextBox Text="{Binding ElementName=translateBtn, Path=Y}" Height="23" HorizontalAlignment="Left" Margin="105,19,0,0" VerticalAlignment="Top" Width="28" Grid.Column="1" />

                <Label Content="RotateTransform" Height="59" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Width="141" Grid.Row="1" />

                <Label Content="RenderTransformOrigin" Grid.Row="1" Height="27" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="1" Width="145" Margin="0,1,0,0" />

                <Label Content="X : " Height="28" HorizontalAlignment="Left" Margin="133,1,0,0" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" />

                <Label Content="Y : " Height="28" HorizontalAlignment="Left" Margin="188,1,0,0" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" />

                <TextBox Text="{Binding ElementName=rotateBtn, Path=CenterX}" Height="23" HorizontalAlignment="Left" Margin="156,3,0,0" VerticalAlignment="Top" Width="28" Grid.Column="1" Grid.Row="1" />

                <TextBox Text="{Binding ElementName=rotateBtn, Path=CenterY}" Height="23" HorizontalAlignment="Left" Margin="212,3,0,0" VerticalAlignment="Top" Width="28" Grid.Column="1" Grid.Row="1" />

                <Label Content="Angle :" Height="27" HorizontalAlignment="Left" Margin="1,31,0,0" VerticalAlignment="Top" Width="48" Grid.Column="1" Grid.Row="1" />

                <TextBox Text="{Binding ElementName=rotateBtn, Path=Angle}" Height="23" HorizontalAlignment="Right" Margin="0,34,174,0" VerticalAlignment="Top" Width="28" Grid.Column="1" Grid.Row="1" />

                <Label Content="ScaleTransform" Height="59" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Margin="0,60,0,1" VerticalAlignment="Center" VerticalContentAlignment="Center" Width="141" Grid.Row="1" Grid.RowSpan="2" />

                <Label Content="ScaleX : " Height="28" HorizontalAlignment="Left" Margin="1,1,0,0" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" />

                <Label Content="ScaleY : " Height="28" HorizontalAlignment="Left" Margin="1,32,0,0" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" />

                <TextBox Text="{Binding ElementName=scaleBtn, Path=ScaleX}" Height="23" HorizontalAlignment="Left" Margin="52,2,0,0" Name="textBox6" VerticalAlignment="Top" Width="28" Grid.Column="1" Grid.Row="2" />

                <TextBox Text="{Binding ElementName=scaleBtn, Path=ScaleY}" Height="23" HorizontalAlignment="Left" Margin="52,33,0,0" Name="textBox7" VerticalAlignment="Top" Width="28" Grid.Column="1" Grid.Row="2" />

                <Label Content="SkewTransform" Height="59" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Margin="0,0,0,70" VerticalAlignment="Center" VerticalContentAlignment="Center" Width="141" Grid.Row="3" />

                <Label Content="RenderTransformOrigin" Height="27" HorizontalAlignment="Left" Margin="1,0,0,0" VerticalAlignment="Top" Width="145" Grid.Column="1" Grid.Row="3" />

                <Label Content="X : " Grid.Column="1" Height="28" HorizontalAlignment="Left" Margin="134,0,0,0" VerticalAlignment="Top" Grid.Row="3" />

                <Label Content="Y : " Grid.Column="1" Height="28" HorizontalAlignment="Left" Margin="189,0,0,0" VerticalAlignment="Top" Grid.Row="3" />

                <TextBox Text="{Binding ElementName=skewBtn, Path=CenterX}" Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="157,2,0,0" Name="textBox8" VerticalAlignment="Top" Width="28" Grid.Row="3" />

                <TextBox Text="{Binding ElementName=skewBtn, Path=CenterY}" Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="213,2,0,0" Name="textBox9" VerticalAlignment="Top" Width="28" Grid.Row="3" />

                <Label Content="AngleX : " Height="28" HorizontalAlignment="Left" Margin="1,29,0,0" VerticalAlignment="Top" Grid.Column="1" Grid.Row="3" />

                <Label Content="AngleY : " Height="28" HorizontalAlignment="Left" Margin="1,60,0,0" VerticalAlignment="Top" Grid.Column="1" Grid.Row="3" />

                <TextBox Text="{Binding ElementName=skewBtn, Path=AngleX}" Height="23" HorizontalAlignment="Left" Margin="52,30,0,0" Name="textBox10" VerticalAlignment="Top" Width="28" Grid.Column="1" Grid.Row="3" />

                <TextBox Text="{Binding ElementName=skewBtn, Path=AngleY}" Height="23" HorizontalAlignment="Left" Margin="52,61,0,0" Name="textBox11" VerticalAlignment="Top" Width="28" Grid.Column="1" Grid.Row="3" />

            </Grid>

        </Grid>

    </Window>

     

     

     

    [MainWindow.xaml 소스]

     

     

     

     

    AboutRenderTransform.zip

     

    + Recent posts