Orientations Landscape มุมมอง Layout ในแนวตั้งและแนวนอนบน Windows Phone

e.Orientation.ToString()

Partial Public Class MainPage
    Inherits PhoneApplicationPage

    ' Constructor
    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub PhoneApplicationPage_OrientationChanged(ByVal sender As Object, ByVal e As OrientationChangedEventArgs)

        ' (แนวตั้ง)
        ' Switch the placement of the buttons based on an orientation change.
        If (e.Orientation And PageOrientation.Portrait) = (PageOrientation.Portrait) Then

            ' Image1
            Grid.SetRow(Image1, 0)
            Grid.SetColumn(Image1, 0)

            ' buttonList
            Grid.SetRow(buttonList, 1)
            Grid.SetColumn(buttonList, 0)

            ' If not in the portrait mode, move buttonList content to a visible row and column.
        Else ' (แนวนอน)

            ' Image1
            Grid.SetRow(Image1, 0)
            Grid.SetColumn(Image1, 0)
            Grid.SetRowSpan(Image1, 2)

            ' buttonList
            Grid.SetRow(buttonList, 0)
            Grid.SetColumn(buttonList, 1)
            Grid.SetRowSpan(buttonList, 2)

        End If

    End Sub

End Class

public class MainPage : PhoneApplicationPage {
    
    //  Constructor
    public MainPage() {
        InitializeComponent();
    }
    
    private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) {
        //  (แนวตั้ง)
        //  Switch the placement of the buttons based on an orientation change.
        if (((e.Orientation && PageOrientation.Portrait) 
                    == PageOrientation.Portrait)) {
            //  Image1
            Grid.SetRow(Image1, 0);
            Grid.SetColumn(Image1, 0);
            //  buttonList
            Grid.SetRow(buttonList, 1);
            Grid.SetColumn(buttonList, 0);
            //  If not in the portrait mode, move buttonList content to a visible row and column.
        }
        else {
            //  (แนวนอน)
            //  Image1
            Grid.SetRow(Image1, 0);
            Grid.SetColumn(Image1, 0);
            Grid.SetRowSpan(Image1, 2);
            //  buttonList
            Grid.SetRow(buttonList, 0);
            Grid.SetColumn(buttonList, 1);
            Grid.SetRowSpan(buttonList, 2);
        }
    }
}

<phone:PhoneApplicationPage 
    x:Class="PhoneApp.MainPage"
    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/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape " Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    OrientationChanged="PhoneApplicationPage_OrientationChanged" >

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" ShowGridLines="True">
        
        <!--Create a 3 x 2 grid to store an title image and button layout.-->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <!-- Rows 1 -->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Grid.Column="0">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--Add an image to the grid. Ensure that the image height and width are set to 300 and 500, respectively, for this example.-->
        <!-- Rows 2 -->
        <Image x:Name="Image1" Grid.Row="1" Grid.Column="0" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Top" Source="TestImage.jpg" Height="300" Width="500"/>

        <!--Add a StackPanel with buttons to the row beneath the image.-->
        <!-- Rows 3 -->
        <StackPanel x:Name="buttonList" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" >
            <Button Content="Action 1" />
            <Button Content="Action 2" />
            <Button Content="Action 3" />
            <Button Content="Action 4" />
        </StackPanel>
        
    </Grid>
    
</phone:PhoneApplicationPage>