[C#/WPF] Image Control 마우스를 이용한 이미지 화면 이동 방법

WPF에서 Image Control 마우스 이동을 통하여 해당 위치로 이동하는 방법에 대하여 찾아보던 중 모두 PictureBox에 대한 내용에 대한 정보만 나와서 Image Control에서 마우스를 이용한 이미지 이동 방법에 대하여 적어보겠습니다.

 

[C#/WPF] 이미지 확대, 축소 처리 (Zoom In, Zoom Out)

---

C#/WPF 이미지 마우스를 이용하여 화면 이동하는 방법

Image Control을 이용하여 큰 이미지나 또는 확대하였을 경우에 잘려 보이는 경우 화면을 이동해야 하는데, 이때, 마우스를 이동하여 화면을 해당 방향으로 이동시키는 방법에 대하여 알아보겠습니다.

 

 

1. Image Control 정의 (.xaxml)

<ScrollViewer x:Name="ScrollViewer_Image" HorizontalScrollBarVisibility="Visible">
    <Image x:Name="Image_Viewer" HorizontalAlignment="Center" VerticalAlignment="Center"
           MouseDown="Image_Viewer_MouseDown" MouseUp="Image_Viewer_MouseUp"
           MouseMove="Image_Viewer_MouseMove">
    </Image>
</ScrollViewer>

 

먼저 ScrollViewer를 사용하여 이미지 이동시 ScrollBar의 위치를 변경하며 이동시키는 형식으로 동작합니다.

그리고 ScrollViewer 내부에 Image Control을 삽입 후 해당 이미지의 Mouse Event를 추가합니다.

Image Control에 추가할 마우스 항목으로는 MouseDown, MouseUp, MouseMove 이벤트로 구성됩니다.

• MouseDown : 마우스가 클릭되었을 때 발생하는 이벤트 (마우스를 누를 때)
• MouseUp : 마우스의 클릭이 해제되었을 때 발생하는 이벤트 (마우스의 클릭을 땔 때)
• MouseMove : 마우스가 이동할 때 발생하는 이벤트 (마우스가 움직일 때)

 

 

2. 마우스(Mouse) 이벤트(Event) 정의 (.cs)

위에 Image Control에 추가한 마우스 항목으로 MouseDown, MouseUp, MouseMove를 선언하였습니다. 각각의 이벤트를 정의해 보도록 하겠습니다.

 

1) 공통 변수 추가

namespace BijuPOP.View
{
    /// <summary>
    /// ImageViewerControl.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class ImageViewerControl : Window
    {
        // 마우스 이동을 위한 변수 선언
        bool mousing = false;
        int startX = 0;
        int startY = 0;

        public ImageViewerControl()
        {
            InitializeComponent();
        }
    }
}

 

마우스 이동을 위하여 클래스 전역으로 사용할 수 있는 변수를 선언합니다.

• mousing : 현재 마우스가 클릭상태인지 확인하기 위한 bool 변수
• startX : 클릭 시 마우스의 X좌표 위치를 저장하기 위한 int 변수
• startY : 클릭 시 마우스의 Y좌표 위치를 저장하기 위한 int 변수

 

2) MouseDown Event (마우스가 눌릴 때 발생하는 이벤트)

private void Image_Viewer_MouseDown(object sender, MouseButtonEventArgs e)
{
    mousing = true;

    string position = e.GetPosition(this).ToString();
    
    string[] split = position.Split(',');
    startX = Int32.Parse(split[0]);
    startY = Int32.Parse(split[1]);
}

 

MouseDown 이벤트를 활용하여 마우스가 처음 클릭된 위치를 확인합니다. 이 위치를 기억하고 있어야 마우스가 이동되었을 때, 첫 마우스 위치와의 거리를 계산하여 이동시킬 수 있습니다.

 

이번에는 자세한 코드에 대하여 알아보도록 하겠습니다.

 

