소년포비의 Windows Phone 7 탐구생활 6탄 응용편!!

 

응용편 I : LOCAL APPLICATION BAR

 

 

전에 프로젝트에서 App.xaml에 아래 코드를 추가해주세요

 

 

 

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar x:Name="globalApplicationBar" x:Key="globalApplicationBar" Opacity="0.7">
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="Home" />
<shell:ApplicationBarMenuItem Text="Profile" />
<shell:ApplicationBarMenuItem Text="Help" />
<shell:ApplicationBarMenuItem Text="About" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

 

 

 

이렇게 추가하시면 됩니다.

 

그리고 App.xaml에 좀더 색다르게 회색부분을하나는 3개

 

하나는 4개 이렇게해서 추가해 보세요.

 

 

그리고 가볍게 빌드하시면 아래 그림 처럼 잘 나오시죠?

 

오오....신기한데 이러고 있으실꺼라 생각되네요 ^^

 

 

 

 

 

 

 

 

 

 

 

여기서 또 보너스 응용편

 

 

응용편 II : LOCAL APPLICATION BAR

 

 

 

응용편I 에 나오는 것을 좀더 멋지게 바꾸기 위해서는 인터넷에 보시면

 

윈도우폰7에서 쓰는 아이콘 http://bit.ly/i3NIzD 위 사이트에

 

가셔서 맘에 드는 이미지를 선택하여 추가해주세요 ^^

 

 

 

 

 

자 그리고 추가한 그림을 위 화면처럼 속성에서 변경해주세요 ^^

 

 

변경 다 하셨나요?

 

그럼 이제 잘 되는지 어디 한번 확인해볼까요?

 

하고 그냥 빌드 하시면 정상적으로

 

작동않합니다. 하하하.....^^

 

응용편 I에서 추가 했던 XAML부분에 아래코드로 변경하셔야

 

하셔야 정상적인 동작을 보실수 있습니다.

 

 

 

<shell:ApplicationBar x:Name="globalApplicationBar" IsMenuEnabled="True" Opacity="0.7">
<shell:ApplicationBarIconButton Text="Add" IconUri="appbar.add.rest.png"/>
<shell:ApplicationBarIconButton Text="Message" IconUri="appbar.feature.email.rest.png"/>
<shell:ApplicationBarIconButton Text="Delete" IconUri="appbar.delete.rest.png"/>
</shell:ApplicationBar>

 

 

 

위 코드를 App.xaml에 잘 변경하셨나요?

 

그리고 회색부분은 마지막에 이미지이름를 넣으시면되는거 아시죠?

 

그럼 이제 정말 F5를 누르셔서 확인하시면 됩니다.

 

 

잘 되시나요? 제가 쓴 글을 천천히 잘 읽으셨다면

 

잘 되실꺼라 생각됩니다. ^^

 

 

 

 

빌드하셔서 그림만 보셔야 됩니다 아직 다 완성 된게 아닙니다. ^^

 

하하하....성질 급하신분들은 이거 이상하네 하시겠네요 ^^

 

 

자 이제 정말 마지막 부분을 하나만 더 추가하시면 완성됩니다.

 

 

public MainPage()
{
InitializeComponent();
ApplicationBar appBar = new ApplicationBar();
appBar.IsMenuEnabled = true;
appBar.Buttons.Add(new ApplicationBarIconButton(){ Text="Add", IconUri=new Uri("appbar.add.rest.png",UriKind.Relative)});
appBar.Buttons.Add(new ApplicationBarIconButton() { Text = "Message", IconUri = new Uri("appbar.feature.email.rest.png", UriKind.Relative) });
appBar.Buttons.Add(new ApplicationBarIconButton() { Text = "Delete", IconUri = new Uri("appbar.delete.rest.png", UriKind.Relative) });
this.ApplicationBar = appBar;
}

 

 

 

위 부분을 어디에 추가하셔야 되는지 말 않해도 아시겠죠?

 

