Wpf로 관제 프로그램 개발을 목표로하고 있습니다

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
#1

안녕하세요.

WPF로 입문한지 얼마 안된 초보입니다. 그동안 원폼 기반으로 개발을 하다보니까

WPF를 윈폼 형태로 개발하려고 하고 있네요. 예전 습관을 버리지 못한거 같습니다.

현재 제가 관제 프로그램을 개발중인데요.

컨셉은 관리하는 지역의 지도가 있고, 지도에 심볼이나 마크 혹은 글자, 이미지 등이 위에 드로잉되게 됩니다.

어느정도 마우스로 Panning과 Dragging을 할 수 있고, 축소 확대가 되게 구현하려고 합니다.(우리가 아는 네이버 지도 같은 기능이 기반으로 있는거죠)

Viewbox를 감싸서 Canvas로 지도를 띄우고 그 위에 각종 심벌, 이미지, 글자 등이 나오고 외부로 부터 메시지를 받으면 해당 심볼이 에니메이션 동작을 하거나 캔버스 위에 메시지 팝업을 하는 거죠.

전체적으로 보면 동작은 간단한데, 제가 제일 궁금한건

위에 말씀드린 이 심볼 오브젝트들을 어떻게 관리할 것이냐에요.

  1. 오브젝트를 객체로 만들어서 관리하고 초기 프로그램 로드 시, 외부에서 불러오는데 그냥 Mainwindow.cs에다 다 때려 박고 DB로 저장된 수만큼 쭉 땡겨 오는게 과연 WPF 프로그래밍적인 방법이 맞는지 MVVM의 패턴으로 접근하고 싶어도, 버튼이나 기타 많이 알려진 엘리먼트들의 바인딩과 커멘드 설정이 공개되어있지만, 드로잉 부분은 찾기가 어렵네요. (물론 있지만, 저같은 상황이 아니라 다들 그냥 마우스로 그리고 옮기고 하는정도라서)
    어떤식으로 설계를 하는게 좋은 접근인지 조언을 듣고 싶습니다.

image
image1280×721 225 KB

[개발하고자 하는 프로그램의 Wireframe]

감사합니다.

좋아요 1
#2

비슷한 솔루션을 개발한 경험으로 말씀 드리자면

오브젝트 뒤 이미지는 지도의 타일맵 방식으로

각 레벨 별(확대, 축소시 해당하는 값)로 타일 형식으로 잘라진 이미지를

지도 엔진에서 로드해서 사용했습니다.

질문의 오브젝트 관리 방식은

Base오브젝트를 두고 각 오브젝트들은 해당 Base를 상속받아 구현되어 있는 구조에서

각각의 오브젝트들은 하나의 모델로 취급 합니다.
각 오브젝트의 좌표값(X, Y, Z)을 json형태로 시리얼라이즈해서 저장소에 저장합니다.

추후 로드시에는
json을 디시리얼라이즈 해서 오브젝트의 모델 클래스로 변환해서 List로 만들어 줍니다.

뷰에서는 오브젝트의 좌표정보를 기준으로 바인딩되어 있어서
뷰모델에서 오브젝트 모델들의 리스트만 관리하면 됩니다.

핵심은 뷰에서 바인딩 처리된 값들로 오브젝트 컨트롤을 어떻게 표시해야 하는지가 핵심인데 이 부분은 현재 cs에서 처리되고 있는 기존 코드를 응용하시면 될거 같습니다.

질문 내용이 코드를 가지고 문제점을 말하는것이 아니라서 답변이 좀 추상적으로 광범위하게 달린것 같네요.,

좋아요 1
#3

감사합니다.

설계 개념을 잡는데 도움이 될 것 같습니다.

추후 또 궁금한게 있으면 문의드리겠습니다.

좋은 하루되세요.

좋아요 1
#4

