[WPF] WPF Canvas 가운데로 (0,0) 중심 좌표로 만들기

안녕하세요.

 

오늘은 WPF에서 Canvas 컨트롤 사용하는 방법에 대해서 알려 드리려고 합니다.

 

그 중에서도, Canvas에서 0,0의 좌표를 중심으로 옮기는 방법에 대해서 알려 드리려고 합니다.

 

Canvas에서 0,0의 시작은 좌측 상단부터 시작을 하는데, Canvas.Width, Canvas.Height의 값을 각각 2로 나눠주고 그 값을 더해서 그려주면 캔버스 가운데로 0,0의 좌표를 이동시킬 수 있습니다.

 

해당 내용을 WPF에서 어떻게 직접 구현하는지 예제 코드를 통해서 보여 드리도록 하겠습니다.

 

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="300" Width="300.977">
    <Grid>
        <Canvas 
                x:Name="uiMain_Canvas"
                Width="250"
                Height="250">
        </Canvas>
    </Grid>
</Window>
 

MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
 
namespace WpfApp7
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            DrawRectangle();
 
            //(0,0) 좌표 중심으로
            CenterDrawRectangle();
        }
 
        public void DrawRectangle()
        {
            Rectangle rect = new Rectangle();
            rect.Width = 30;
            rect.Height = 30;
            rect.Fill = Brushes.Red;
 
            Canvas.SetLeft(rect, 0);
            Canvas.SetTop(rect, 0);
 
            uiMain_Canvas.Children.Add(rect);
        }
 
        public void CenterDrawRectangle()
        {
            Rectangle rect = new Rectangle();
            rect.Width = 30;
            rect.Height = 30;
            rect.Fill = Brushes.Blue;
 
            //센터 중심으로 0,0 옮기기
            double centerWidthSize = uiMain_Canvas.Width / 2;
            double centerHeightSize = uiMain_Canvas.Height / 2;
 
            Canvas.SetLeft(rect, centerWidthSize);
            Canvas.SetTop(rect, centerHeightSize);
 
            uiMain_Canvas.Children.Add(rect);
        }
    }
}
 

 

실행 결과

위와 같이 파란색의 Rectangle이 Canvas의 가운데에서 그려진 것을 확인하실 수 있습니다.

 

감사합니다.^^