[C#/WPF] UIElement 클래스 : RenderTransform 속성을 사용해 좌표계 사용하기

■ UIElement 클래스의 RenderTransform 속성을 사용해 좌표계를 사용하는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="UIElement 클래스 : RenderTransform 속성을 사용해 좌표계 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.Resources>
            <Style TargetType="{x:Type Canvas}">
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="VerticalAlignment"   Value="Center" />
                <Setter Property="Width"               Value="100"    />
                <Setter Property="Height"              Value="100"    />
            </Style>
            <Style TargetType="{x:Type Path}">
                <Setter Property="Fill" Value="Red" />
                <Setter Property="Data">
                    <Setter.Value>
                        <EllipseGeometry
                            Center="0 0"
                            RadiusX="5"
                            RadiusY="5" />
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Label Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0 -200, 0, 0"
            Content="좌측 상단 기준" />
        <Label Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0 -150, 0, 0"
            Content="Y값 아래로 증가" />
        <Canvas Grid.Column="0">
            <Line
                X1="0"
                Y1="0"
                X2="100"
                Y2="100"
                Stroke="Black" />
            <Polyline
                Stroke="Blue"
                Points="0 0 0 100 100 100 100 0 0 0" />
            <Path />
        </Canvas>
        <Label Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0 -200, 0, 0"
            Content="좌측 하단 기준" />
        <Label Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0 -150, 0, 0"
            Content="Y값 위로 증가" />
        <Canvas Grid.Column="1">
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1" />
                    <TranslateTransform Y="100" />
                </TransformGroup>
            </Canvas.RenderTransform>
            <Line
                X1="0"
                Y1="0"
                X2="100"
                Y2="100"
                Stroke="Black" />
            <Polyline
                Stroke="Blue"
                Points="0 0 0 100 100 100 100 0 0 0" />
            <Path />
        </Canvas>
        <Label Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0 -200, 0, 0"
            Content="중앙 기준" />
        <Label Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0 -150, 0, 0"
            Content="Y값 아래로 증가" />
        <Canvas Grid.Column="2">
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="1" />
                    <TranslateTransform X="50" Y="50" />
                </TransformGroup>
            </Canvas.RenderTransform>
            <Line
                X1="0"
                Y1="0"
                X2="50"
                Y2="50"
                Stroke="Black" />
            <Polyline
                Stroke="Blue"
                Points="-50 -50 50 -50 50 50 -50 50 -50 -50" />
            <Path />
        </Canvas>
        <Label Grid.Column="3"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0 -200, 0, 0"
            Content="중앙 기준" />
        <Label Grid.Column="3"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="0 -150, 0, 0"
            Content="Y값 위로 증가" />
        <Canvas Grid.Column="3">
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1" />
                    <TranslateTransform X="50" Y="50" />
                </TransformGroup>
            </Canvas.RenderTransform>
            <Line
                X1="0"
                Y1="0"
                X2="50"
                Y2="50"
                Stroke="Black" />
            <Polyline
                Stroke="Blue"
                Points="-50 -50 50 -50 50 50 -50 50 -50 -50" />
            <Path />
        </Canvas>
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="UIElement 클래스 : RenderTransform 속성을 사용해 좌표계 사용하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.Resources>

</Style>

<Setter.Value>

<EllipseGeometry

Center="0 0"

RadiusX="5"

RadiusY="5" />

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<Label Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 -200, 0, 0"

Content="좌측 상단 기준" />

<Label Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 -150, 0, 0"

Content="Y값 아래로 증가" />

<Line

X1="0"

Y1="0"

X2="100"

Y2="100"

Stroke="Black" />

<Polyline

Stroke="Blue"

Points="0 0 0 100 100 100 100 0 0 0" />

</Canvas>

<Label Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 -200, 0, 0"

Content="좌측 하단 기준" />

<Label Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 -150, 0, 0"

Content="Y값 위로 증가" />

<Canvas.RenderTransform>

</TransformGroup>

</Canvas.RenderTransform>

<Line

X1="0"

Y1="0"

X2="100"

Y2="100"

Stroke="Black" />

<Polyline

Stroke="Blue"

Points="0 0 0 100 100 100 100 0 0 0" />

</Canvas>

<Label Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 -200, 0, 0"

Content="중앙 기준" />

<Label Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 -150, 0, 0"

Content="Y값 아래로 증가" />

<Canvas.RenderTransform>

</TransformGroup>

</Canvas.RenderTransform>

<Line

X1="0"

Y1="0"

X2="50"

Y2="50"

Stroke="Black" />

<Polyline

Stroke="Blue"

Points="-50 -50 50 -50 50 50 -50 50 -50 -50" />

</Canvas>

<Label Grid.Column="3"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 -200, 0, 0"

Content="중앙 기준" />

<Label Grid.Column="3"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 -150, 0, 0"

Content="Y값 위로 증가" />

<Canvas.RenderTransform>

</TransformGroup>

</Canvas.RenderTransform>

<Line

X1="0"

Y1="0"

X2="50"

Y2="50"

Stroke="Black" />

<Polyline

Stroke="Blue"

Points="-50 -50 50 -50 50 50 -50 50 -50 -50" />

</Canvas>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();
        }

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

}

TestProject.zip