WPF 이미지 위에 버튼 생성하는 법이 궁금합니다.

안녕하세요. 반갑습니다.
자동차 판매하는 창을 만드는 중입니다.
처음엔 패기롭게 Blazor로 만드려고 했지만 엎고 (한번도 공부한적이…)
WPF로 시도하고 있습니다.

질문은 사진과 같이 이미지 위에 화살표 버튼을 만들고 싶습니다.
화살표
.
.
자동으로차면 자동차

StackPanel, Grid를 이용해 딱딱 정렬되는 것은 정말 좋은데 위치가… 뭔가 자유롭지 않게
정렬되는 기분이네요.
(WPF에 대해 공부한적이 없어서… 간단한것도 마음처럼 잘 안돼네요. :sweat_smile:)

(+++ 질문드립니다 +++ 처음엔 원래 이렇게 막연하게 나아가는건가요?
독학으로 공부하는 입니다.
그러다보면 막혀서 답답하고 뭘 해야될지 잘 모르는 때가 종종 옵니다.
그러면서드는 생각이 “이렇게 공부하는게 맞나? 프로그래밍 계속 해야되나?” 이렇게 옵니다.)

2개의 좋아요
<Button Width="30" Height="30" Command="{Binding ...}">
    <Button.Template>
        <ControlTemplate>
            <Image Source=".."/>
        </ControlTemplate>
    </Button.Template>
</Button>

이 방식으로 버튼에 그림을 넣을 수 있습니다.

아래는 같이 참고하면 좋을 것 같아요!

3개의 좋아요

버튼에 이미지 3개를 넣어서 구현하면 되는건가요?
왼쪽 화살표 | 메인 이미지 | 오른쪽 화살표 이런식으로 하면되는건가요?
이 방식으로 이미지와 버튼을 겹치는게 가능한건가요?

2개의 좋아요

안녕하세요 level120님.
답변 감사드립니다. :grinning: :laughing: :+1:

2개의 좋아요

정확히 어떤것이 궁금한지는 모르겠지만 제가 올린 코드를 한 번이라도 실행하시면 어떻게 처리하는것이 좋을지 바로 감이 오실거에요.

저 구문은 이미지 위에 버튼을 올린다기 보다버튼인데 이미지처럼 보인다고 보면 될 거에요.

3개의 좋아요

레이아웃을 구성하는 기본 패널은 숙지 하시는게 좋습니다.

  1. 이중에서 자유도가 가장 높은 패널은 Canvas이지만 좌표 지정 방식이기 때문에 사이즈가 정해진 대상만 사용해야 합니다.

  2. 가장 보편적으로 사용하는 패널은 GridStackPanel입니다. Grid는 영역을 겹치게 할 수도 있기 때문에 이미지를 전체로 지정 (Row, Column 지정하지 않음), 그리고 화살표를 적절한 ColumnDefinitions(Auto, *, Auto)로 줘서 사진 위에 위치 시킬 수 있습니다. StackPanel은 가로, 또는 세로 방향으로 컨트롤을 연달아 배치할 때 사용하는데, 지금 하시는 것에는 적합하지 않습니다.

  3. DockPanelWrapPanel은 필요에 따라 드물게 사용이 됩니다. 위의 링크와 아래 링크를 참조하세요.

3개의 좋아요

@Stupid

@level120 @dimohy 님 조언처럼 WPF가 은근 손도 많이 가고 알아야 할 것도 많지만 조금만 감 잡으시면 원하는 대로 하실 수 있을 것 같습니다.

질문 관련 샘플 소스코드 한번 참고해보세요! :smile:

https://github.com/devncore/wpf-demo

자세한 설명은 내일 한번 더 적어보겠습니다.

(이미지 참고)

image

image

감사합니다.

5개의 좋아요

헐! 제임쓰님 등판!

3개의 좋아요

안녕하세요 @james.lee 님. :grinning:
양식이 완벽해서 “파일을 올렸었나?” 하는 생각이 들정도 였어요.
잘 정리된 소스는 처음봐서 제 실력으로는 이해하기가 힘드네요 …
많이 공부해야겠다는 마음이 절로 드네요. :+1:
정말 고맙습니다.

1개의 좋아요
   <Button x:Name="LeftB"  Width="30" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left"> <-- 크기 30 왼쪽 중간 정렬-->
                            <Button.Template>
                                <ControlTemplate>
                                    <Image Source="(ImgName).jpg"/>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>

(사용한 소스)

alt 클릭

마우스로 이미지를 드래그 후 => Alt클릭 마우스를 놓으면 이동이 되는군요.

1개의 좋아요