וובמאסטר - תיכנות ובניית אתרים

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

arikp ,‏ מכללת סלע‏ ‏/‏ 17 יולי, 2011
F+
F-

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

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

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

<phone:PhoneApplicationPage
  x:Class="MorePhoneDemo.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="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 תהיה:

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

 

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

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

 

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

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

 

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

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

SupportedOrientations="PortraitOrLandscape"

 

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

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

 

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

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

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

<phone:PhoneApplicationPage
  x:Class="MorePhoneDemo.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"
  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;
      }
    }
  }
}

והתוצאה:

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

 

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

arikp, מכללת סלע

אריק פוזננסקי הוא יועץ בכיר ומרצה בסלע. הוא השלים שני תארי B.Sc. במתמטיקה ומדעי המחשב בהצטיינות יתרה בטכניון. לאריק ידע נרחב בטכנולוגיות מיקרוסופט, כולל .NET עם C#, WPF, Silverlight, WinForms, Interop, COM/ATL, C++ Win32 ו reverse engineering.
תגיות: Windows Phone‏  /  SilverLight‏  /  מדריך‏  /  פיתוח‏  /  סלולארי‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות