안녕하세요. 이동규(LiveDK) 입니다.
지난 포스팅([Tip] Windows Phone - 로그인 과정에서 사용자 경험 향상)에서 Windows Phone 에서 로그인 과정을 재작할때에 고려해야할 UX(사용자 경험)에 대해서 이야기 해 보았습니다. 이야기 중에서 기존의 문제점을 가장 획기적으로 고칠 수 있었던 방법은 Application Bar를 활용하는 것 이었습니다. 이번 포스팅에서는 실제로 Application Bar(이하 App Bar)를 어떻게 만들고 사용하는지에대한 방법을 이야기해 보겠습니다.
그림1. Application Bar 예제
App Bar는 기존 Windows program에서의 매뉴 또는 툴바로 이해하면 쉽습니다. 하나의 Application에서 공통적으로 사용하는 버튼 혹은 매뉴가 있다면 App Bar를 사용하는것이 좋습니다.
App Bar는 화면의 아래쪽 즉, 3개의 하드웨어버튼쪽에 위치합니다. 그림1 에서와 같이 세로 방향이건 가로 방향이건 버튼쪽에 위치하게 됩니다. 또한 최대 4개의 버튼과 매뉴를 추가 할 수 있습니다. 버튼의 경우 PNG 형식의 아이콘을 사용하게 됩니다. Microsoft에서는 몇가지 가이드 라인을 제시해주고 있습니다.
1. 48 x 48 (pixels)의 사이즈
2. 자체적으로 원형 테두리 삽입(그림1 참고)
3. 아이콘은 투명한 배경을 사용(테마에 따라 배경색이 변경되기 때문)
아이콘을 직접 제작하기란 쉽지 않습니다. 그리하여 Microsoft 에서는 개발툴을 설치하고 SDK를 설치하게되면 아래폴더에서 이미 만들어진 아이콘을 볼 수 있습니다. dark / light 가 존재 하여 테마 배경색에 맞추어 이용하시면 될 것입니다.(그림2 참고)
그림2. 샘플 아이콘 경로 및 이미지
Application Bar 는 Silverlight의 한 부분이 아니기 때문에 사용하기 위해서는 namespace를 추가해야 합니다.
코드-비하인드: using Microsoft.Phone.Shell;
XAML: xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
이번 포스팅에서는 XAML 에서 활용하는 방법으로 설명하겠습니다. 아래 코드1 과 같이
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="DK Menu"/>
<shell:ApplicationBarMenuItem Text="about DK"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
코드1. XAML에서의 Application Bar 생성
코드1 에서 보았듯이 중요한 두개의 클래스가 있습니다. 해당하는 작업을 윈한다면 Click 이벤트를 주어 코드-비하인드에서 작업 하면 되겠습니다.
ApplicationBarIconButton 버튼을 생성하고 아이콘 및 Click 이벤트
ApplicationBarMenuItem 매뉴아이템을 생성하고 Click 이벤트
※ApplicationBarIconButton 에서 챙겨야할 부분이 있습니다. 바로 IconUri 입니다. 프로젝트에 Images 폴더를 만들고 해당하는 PNG 아이콘 파일을 추가하고 코드1 과 같이 작성후 실행하게 되면 화면에는 X 표시만 나오게 됩니다. Application Bar가 스마트하게 이미지들을 찾아주지 못하고 있습니다. 이러한 문제를 해결하기 위해서 아이콘의 Properties 들을 수정 해줘야 합니다. (그림3 참고)
그림3. PNG Icon 설정방법
1. Solution View 에서 추가한 PNG 아이콘을 선택후 Properties창으로 이동
2. Build Action 속성을 Content 로 변경
3. Copy to Output Directory 속성을 Copy always 로 변경
이상으로 Application Bar를 만들기 위한 기본적인 내용과 챙겨야할 부분을 알아 보았습니다. 감사합니다.
참고자료
Programming Windows Phone 7 by Charles Petzold -
http://www.charlespetzold.com/phone/
Wrox.Professional.Windows.Phone.7.Application.Development -
http://bit.ly/eyot9B 
