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

 

안녕하세요 ^^

 

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

 

페이지 전환에 대해서 알아 보도록 하겠습니다.

 

 

 

PART 5 : DEALING WITH PAGE ORIENTATIONS 

 

 

 

자 이제 페이지 전환에 대해서 알아보기 위해서

 

 

!! 여기서 잠깐 여러분 제 강좌는 이어지는 강좌이기에

 

1탄에서 만든 프로젝트를 계속 사용합니다

 

절대 지우지마세요~~

 

 

전 시간에 만든 프로젝트에서 ADD =>New Item 선택 후 

 

Windows Phone Portrait Page 이름을

 

클릭 후 오리지날 페이지와 세컨 페이지 2개를 만들어주세요 

 

 

 

 

잘 만들어 지셨죠?

 

이제는 아래 그림 처럼 여러분이 사용하실 WMV파일을 추가 하시고

 

속성 창에서 Resource 선택해주시면 됩니다.

 

 

 

 

 

자 그럼 이제 여러분이 추가 하신 파일이 정상적으로

 

메인 XAML파일에 추가 되었는지 확인해보세요 ^^

 

 

 

<phone:PhoneApplicationPage
x:Class="BukuWinPhone7.Orientation"
...... >
<!--LayoutRoot contains the root grid where all other page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentGrid" Grid.Row="1"> <MediaElement Stretch="UniformToFill" Source="inaictaV3.wmv"/>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

 

 

 

 

자 여러분 위 XAML코드에서 회색 부분을 찾으셨나요? 만약 WMV를

 

추가하시고 없으시다면 위 회색 부분의 코드를 추가해주세요 ^^

 

그리고 또 아래 XAML코드도 있는지 확인해보세요 ^^

 

 

 

 

<phone:PhoneApplicationPage
x:Class="BukuWinPhone7.Orientation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/ｅxpression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">

 

 

자 여러분 위 코드도 찾아보셨죠?

 

그리고 정상적으로 코드가 추가되어 있으시죠?

 

그럼 이제 아래 그림에 보이는 부분에 코드를 하나더 추가 하도록

 

하겠습니다.

 

 

 

 

</Capabilities>
<Tasks> <DefaultTask Name ="_default" NavigationPage="Orientation.xaml"/>
</Tasks>
<Tokens>

 

 

 

 위 코드로 변경하셨나요? 해당 코드에 가보시면 시작하는

 

페이지를 처음에 만든 오리지날 페이지로 변경하시면됩니다

 

 

그리고 이제 정말 중요한 부분을 마지막으로

추가 하도록 하겠습니다.

 

 

오리지날 XAML.CS파일에 해당 부분을 추가적으로

 

코딩하시면 이제 완료 되게 됩니다.

 

 

 

public Orientation()
{
InitializeComponent();
this.OrientationChanged += new EventHandler<OrientationChangedEventArgs> (Orientation_OrientationChanged);
}
void Orientation_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.Landscape ||
e.Orientation == PageOrientation.LandscapeLeft ||
e.Orientation == PageOrientation.LandscapeRight)
{
TitlePanel.Visibility = System.Windows.Visibility.Collapsed;
ContentGrid.SetValue(Grid.RowSpanProperty, 2);
ContentGrid.SetValue(Grid.RowProperty, 0);
}
else
{
TitlePanel.Visibility = System.Windows.Visibility.Visible;
ContentGrid.SetValue(Grid.RowSpanProperty, 1);
ContentGrid.SetValue(Grid.RowProperty, 1);
}
}

 

 

 

 

자 여러분 위 코드를 잘 추가하셨나요?

 

그럼 이제 여러분은 페이지 전환을 하시는데 필요한 모든 부분을

 

완료 하시셨습니다 이제 가벼운 마음으로 빌드하셔서

 

아래 그림처럼 잘 움직이는 화면을 보시면 되겠습니다.

 

 

 

 

 

 

 

 

 

 

잘 되시죠? 여러분 오늘도 고생 많으셨습니다. ^^

 

 

 

조금씩 실력이 늘어가고 있으신가요?

 

도움은 많이 되고 있으신가 모르겠네요 ^^

 

 

그럼 다음 시간에는 APPLICATION BAR에 대해서

 

알아보도록 하겠습니다. 그럼 연습 많이 하세요 ^^