מדריך Windows Phone – טיפול באוריינטציה של המסך

כאשר מפתחים אפליקציות עבור Windows Phone כדאי לזכור שהמשתמש יכול לבחור להחזיר את המכשיר מוטה הצידה או אפילו הפוך. אפליקציה שתדע לזהות מצב זה ולהתאים את עצמה תאפשר חווית משתמש הרבה יותר טובה. בפרק זה נלמד כיצד להתאים את מראה האפליקציה לאופן שבו המשתמש מחזיר את המכשיר.

תמיכה במצב Portrait בלבד

כאשר אנו יוצרים אפליקציה חדשה ל Windows Phone, ברירת המחדל היא לתמוך במצב Portrait בלבד. זאת ניתן לראות ע"י התכונה SupportedOrientations שמכילה את האוריינטציות הנתמכות באפליקציה  והתכונה Orientation המכילה את האוריינטציה הנוכחית של האפליקציה.

<phone:PhoneApplicationPage
  x:Class="MorePhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >: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="Portrait"
  Orientation="Portrait"
  shell:SystemTray.IsVisible="True">
 
  <StackPanel
    Background="Transparent">
    <TextBlock
      HorizontalAlignment="Center"
      Text="Orientation Demo"
      Style="{StaticResource PhoneTextNormalStyle}" />
    <Image
      Source="/MorePhoneDemo;component/Images/Koala.jpg" />
  </StackPanel>
 
</phone:PhoneApplicationPage>

באופן זה התנהגות האפליקציה במצב Portrait תהיה:

ואילו במצב Landscape תהיה:

הערה: כדי לגרום לאמולטור של Windows Phone להסתובב, ניתן להשתמש בכפתורים הבאים:

הוספת תמיכה אוטומטית במצב Landscape

אם נציין לאפליקציה שהיא תומכת גם במצב Landscape ע"י שינוי התכונה SupportedOrientations, אז Silverlight תטפל בצורה אוטומטית בשינוי מראה האפליקציה כדי שיתאים:

SupportedOrientations="PortraitOrLandscape"

כעת נקבל את התמונה הבאה במצב Landscape:

שינוי מראה האפליקציה כתוצאה משינוי באוריינטציה

אמנם הטיפול האוטומטי של Silverlight במעבר למצב Landscape יספיק ברוב המקרים, אך ישנם מקרים שבהם נרצה לספק UI אחר לאפליקציה במצב זה. לשם כך נוכל להגיב לאירוע OrientationChanged ולבצע את השינויים הדרושים בקוד.

לדוגמא, בקוד הבא אנו נציג תמונה אחת כאשר אנו במצב Portrait ושתי תמונות במצב Landscape:

<phone:PhoneApplicationPage
  x:Class="MorePhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >: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"
  OrientationChanged="PhoneApplicationPage_OrientationChanged"
  shell:SystemTray.IsVisible="True">
  <StackPanel
    Background="Transparent">
    <TextBlock
      HorizontalAlignment="Center"
      Text="Orientation Demo"
      Style="{StaticResource PhoneTextNormalStyle}" />
    <StackPanel
      HorizontalAlignment="Center"
      Orientation="Horizontal">
      <Image
        Width="300"
        Source="/MorePhoneDemo;component/Images/Koala.jpg" />
      <Image
        x:Name="secondImage"
        Width="300"
        Visibility="Collapsed"
        Source="/MorePhoneDemo;component/Images/Penguins.jpg" />
    </StackPanel>
  </StackPanel>
</phone:PhoneApplicationPage>

להלן הקוד המופעל בעת אירוע OrientationChanged:

using System.Windows;
using Microsoft.Phone.Controls;
 
namespace MorePhoneDemo
{
  public partial class MainPage : PhoneApplicationPage
  {
    // Constructor
    public MainPage()
    {
      InitializeComponent();
    }
 
    private void PhoneApplicationPage_OrientationChanged(
        object sender, OrientationChangedEventArgs e)
    {
      if ((e.Orientation & PageOrientation.Landscape) != 0)
      {
        secondImage.Visibility = Visibility.Visible;
      }
      else
      {
        secondImage.Visibility = Visibility.Collapsed;
      }
    }
  }
}

והתוצאה: