[WPF] WPF Canvas X축 Y축 반전시키는 방법

안녕하세요.

 

오늘은 WPF 에서 Canvas 컨트롤에 대해서 한번 다뤄 보려고 합니다.

 

먼저, Canvas 컨트롤의 시작 중점 즉 (0,0) 은 윈도우 기준 좌측 최 상단이 (0,0) 으로 x축은 오른쪽, Y축은 아래로 갈수록 + 가 됩니다.

 

그림으로 표현하면 다음과 같습니다.

 

 

위와 같이 (0,0) 의 좌표가 가운데 중점이 아니라 좌측 상단부터 시작으로 x축은 오른쪽으로 +, y축은 아래로 갈수록 +가 됩니다.

 

여기서 제가 오늘 알려드릴 내용은, Canvas의 x축, y축을 반전 시키는 방법에 대해서 Xaml에서 어떻게 반전을 시키는지 알려 드리려고 합니다.

 

방법은 매우 간단하기 때문에 소스코드를 통해서 바로 알려 드리도록 하겠습니다.

 

MainWindow.xaml

<Window x:Class="WpfApp7.MainWindow"
        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/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp7"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <Canvas>
            <Canvas.LayoutTransform>
                <ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5"/>
            </Canvas.LayoutTransform>
        </Canvas>
    </DockPanel>
</Window>
 

 

위와 같이 ScaleTransform 속성을 이용하여 x축 y축의 값은 -로 줘서 반전은 시킬 수 있습니다.

 

만약에 제가 x = 1, y = -1 이라고 주면 (0,0)의 위치는 다음과 같습니다.

 

 

위와 같이 Canvas의 x축,y축을 반전 시키시고 싶으신 분들은 ScaleTransform 속성을 이용하시면 됩니다.

 

감사합니다.^^