mousing = true

현재 마우스가 클릭되었다는 상태를 저장하기 위함입니다.

 

string position = e.GetPosition(this).ToString();

현재 클릭된 이미지의 위치를 가져오는 함수입니다. '111,999'와 같은 형식(X, Y)으로 반환합니다.

 

string[] split = position.Split(',');
startX = Int32.Parse(split[0]);
startY = Int32.Parse(split[1]);
이미지의 위치를 가져온 다음 각각의 X와 Y좌표를 저장하는 부분입니다.

 

3) MouseUp Event (마우스의 클릭상태가 해제될 때 발생하는 이벤트 )

private void Image_Viewer_MouseUp(object sender, MouseButtonEventArgs e)
{
    mousing = false;
}

 

마우스의 클릭 상태가 해제될 때에는 mousing = false를 활용하여 더 이상 마우스가 클릭되지 않은 상태를 저장합니다.

 

4) MouseMove Event (마우스가 이동할 때 발생하는 이벤트)

private void Image_Viewer_MouseMove(object sender, MouseEventArgs e)
{
    if (mousing)
    {
        string position = e.GetPosition(this).ToString();
        
        string[] split = position.Split(',');
        int chageX = Int32.Parse(split[0]) - startX;
        int chageY = Int32.Parse(split[1]) - startY;

        startX = Int32.Parse(split[0]);
        startY = Int32.Parse(split[1]);

        ScrollViewer_Image.ScrollToHorizontalOffset(ScrollViewer_Image.HorizontalOffset - chageX);
        ScrollViewer_Image.ScrollToVerticalOffset(ScrollViewer_Image.VerticalOffset - chageY);
    }
}

 

이 부분이 가장 중요한 부분으로 마우스가 이동할 때 Image Control에 적용되는 화면입니다. 위 코드를 통하여 마우스를 클릭한 이후 드래그를 실행하면 화면이 움직이는 효과가 발생합니다.

 

코드에 대하여 자세히 보도록 하겠습니다.

 

if (mousing)

마우스가 클릭된 상태에만 해당 이벤트가 실행됩니다.

 

string position = e.GetPosition(this).ToString();

현재 마우스의 위치를 가져옵니다.

 

string[] split = position.Split(',');
int chageX = Int32.Parse(split[0]) - startX;
int chageY = Int32.Parse(split[1]) - startY;

현재 위치를 가져와 처음 마우스가 클릭되었을 시작 좌표와 계산하여 변경된 좌표만큼의 값을 저장합니다.

 

startX = Int32.Parse(split[0]);
startY = Int32.Parse(split[1]);

다음 동작을 위하여 처음 시작 좌표를 현재 가져온 좌표로 지정합니다.

 

ScrollViewer_Image.ScrollToHorizontalOffset(ScrollViewer_Image.HorizontalOffset - chageX);
ScrollViewer_Image.ScrollToVerticalOffset(ScrollViewer_Image.VerticalOffset - chageY);

이 부분이 ScrollViewer의 가로(Horizontal)와 세로(Vertical) Scrollbar를 직접 이동시키는 코드입니다.

Parameter 값을 보게 되면 각각의 Scrollbar 위치에서 변경된 값을 뺀 값을 ScrollViewer에 적용합니다.

 

이상으로 C#/WPF에서 Image Control의 화면을 클릭하여 이동시키는 방법에 대하여 알아보았습니다. 엄청 어렵거나 한 부분은 아니지만, 처음 하시는 분들께서는 참고가 되셨기를 바랍니다.

더 많은 정보를 드릴 수 있도록 노력하며, 찾아주셔서 감사합니다.

---

도움이 될만한 글

[WPF/C#] 그림자 효과 입체감 주기 - ShadowDepth, BlurRadius

[WPF/C#] Visual Studio 자주 사용하는 단축키 모음

[C#/WPF] XAML에서 특수 문자 사용하는 방법