Stupid
12월 30, 2021, 12:18오후
1
안녕하세요. 반갑습니다.
자동차 판매하는 창을 만드는 중입니다.
처음엔 패기롭게 Blazor로 만드려고 했지만 엎고 (한번도 공부한적이…)
WPF로 시도하고 있습니다.
질문은 사진과 같이 이미지 위에 화살표 버튼을 만들고 싶습니다.
.
.
StackPanel, Grid를 이용해 딱딱 정렬되는 것은 정말 좋은데 위치가… 뭔가 자유롭지 않게
정렬되는 기분이네요.
(WPF에 대해 공부한적이 없어서… 간단한것도 마음처럼 잘 안돼네요. )
(+++ 질문드립니다 +++ 처음엔 원래 이렇게 막연하게 나아가는건가요?
독학으로 공부하는 입니다.
그러다보면 막혀서 답답하고 뭘 해야될지 잘 모르는 때가 종종 옵니다.
그러면서드는 생각이 “이렇게 공부하는게 맞나? 프로그래밍 계속 해야되나?” 이렇게 옵니다.)
2개의 좋아요
<Button Width="30" Height="30" Command="{Binding ...}">
<Button.Template>
<ControlTemplate>
<Image Source=".."/>
</ControlTemplate>
</Button.Template>
</Button>
이 방식으로 버튼에 그림을 넣을 수 있습니다.
아래는 같이 참고하면 좋을 것 같아요!
WPF의 큰 장점이 XAML을 이용하여 시각적으로 표현이 유연한 Windows Desktop App 개발을 할 수 있다는 점인데요, 이 시각적으로 표현이 유연한 레벨이 되려면 XAML의 러닝커브가 좀 있는 거 같습니다. 이제 갓 WPF를 1년 남짓 한 저로서는 ContentPresenter는 좀 어려운 개념인데요.
WPF의 컨트롤은 무조건 ContentControl, ItemsControl를 상속받아 구현되었다고 알고 있습니다.
ContentControl은 하위 컨트롤을 딱 1개 받을 수 있는 컨트롤이고, ItemsControl은 하위 컨트롤로 Collection형태의 다수의 Item을 받을 수 있는 것으로 알고 있으며, 이 때 하위 컨트롤에 대한 표현 형식을 DataTemplate으로 여러 Control들을 조합하여 표현하는 것으로 알고 있습니다.
그래서 저같은 초보들이 이런 궁금증을 갖는 듯 합니다. DataTemplete으로 컨트롤들을 조합하여 자유롭게 표현이 가능한데 도…
3개의 좋아요
Stupid
12월 30, 2021, 12:32오후
3
버튼에 이미지 3개를 넣어서 구현하면 되는건가요?
왼쪽 화살표 | 메인 이미지 | 오른쪽 화살표 이런식으로 하면되는건가요?
이 방식으로 이미지와 버튼을 겹치는게 가능한건가요?
2개의 좋아요
Stupid
12월 30, 2021, 12:35오후
4
2개의 좋아요
정확히 어떤것이 궁금한지는 모르겠지만 제가 올린 코드를 한 번이라도 실행하시면 어떻게 처리하는것이 좋을지 바로 감이 오실거에요.
저 구문은 이미지 위에 버튼을 올린다기 보다버튼인데 이미지처럼 보인다고 보면 될 거에요.
3개의 좋아요
dimohy
12월 30, 2021, 12:46오후
6
레이아웃을 구성하는 기본 패널은 숙지 하시는게 좋습니다.
이중에서 자유도가 가장 높은 패널은 Canvas
이지만 좌표 지정 방식이기 때문에 사이즈가 정해진 대상만 사용해야 합니다.
가장 보편적으로 사용하는 패널은 Grid
와 StackPanel
입니다. Grid
는 영역을 겹치게 할 수도 있기 때문에 이미지를 전체로 지정 (Row, Column 지정하지 않음), 그리고 화살표를 적절한 ColumnDefinitions(Auto, *, Auto)로 줘서 사진 위에 위치 시킬 수 있습니다. StackPanel
은 가로, 또는 세로 방향으로 컨트롤을 연달아 배치할 때 사용하는데, 지금 하시는 것에는 적합하지 않습니다.
DockPanel
및 WrapPanel
은 필요에 따라 드물게 사용이 됩니다. 위의 링크와 아래 링크를 참조하세요.
3개의 좋아요
@Stupid
@level120 @dimohy 님 조언처럼 WPF 가 은근 손도 많이 가고 알아야 할 것도 많지만 조금만 감 잡으시면 원하는 대로 하실 수 있을 것 같습니다.
질문 관련 샘플 소스코드 한번 참고해보세요!
https://github.com/devncore/wpf-demo
자세한 설명은 내일 한번 더 적어보겠습니다.
(이미지 참고)
감사합니다.
5개의 좋아요
안녕하세요 @james.lee 님.
양식이 완벽해서 “파일을 올렸었나?” 하는 생각이 들정도 였어요.
잘 정리된 소스는 처음봐서 제 실력으로는 이해하기가 힘드네요 …
많이 공부해야겠다는 마음이 절로 드네요.
정말 고맙습니다.
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클릭 마우스를 놓으면 이동이 되는군요.
1개의 좋아요