메인페이지 CS에 추가 하시면 됩니다.

 

 

자 이제 그럼 정말 빌드해서 확인해보세요 ^^

 

잘 되시요? 아니면 에러 나시나요?

 

어라...에러가 나신다면

 

 

using Microsoft.Phone.Shell;

 

위 코드를 한번 추가해보세요!!

 

 

자 여러분 아래 화면이 나오시죠? 

 

 

재미가 좀 있으신가요? 나름 재미있게 해석해서 하려고

 

노력은 하고 있으니 많은 양해 부탁드립니다.

 

좀더 쉽고 재미있게 보여지기 위해 노력하겠습니다.^^

 

그럼 이제 만든것을 또 한번 응용하겠습니다.

 

 

중앙의 버튼을 누르면 다른 이벤트가 일어나는

 

응용을 하도록 하겠습니다.

 

 

 

자 그럼 클릭 이벤트를 추가해주세요 ^^

 

어디에? CS에 생기겠죠?

 

XAML파일에는 아래 회색부분을 넣으시면됩니다.

 

 

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar x:Name="globalApplicationBar" IsMenuEnabled="True" Opacity="0.7">
<shell:ApplicationBarIconButton Text="Add" Click="ApplicationBarIconButton_Click" IconUri="appbar.add.rest.png"/>
<shell:ApplicationBarIconButton Text="Message" IconUri="appbar.feature.email.rest.png"/>
<shell:ApplicationBarIconButton Text="Delete" IconUri="appbar.delete.rest.png"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

 

 

그리고 CS에 정말 중요한 이벤트 부분을 추가해주시면 됩니다.

 

어렵지 않으시죠? 어려우시더라고

 

천천히 하나하나씩 해보시면서 하시면 잘 되실꺼라 생각됩니다.

 

 

Mainpage.xaml.cs 아래 코드를 추가 하시면 됩니다 ^^

 

 

 

InitializeComponent();
ApplicationBar appBar = new ApplicationBar();
appBar.IsMenuEnabled = true;
ApplicationBarIconButton appIcon = new ApplicationBarIconButton() { Text = "Add", IconUri = new Uri("appbar.add.rest.png", UriKind.Relative) };

appIcon.Click += new EventHandler(ApplicationBarIconButton_Click); (클릭 이벤트 부분)

appBar.Buttons.Add(appIcon);
appBar.Buttons.Add(new ApplicationBarIconButton() { Text = "Message", IconUri = new Uri("appbar.feature.email.rest.png", UriKind.Relative) });
appBar.Buttons.Add(new ApplicationBarIconButton() { Text = "Delete", IconUri = new Uri("appbar.delete.rest.png", UriKind.Relative) });
this.ApplicationBar = appBar;

 

 

 

그리고 클릭 이벤트를 하나 만들어 주셔야합니다.

 

그부분은 바로바로 중요한 이벤트 코드지요

 

메시지 박스에 내용을 호출하여 보여주는 부분이죠 ^^

 

 

 

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
  //add your functionality
  MessageBox.Show((sender as ApplicationBarIconButton).Text);
}

 

 

 

 

여기서 잠깐!!

 

만약 에러가 나신다면 위 이벤트부분을

 

App.xaml.cs쪽에도 추가해주시면 됩니다.

 

 

자 그럼 이제 빌드해서 확인해 보시면 됩니다.

 

 

아래 그림 처럼 잘 되시죠?

 

 

 

 

 

 

자 이제 이걸 가지고 또 여러분은 응용해서 사용 하시면 됩니다.

 

여러므로 쓰실때가 많은 강좌라 생각 됩니다.

 

좀더 많은 이해와 연습이 필요한 강좌이오니 많이

 

응용하여 유용있게 사용하시기 바랍니다. ^^

 

그럼 다음 시간에는 WEB SERVICE CONSUMPTION 에

 

대해서 알아 보도록 하겠습니다. ^^