안녕하십니까? 너만바라보면 입니다.

저번시간까지 Visual Studio Blend를 다루는 방법에 대해서 조금 알아보았습니다. 여러분들께 더 많은 것을 알려드리고 싶습니다만 사실 저도 많은 것을 알지 못하고 개발에 대해서 잘 모르시는 초보자 분들을 대상으로 하는 강의이다 보니 너무 복잡하게 들어가면 그나마 머리아파서 스트레스 받으실텐데 더 스트레스 받으셔서 머리가 터질수도 있다고 생각하였습니다.

그래서 여러분들을 위해(?) 애플리케이션을 개발하는데 꼭 필요한 부분만 여러분들에게 알려드리려고 합니다. 조금 부족한 부분이 눈에 보이시겠지만 그런 부분은 여러분들께서 네이버구글이라는 검색엔진으로 훌륭한 개발자 분들의 자료를 참고해서 보시면 될 것 같습니다.

저는 프로그래밍을 공부하기 위해서 가장 중요한 점은 바로 자신이 직접 해보는 것이라고 생각합니다. 명강사분이 가르치는 학원에서 열심히 100시간 들은들 자신이 1시간 해보는 것보다 못하다고 생각하거든요. (1시간은 좀 너무 심했나요? ) 하여튼 그만큼 자신의 손으로 직접 한자 한자 코딩을 해보면서 연습해 보는 것이 정말 중요합니다.

귀찮다고 예제소스 긁어다가 열어보지 마시고 번거롭더라도 책에 있는것을 보면서 쳐보시기 바랍니다. 여기 오시는 여러분들은 다들 그럴 열정을 저보다 더 많이 가졌을 것이라 생각합니다.

이번 시간에는 가장 기본적인 컨트롤,이벤트에 대해서 알아보도록 하겠습니다. 가장 쉬운 내용이지만 또한 중요한 내용이기도 합니다. 여러분들이 직접 해보시는 것이 중요하므로 강좌를 보시고 난 뒤 꼭 한번 해보시기 바랍니다.

 

 1.PNG

Windows Phone7 에서 사용되는 컨트롤은 Visual Studio Toolbox에 모여있습니다. 여기서 대부분의 Control을 선택해서 클릭만 하면 디자이너 모드에 나타납니다. 우리는 이미 이전시간에 TextBox, TextBlock, Button 컨트롤을 썼습니다. 이러한 기본적인 컨트롤은 애플리케이션을 채우는 가장 중요한 요소이죠? 이러한 컨트롤은 Xaml 코드로도 작성할 수 있습니다만 우리는 굳이 코드를 다 외워가면서 작성할 필요는 없습니다. Toolbox에서 선택해서 하는것만으로도 기본적인 애플리케이션은 만들 수 있으니까요. 또한 저번시간에 배운 Blend를 이용한다면 더욱 편리하게 컨트롤을 이용할 수 있습니다!

 

 

 

2.PNG

자 우리는 이제 Toolbox에서 Button TextBox, TextBlock을 이용하여 위와같이 만들 수 있습니다. 한번 만들어 보실래요? 우리가 그동안 배웠던 것으로만 으로도 만들 수 있습니다. TextBlock, Textbox, Button 컨트롤이 각각 2개씩 만들고 배치만 잘 하면 위와 같이 나옵니다. 전 여러분들을 믿겠습니다. 위와 같은 화면은 충분히 만드실 것이라고 말이죠. 저 위의 화면을 잘 만들어 놓으시고 꼭 저장해 놓으시기 바랍니다. 다음에 써먹을 거거든요.

 

4.PNG

자 만드셨겠죠? 우선 만드신건 그대로 두시고 프로젝트명에 마우스 오른쪽버튼을 누르시고

Add -> New Item 을 선택해서 새로운 xaml 페이지를 작성합니다.

 

5.PNG

Toolbox에서 HyperlinkButton을 선택합니다.

 

6.PNG

Hyperlink예제 입니다. 예를들어서 인터넷 사이트로 링크를 건다던지 하는 연결할 때 이 Hyperlink를 쓰면 되겠죠? 그런데 이 Hyperlink Button 컨트롤과 같은 속성 및 이벤트를 제공합니다. 그래서 HyperlinkButton 이라고 컨트롤 이름도 붙여진 것 입니다.

 

 

 

7.PNG

위와 같이 체크 박스도 만들어 봅시다. ToolBox에서 체크박스를 선택하시면 됩니다. 이 컨트롤은 ToggleButton

