[Windows Phone] 頁面轉向

這篇文章主要是示範如何在 Windows Phone 應用程式中讓原本直式的頁面,轉向時也能換成橫的頁面。

前言

這篇文章主要是示範如何在 Windows Phone 應用程式讓原本直式的頁面,轉向時也能換成橫的頁面。

 

實作

step1 建立專案

map

 

step2 設計畫面

13

XAML 的程式碼如下:

將原本雙引號內的 Portrait 改為 PortraitOrLandscape 表示頁面可以是直式或橫式

 

 SupportedOrientations="PortraitOrLandscape"  Orientation="Portrait"
    OrientationChanged="PhoneApplicationPage_OrientationChanged" 
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions >
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="img" HorizontalAlignment="Center"  Source="1.jpg" Grid.Row="0" Grid.Column="0" Height="200" Width="400" Stretch="Fill"  />
            <StackPanel x:Name="bl" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" >
                <Button Content="Button1"/>
                <Button Content="Button2"/>

           </StackPanel>
           
        </Grid>

 

step 3 MainPage.xaml.cs 的程式碼如下:

  public MainPage()
        {
            InitializeComponent();
        }
        private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
            {
                Grid.SetRow(bl, 1);
                Grid.SetColumn(bl, 0);
            }
            else
            {
                Grid.SetRow(bl, 0);
                Grid.SetColumn(bl, 1);
            }

        }

 

結果

左圖為手機拿直式時的畫面,右圖為手機拿橫式時的畫面。

      

 

相關參考與引用

SupportedPageOrientation Enumeration