소년포비의 Windows Phone 7 탐구생활 3탄!!

 

안녕하세요 ^^

 

소년포비입니다. 요번에는 저번에 말씀 드렸드시

 

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

 

 

 

PART 3 : PANORAMA

 

 

 

<핵심 포인트>

1. 권장 사이즈 2000px (width) x 800px (height)

2. 최대 4개의 화면을 제공

3. 파노라마에서 에니메이션 효과를 사용하지마십시요

4. 그림자 효과 방지

 

 

 

 

자 이제 PANORAMA에 대해서 알아보기 위해서

 

Windows Phone Panorama Application 이름을 클릭 후 시작하도록 하겠습니다.

 

 

 

 

 

 

 클릭하셔서 만드시면 아래 나오는 화면이 기본적으로 제공되어

 

나타나게됩니다.

 

 

 

 

 

 

보시는 봐와 같이 아주 간다해 보시이죠? 그럼 여러분 아무것도 하지마시고

 

바로 빌드해보세요 F5 를 누르셔서 일단 한번 확인해보 세요 ^^

 

 

그럼 아래 그림 처럼 나오시죠? 잘 되시죠?

 

 

 

 

위 그림처럼 잘 움직이실꺼라 생각 됩니다.

 

그럼 XAML 을 직접 보도록 하겠습니다.

 

 

 

 

<!--Panorama control-->
<controls:Panorama Title="my application">
<controls:Panorama.Background>
<ImageBrush ImageSource="PanoramaBackground.png"/>
</controls:Panorama.Background>
<!--Panorama item one-->
<controls:PanoramaItem Header="first item">
<!--Double line list with text wrapping-->
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
21
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
.....
<!--Panorama item two-->
<!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
</controls:Panorama>
The main control is Panorama, which consists

 

 

 

이것이 바로 파노라마 메인 XAML 코드 입니다.

 

지금 화면에서 한번 찾아보시죠?

 

찾으셨나요? 이녀석이 어디이 나와있는지요? ^^

 

 

위의 녀석을 수정하시면 화면에서 보이시는 이름 및 기타 다른것들을

 

변형하실수 있습니다 속성에서도 가능하지만 XMAL에서도

 

직접적으로 가능합니다. ^^

 

 

 

자 그림 이번에는 아이템을 넣는 XAML 코드를 보시겠습니다.

 

 

 

<controls:PanoramaItem Header="third item">
<ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
<sys:String>This</sys:String>
<sys:String>item</sys:String>
<sys:String>has</sys:String>
<sys:String>a</sys:String>
<sys:String>short</sys:String>
<sys:String>list</sys:String>
<sys:String>of</sys:String>
<sys:String>strings</sys:String>
<sys:String>that</sys:String>
<sys:String>you</sys:String>
<sys:String>can</sys:String>
<sys:String>scroll</sys:String>
<sys:String>up</sys:String>
<sys:String>and</sys:String>
<sys:String>down</sys:String>
<sys:String>and</sys:String>
<sys:String>back</sys:String>
<sys:String>again.</sys:String>
</ListBox>
</controls:PanoramaItem>

 

 

 

잠깐!!!
<요녀석도 추가해주세요 ^^ 잊으시면 동작이  잘 않되요 ^^>

xmlns:sys="clr-namespace:System;assembly=mscorlib"

 

바로 이부분 3개 파노라마 항목의 아이템을 수정할수 있는 코드입니다.

 

이녀석이 어디있는지 찾아보시고 해당 항목에 여러가지 코드를 추가하여

 

테스트 해보세요 ^^

 

 

 

 

자 여러분 잘 테스트 되시나요?

 빌드 하시면 위 그럼 처럼 이쁜녀석이 잘 움직이시죠 ^^

 

여러분들은 지금까지 파노라마에 대해서 배워 보셨습니다 ^^

 

기본적으로 제공을 해주기에 아주 쉽고 편하게 배워보실수 있으셨죠?

 

여기서 조금씩 변형 해보시면서 실력을 키워보세요 ^^

 

자 그럼 다음 시간에는 파노라마와 단짝인 PIVOT 에 대해서

 

알아보록 하겠습니다.