클래스에서 파생된 애들입니다. 즉 클릭할때마다 상태가 변경되는 형태가 되겠죠. 이런 CheckBox 컨트롤은

여러 개의 CheckBox가 선택이 가능합니다. 그래서 보통 질문에 대한 답이 복수일 때 많이 사용하죠?

 

9.PNG

ProgressBar는 어떤 작업이 수행되는 시간을 보여주는 것입니다. PC에서 보는 많이 익숙한 형태이죠?

 

8.PNG

막대기 안에 나타나는 값들을 바꾸려면 Properties 에서 Value값을 바꿔주면 됩니다.

 

 

 

 

 10.PNG

ProgressBar 와 함께 있는 것이 Slider인데요. ProgressBar와 다른점은 Slider는 한정된 범위 내에 값을 선택할 수 있게

하는 컨트롤 입니다. 그런데 사실 둘다 일반 어플리케이션 만들때는 작업 진행률을 보여주는 것 말고는 사용되는 범위는

거의 없습니다.

사용자의 입장에서는 작업진행률을 보여주는 것 보다 그냥 바로 빨리 빨리 실행되는게 더 낫지 않을까요?

 

 

 11.PNG

위의 컨트롤도 많이 본 RadioButton 컨트롤이죠. RadioButton 컨트롤은 여러 개의 컨트롤들을 그룹화하기 위해

GroupName 속성이 추가로 사용될 수 있습니다. 여러분이 주로 거래하시는 은행은 어느 은행이세요?? 

 

 

16.PNG

자 그렇다면 폰에 이미지를 넣기 위해서는 어떻게 해야할까요?

바로 Image 컨트롤을 사용해야 합니다. Image 컨트롤은 Toolbox에 있습니다.

우선 Toolbox에서 Image를 디자이너에 끌어옵니다.

 

17.PNG

끌어온 Image 컨트롤에서 Properties Source에서 ‘…’ 버튼을 누릅니다. 경로를 불러오는 과정입니다.

 

 

19.PNG

Add를 눌러 여러분이 넣기 원하는 그림을 불러오시고 List에 추가해 주세요.

 

18.PNG

위의 화면처럼 이미지가 추가되었나요.

Image 컨트롤은 Image를 폰에 넣기 위해 많이 이용되고 있으니 한번씩 꼭 해보시기 바랍니다!

 

 

자 이제 끝났나요?

우리 아까 앞에서 처음 로그인 화면을 만들어 두었던 것 생각나시나요?

화면을 꼭 만드시고 저장해 두시라고 했죠? 이제 여기에다 이벤트를 줘야 합니다. 이벤트를 주지 않으면 그 어플리케이션은 껍데기만 만든것과 같거든요.

우리가 이벤트는 왜 있어야 할까요? 이벤트는 프로그램 내부에서 발생한 동작을 알려주는 일종의 메시지와도 같습니다. 어플리케이션에 이벤트가 없으면 이게 실행이 되었는지 안되었는지 알 수가 없겠죠?

 

 

 

12.PNG

우선 버튼의 속성부터 손을 좀 봐야 합니다. 확인은 OKButton이라고 바꿔줍니다.

Properties에서 바꿔주면 된다는것쯤은 이제 아시겠죠?

 13.PNG

취소도 마찬가지로 CancleButton으로 바꿔줍니다.

 

그다음에 확인버튼을 더블클릭 하면 c#을 입력하는 코딩창이 나타날 것입니다.

우리는 단순히 메시지 박스만 띄워보겠습니다. 사실 작업은 하나도 수행하지도 않았죠! 할게 없으니까요.

 

 

14.PNG

위와 같이 입력해 줍니다.

 

 

15.PNG

에뮬레이터를 실행해서 확인버튼을 클릭하면 실제로 메시지박스가 나타나는 것을 보실 수 있습니다.

 

5강까지 왔지만 사실 어떻게 보면 크게 한게 없다고 생각되실 것입니다.

아직 난 어플리케이션을 하나도 만들어 보지도 않았는데 라는 생각 말이죠.

뭔가 눈에 보이는 어플리케이션을 만들고 싶다는 생각이 이제 슬슬 드실 것입니다.

손이 간질간질 하시죠?

 여러분들은 이제 어플리케이션의 세부 기능을 만들 자격을 가지셨습니다.

저와 함께 다음시간부터는 정말 눈에 보이는 그리고 많이 쓰이는 기능을 구현해 보는 시간을 가지도록 하겠습니다.

감사합니다.

다음시간에 뵙겠습니다!




안녕하세요.윈도우폰에 관심이 많은 너만바라보면 입니다.