Transform은 컨트롤의 실제 속성은 그대로 둔채 모양만 변형해주는 기능이다.
RenderTransform과 LayoutTransform의 차이는 Transform 되는 시점이다. 아래의 표는 어느 시점에 Transform되는지 나타내고 있다.
LayoutTransform
RenderTransform |
Button의 위치를 이동, 크기, 회전 등등의 일을 굉장히 쉽게 할 수 있다. Transform을 이용해 크기를 변경하여도 실제 버튼의 크기는 변경되지 않는다.
TranslateTransform |
2차원 x-y 좌표계에서 개체를 변환(이동)합니다. |
RotateTransform |
2차원 x-y 좌표계에서 지정한 점을 기준으로 개체를 시계 방향으로 회전합니다. |
ScaleTransform |
개체의 크기를 조정에서 2차원 x-y 좌표계입니다. |
SkewTransform |
개체에 적용되는 2차원 기울이기를 나타냅니다. |
MatrixTransform |
|
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 소스]
'.Net > WPF' 카테고리의 다른 글
Binding.UpdateSourceTrigger (0) | 2013.07.09 |
---|---|
[MVVM Galasoft.MvvmLight.WPF4] EventToCommand, 이벤트 정보를 넘기자! (0) | 2013.07.05 |
WPF abstract class 상속시 "인스턴스를 만들 수 없습니다." 에러 해결 (0) | 2013.06.17 |
WebBrowser Script 에러 메세지 띄우지 않기 (0) | 2013.06.14 |
[Surface sdk 2.0] SurfaceListBoxItem 배경 투명하게 만들기 (0) | 2013.06.04 |