단순 이미지를 백그라운드 이미지로 사용하고 Zoom 시스템이 필요하지 않다면 문제는 좀 더 간단해지긴합니다.
화면에 그려질 오브젝트의 상위 컨트롤을 하나 선언하고 그 컨트롤이 렌더링 되는 타이밍에 보관되어 있던 위치 크기 정도를 가져와 적용하는 거죠.
(컨트롤이 위치와 크기 정보를 DP 로 들고 있다가 ViewModel 이 로딩될 때 컨트롤 내부에서 처리해주면 됩니다.)
그렇게 한 뒤 오브젝트의 panning 이나 input에 관련된 처리를 이 상위 컨트롤에서 다 처리하면 되구요.(그러면 외부 의존성이 모두 제거가 되겠지요.)
실제 상위 컨트롤 내부에서 화면에 그려질 자식 내용은 미리 지정해놓은 DataTemplate 을 이용해 적용하는 정도 사용하면 될 거 같습니다.
이 상태에서 Zoom panning 이 들어가면 그냥 background 와 함께 통째로 zoom 처리를 하면 되기 때문에 다른 이슈가 없을 겁니다.

그런데 그게 아니라 타일이미지를 가져와 화면에 뿌리고 zoom level 에 따른 위치 크기 조작이 함께 필요한 경우, 문제가 복잡해 집니다.
이 경우 타일의 위치와 오브젝트의 위치간 동기를 위해 별도의 좌표 체계를 정의해서 사용해야하고(보통은 GIS 좌표계를 따르겠죠?)
각 좌표에 맞게 오브젝트의 변환 처리도 함께 해줘야 합니다. 레이어를 나눠서 처리해도 좌표계에 대한 고려가 필요하구요.
암튼 설계부터 마무리까지 큰 작업이 될 확률이 높아요. 그래서 보통은 잘 만들어진 Map 라이브러리를 가져다 사용하는 게 훨씬 정신건강에 도움이 됩니다.
WPF 상용 Map 라이브러리들은 대부분, 앞에서 설명했던 문제들을 크게 신경쓰지 않고 어디에 뭘 표시할 지만 커스텀하게 조작할 수 있게 되어 있거든요.
별도의 좌표계를 만들 필요 없이 제공해주는 거 쓰면 됩니다. zoom panning 도 대부분 다 지원되기 때문에 직접 만들 일이 거의 없어요.
목표로 하시는 게 실제 Map 서비스와 연동되어야 한다면 직접 전부 만드는 것보다 Map 라이브러리를 사용하는 것을 적극 추천합니다.

좋아요 1
#5

어음… DP 는 정해인이 아니라 DependencyProperty 입니다…ㅋㅋㅋㅋㅋ

좋아요 3
#6

답변 정말 감사드립니다.
일단 적절한 라이브러리를 찾기가 힘들더라구요. 혹시 아신다면 추천 부탁드립니다~^^
그리고, 상황에 따라 어떤 맵상의 오브젝트만 이벤트가 발생하고 애니메이션이 나타나고,
해당구역으로 살작 이동 확대 되는 이벤트도 구현하려고 하거든요.
또한, 오브젝트를 백그라운드화 시키면 마우스 클릭이벤트 같은 컨트롤이 어려워 지지 않을까하는 걱정이 드네요.(제가 잘 몰라서 이런 생각을 할 수도 있습니다.) 보통 오브젝트를 캔버스 트리 하위로 갖고 있으면, 자식 트리의 bubble? 형식의 이벤트 접근해서 좌표나 인스턴스를 찾을 수 있는거 같더라구요.

현재 기존에 개발하시던 분이 주석을 없이 나가셔서, (해당프로그램이 WPF MVVM Caliburn기반 visitor pattern 뭐 이런거로 짜놓으시고 인수인계 없이 가셨습니다…) 정신적으로 상당히 피폐하네요.

좋아요 1
#7

찾기 힘들다고 하신 건 대상이 무료라서 그런 건지는 모르겠지만 유료 라이브러리들 좋은 거 많아요.
제가 영업하는 건 적절하지 않고…ㅋㅅㅋ
Tele…, Infra…, Syn…, Comp…, DevE… 얘네도 Map 지원 하구요. Map 전용 라이브러리도 꽤 있어요(Arc…, Bin…, G… 등등)
찾으면 많이 나올겁니다.
다만 유료라는 거…~ㅂ~

좋아요 1
#8

다들 닷넷기반 컴포넌트 하면 한번쯤은 다 거쳐본 친구들이군요…
(대충 다 아는 얼굴들이구먼 그림)

좋아요 1
#9

감사합니다. 잘 참고하겠습니다~!!!^^

좋아요 1