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개의 좋아요