먼저 제가 첨부해 놓은 파일을 받아봅시다!
파일 이름에서 유추할수 있듯이 가위 바위 보 입니다.
윈도우즈 10 앱으로 제가 만들 가위 바위 보는 제가 그림을 클릭 하면 가위 바위 보를 내게 되고 컴퓨터도 그렇게 내어서 이겼는지 졌는지를 알수 있는 앱입니다.
저번에 그냥 텍스트 블록과 버튼만 필요했던 것과는 달리 이번에는 알아야 할것이 몇가지 있습니다. 짚어보겠습니다.
1. 버튼에 이미지 넣기!
Xaml에서 마이크로소프트가 제공하는 버튼을 넣으면
이렇게 나옵니다. 깔끔하긴한데 그렇게 이쁘? 지는 않는것 같습니다.
그리고 요즘 UI나 UX를 중요시 하는 시대라서 그런지 아마 저것을 그냥 쓰는 회사도 많이 없을거 같네요
그럼 어떻게 해야 할까요?
자 먼저 위의 버튼을 xaml 파일로 본다면
1 |
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="176,198,0,0" VerticalAlignment="Top" Width="182" Height="102"/> |
cs |
이렇게 나옵니다. 이름도 버튼 써있는 것도 버튼 그럼 우리 첨부파일중에 가위를 버튼이미지로 해보겠습니다.
1
2
3
4
5
6
7 |
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="176,198,0,0" VerticalAlignment="Top" Width="182" Height="102">
<Button.Template>
<ControlTemplate>
<Image Source="Assets/Scissor.png"/>
</ControlTemplate>
</Button.Template>
</Button> |
cs |
버튼 사이에 버튼 템플릿이라는 것을 넣고 더해서 컨트롤 템플릿을 넣으면 이미지소스를 통해서 이미지모양 버튼을 만들 수 있게 됩니다.
그럼 버튼이 어떻게 나오나 볼까요?
이렇게 칙칙한 회색 버튼이 가위로 바뀌었습니다! 버튼 사이에 템플릿 넣기! 기억해 둡시다
2. 이벤트시 그림 나오게 하기
우리 버튼 이벤트( 버튼을 클릭했을 때) 어떻게 했는지 기억 나시나요?
저버튼을 두번 클릭하기!
1
2
3
4 |
private void button_Click(object sender, RoutedEventArgs e)
{
} |
cs |
그럼 이렇게 메서드가 생기죠? 자 여기서 생각을 해봅시다. 우리가 버튼을 템플릿으로 만들었을때 이미지소스 즉 위치를 컴퓨터가 찾을수 있도록 해주었죠?
그럼 저 메서드 안에서 이미지 소스를 알려주어야 하지 않을까요? 즉 이미지를 보여주는 곳에 이미지 소스를 알려주면 되지 않을까요?
네 가능합니다.! 먼저 저 앱에서 ToolBox에서 이미지를 원하는 곳에 위치 시켜봅시다.
이미지를 보여주는것에 사용할 레고 세트를 사야합니다
using Windows.UI.Xaml.Media.Imaging;
를 추가 시켜 줍시다 그래야 Bitmap이라는 클래스를 이용해서 이미지를 보여줄수 있어요!
자 그럼 소스를 적어봅시다.
1 |
image.Source = new BitmapImage(new Uri("ms-appx:///Assets/Scissor.png", UriKind.Absolute)); |
cs |
이 한줄이면 버튼을 누르면 그것이 바로 Image가 위치한 화면에 뙇! 하고 나옵니다.
소스를 뜯어보면 image의 Source를 정해줄게요! 라는 것을 시작으로 비트맵 클래스의 uri를 정해주는 겁니다.
ms-appx는 Microsoft의 앱 데이터들을 말해주는 것이고요 urikind.absolute 보니까 감이 오지 않나요?
uri경로를 절대경로로 하겠다는 뜻입니다!
자 이렇게 그림 가위바위 보를 만들기 위한 그림과 요소들을 알아보았구요! 혼자 가위바위보를 만들어 봅시다!
'Visual C# > Universal App' 카테고리의 다른 글
16. C#/Xaml Windows 10 app 강좌 로또번호 생성기 (0) | 2015.10.28 |
---|---|
15. C#/Xaml Windows 10 app 강좌 Hello, Windows 10 (0) | 2015.10.28 |
14. C# 강좌 GUI 프로그래밍을 하기전에 (0) | 2015.10.25 |
13. C# 강좌 행맨 Hangman (2) (0) | 2015.10.24 |
12. C# 강좌 행맨 Hangman (1) 알아야 할 것들 (0) | 2015.10.24 |