C# WPF 움직이는 button image UI구현

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

안녕하세요. WPF 구현 중 특정 기능을 구현하고자 하는데 어려움이 있어 글을 남기게 되었습니다.

data model의 경우
위도, 경도 ( 현재 window에서 위치 )이 있고

MainViewModel은
observableCollection으로 관리 중입니다.

xaml에서 각 model list별 위, 경도 값은 표시를 했으나,

xaml에서 계속 업데이트 되는 위치 정보에 따라 image형태의 button control을 움직이도록 구현하는 부분이 막혀 글을 올리게 되었습니다.

뿐만 아니라 방위각이나 각 성분에 대해 선으로 표시하고 싶은데 이 또한 변하는 값에 따라 선이 움직이도록 구현하고 싶습니다.

보통 이러한 변하는 값에 대해 사용하는 방식이나 실무에서 주로 쓰이는 방법이 있나요?
Winform의 경우에는 Graphics 객체를 사용하여 Line 을 Draw하는 방식으로 사용했는데, C# WPF에서 실시간으로 움직이고, 위치 값을 binding해서 실시간으로 표시할 수 있는 방법 아시 는분 있으면 공유해주시면 감사하겠습니다 ㅠㅠ

2개의 좋아요
2

소스코드를 공유 주시면 답변에 도움이 될 것 같습니다.

3개의 좋아요
3

sample

이런걸 원하시나요?
링크를 참고해 보세요.

예전에 포토샵 비스무리한 기능 구현할때 참고했던 사이트네요.

https://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1

5개의 좋아요
4

설명이 미흡했습니다…
우선 xaml source의 경우

<Viewbox>
  <Path StrokeThickness="0.5"
    Width=100
    Height=100
   Fill="Black"
   Stroke="Red" >
     <Path.Data>
         ...LineGeometry or EllipseGeometry...
     </Path.Data>
</Viewbox>

Winform이나 MFC C++의 경우 GDI or GDI+ Graphics를 활용하여 Line성분 및 그림을 그리는 식으로 구현을 했는데

C# WPF의 경우 그래픽 요소를 표현하는 부분에 대해 프로그래밍 방식을 몰라 우선 찾은 방법으로 구현하는 부분이 Geometry를 활용하는 것이었습니다.
Line성분의 경우 StartPoint, EndPoint부분을 Point 객체로 Binding시켜 움직이게 구현이 가능하나,

Button 동작이 가능한 좌표 값에 따라 움직일 수 있는 Image의 경우 어떠한 식으로 구현을 주로 하는지 찾아도 없어서( 더 있을 텐 데… 찾고 있는 중입니다… )

주로 현업에서 graphic적인 요소에 대한 움직임 ( 선언된 Model의 변수 값에 따른 )을 어떤 식으로 구현하는지 궁금합니다!

1개의 좋아요
5

@Nobody 님이 공유하신 정보도 참고 하셔서,

Canvas에 적절히 표현하고자 하는 이미지 버튼 또는 라인 등을 Canvas.Left, Canvas.Top 속성으로 바인딩 하시면 됩니다.

    <Canvas>
        <Button Canvas.Left="{Binding ButtonX, Mode=OneWay}" Canvas.Top="{Binding ButtonY, Mode=OneWay}">이미지버튼</Button>
        <Line Canvas.Left="200" Canvas.Top="200" X1="100" Y1="100" X2="200" Y2="200" Stroke="Red" />
    </Canvas>
3개의 좋아요
6

좋은 자료 공유 감사드립니다!

2개의 좋아요
7

좋은 답변 감사드립니다!

2개의 좋아요
8

(답변은 아니지만)

@Nobody 추억돋는 오픈소스네요!! 저도 비슷한 경험이 있었어요.
아마 이런 류의 개발에 교과서 같은 오픈소스가 아닐가 생각됩니다. :smile:

같은 분이 만든 파트 2/3/4도 함께 공유드립니다.

5개의 좋아요