안녕하세요. 너만바라보면 입니다.

저번시간에 드린 숙제는 잘 해결하셨나요? 너무 쉬워서 식은죽 먹기이셨겠죠? 전시간 강좌만 잘 보고 실습하셨더라면 몇 초면 끝나실 일이라 생각됩니다. 이제 여러분들은 저보다 개발을 더 잘하시는 분들이니까요!

저번시간에 조금 많이 나가서 힘드셨으리라 생각합니다. 이번시간에는 조금 쉬어가는 타임이라 생각하시고 가볍게 강좌를 읽어주세요.

우리가 이제 9강까지 오면서 페이지이동, 미디어재생, 웹브라우저 등을 만들어 보았습니다.

저번시간 강좌 잘 읽으시고 실습은 하셨는지요? 숙제도 잘 하셨으리라 믿습니다.

 

저번시간에 숙제는 바로 Video 화면을 가로보기가 가능하게끔 하라는 것이었습니다. 너무나 쉬웠죠? 우리가 저번시간에 Internet Browser에서 쓴 OrientationChanged 이벤트 핸들러를 쓰면 되죠? 이것을 Video폴더에 Default.xaml.cs 파일을 열어 갖다 붙이면 됩니다.

 

hw1.PNG

위의 화면에 있는 내용을 그대로 COPY 하시면 됩니다. 물론 ContentPanel Name을 수정하신 분은 수정한 name으로 써줘야 합니다.

이번시간에는 애플리케이션 바와 백 버튼 처리에 대해 알아보도록 하겠습니다.

 

애플리케이션 바는 왜 필요한 것일까요?

우선 윈도우폰 뿐만이 아니라 다른 폰들에도 이 애플리케이션 바와 유사한 형태가 존재합니다.이러한 바가 필요한 이유는 화면에 모든 메뉴를 다 담을 수 없기 때문입니다. 그래서 이를 추가하기 위해 필요합니다. 또한 특정한 조건이 만족되었을 때 페이지에 특정 기능을 제공해야 할 수도 있고 아니면 애플리케이션 전체에 공통적인 메뉴를 제공할때도 사용이 됩니다. 정리하자면 윈도우폰에서는 이러한 메뉴를 숨기거나 나타낼 수 있는 버튼 및 메뉴 명령을 넣어두는 컨테이너로 애플리케이션 바를 쓸 수 있습니다.

 

 

 9.PNG

우선 애플리케이션 바가 어떤 모양으로 생겼는지 보실까요? 우리는 위와 같은 애플리케이션 바를 만들어 볼거에요.

애플리케이션 바를 보니 물음표와 비디오 아이콘이 나타난 것을 볼 수 있죠? 이러한 아이콘은 어디서 가져오는 것일까요? 여러분이 직접 제작하셔도 무방합니다. 사이즈를 62 x 62  로 맞춰서 예쁘게 제작해서 쓰셔도 되요. 단 배경색(Background color)가 검은색인 것을 고려 아이콘은 흰색으로 제작되어야 하겠죠?

우리는 윈도우폰7 SDK에서 제공하는 기본 아이콘으로 만들어 볼 것입니다.

 

1.PNG

위의 화면과 같이 ‘C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark‘ 로 이동하시면 위와같이 흰색 아이콘이 나타납니다. 우리는 About Video를 연결하는 메뉴를 만들어 볼 것입니다. applbar.feature.video.rest.png appbar.questionmark.rest.png 를 프로젝트 폴더 내로 끌어 옵니다.



2.PNG

위의 화면과 같이 두 파일을 추가하시면 됩니다. 이 프로젝트 루트 폴더에 넣는 것이 깔끔하지 못하다고 생각하신 분은 폴더를 하나 만드셔서 넣어도 됩니다.

예를들어 Images/appbar.feature.video.rest.png 처럼 말이죠.

 

 

 

 

 

 

 

3.PNG

그 다음에 중요한 것이 한가지 Build Action content로 변경하셔야 합니다. 이것을 변경하지 않으시면 아무리 해도 x 표시만 나올 것입니다. 저도 강좌를 쓰면서 실습하는데 깜빡 잊고 이 속성을 content로 변환을 안 시키고 했다가 왜 안되지 한참 고민했던 적이 있습니다. 뭔가 하나 빼먹으면 아예 자체가 안 돌아가는 것이 프로그램이고 애플리케이션입니다. 더군다나 이것은 에러메시지에도 뜨질 않으니 아예 항상 이미지파일,미디어파일 등을 프로젝트 내에서 활용할 때는 Build Action Content로 무조건 바꾸시길 바랍니다. 그래야 속 편하거든요.

 

 

4.PNG

App.xaml 파일을 열어서 위와 같이 Application Resource 하단 부분에 추가 작성해 주세요.

 

 

5.PNG

App.xaml.cs 파일을 열어주세요. 이 파일에서는 각 버튼을 클릭했을 때 어떤 이벤트가 실행될지 이곳에서 작성하면 됩니다.

 

 

6.PNG

위와 같이 작성해 주세요. About 버튼과 Video 버튼을 눌렀을 때 인터넷 바를 클릭할 때 각각 나타나는 이벤트를 작성해 주면 됩니다.

 

7.PNG

Mainpage.xaml을 여시고 상단 부분에 ApplicationBar 를 활성화 시켜주는 코드를 삽입합니다. 체크된 부분을 작성하시면 됩니다.

 

8.PNG

실행하시면 위와 같이 애플리케이션 바가 나타난다는 것을 알 수 있습니다.  오늘의 수업은 여기서 끝일까요? 아닙니다. 한가지만 더 해보고 마치도록 하겠습니다. 학창시절 선생님이 오늘은 일찍 끝낼게라고 말하셔도 결국 쉬는시간까지 수업하시는 선생님을 보는 것 같네요.

 

9.PNG

우리가 백 버튼을 누르면 어떤 행위가 일어나죠? 바로 어플리케이션 이전 화면으로 돌아가죠? 원래 백버튼이 가진 기능은 바로 이전 화면으로 돌아가는 것이었습니다. 우리는 이러한 백버튼 누름에 기능을 부여해 보도록 하겠습니다. 백버튼을 누르면 플레이하고 있는 미디어가 정지하는 것입니다.

10.PNG

위의 화면과 같이 Video에서 Default.xaml.cs 파일을 여시기 바랍니다. 이곳에서 BackKeyPress라는 이벤트를 쓰시면 됩니다.

11.PNG

위와 같이 작성해 주세요. 실행을 시키면 백버튼을 누르면 정지를 시키고 이전화면으로 이동하는것을 확인할 수 있습니다.

 

이번 강좌는 저번강좌보다는 조금 쉬우셨죠? 한템포 쉬어가는것도 나쁘지 않다고 생각합니다. 그렇다고 해서 중요하지 않은 것은 아닙니다! 애플리케이션 바는 많이 쓰이고 필수적이므로 내용을 숙지하셔야 합니다. 물론 쉬우니까 빨리 숙지하시리라 믿습니다.

 

여기서 잠깐 숙제를 또 내야 겠죠?

 

이번시간 숙제는 “Music 페이지에도 Back 버튼을 누르면 정지하게끔 하는 기능을 추가해주세요.” 입니다.

 

이것도 너무 쉽죠?

이번 시간 정말 수고 많으셨습니다.다음시간에 뵙겠습니다.

감사합니다.





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