Orientasi Device Pada Windows Phone

Device yang mendukung Windows Phone memiliki kemampuan untuk mengetahui perubahan orientasi device , dari Portrait menjadi Landscape atau sebaliknya. Dengan demikian , kita pun dapat menyesuaikan bagaimana layout aplikasi beradaptasi dengan kedua mode tersebut. Tapi apakah hal tersebut sesuatu yang menjadi sebuah keharusan ? Tentunya tidak. Kita pun dapat memilih untuk tidak menangani orientasi halaman pada Windows Phone dengan akibat memberikan user experience yang kurang baik bagi para pengguna. Akan tetapi, sadarilah sifat pengguna aplikasi yang harus kita pahami betul adalah bahwa mereka ingin dimengerti tanpa mereka perlu memberi tahu. So, they choose apps that can adapt with them not vice versa.

Orientasi terdapat pada level Page property sehingga pengaturan ini harus kita lakukan untuk setiap halaman yang artinya, kita dapat menentukan halaman apa saja yang dapat beradapasi dengan kondisi orientasi device. Agar dapat mendukung kedua orientasi tersebut yang perlu kita lakukan adalah mengatur agar atribut SupportedOrientations pada PhoneApplicationPage menjadi PortraitOrLandscape. Untuk meng-cover bagaimana membuat sebuah project menggunakan Windows Phone silahkan menuju link berikut ini oleh Scott Gu, pembahasan yang cukup jelas sehingga kita tidak akan melakukan duplikasi untuk itu.

Sekarang akan kita lihat opsi apa yang dapat digunakan untuk menangani perubahan orientasi pada device .

Cara 1 : Grid Layout

1. Buatlah sebuah project, ubahlah halaman MainPage.xaml menjadi seperti dibawah ini. Yang kita lakukan pada dasarnya adalah membuat sebuah berukuran grid 2×2. Dengan menggunakan grid, kita dapat mendefinsikan jumlah baris dan kolom yang dapat digunakan (seperti halnya table) dan dapat mendefinisikan sebuah kontrol akan menempati sel mana dan apakah melakukan spanning pada sel-sel disekitarnya.

image

   1: <Grid x:Name="LayoutRoot" Background="Transparent">

   2:        <Grid.RowDefinitions>

   3:            <RowDefinition Height="Auto"/>

   4:            <RowDefinition Height="*"/>

   5:        </Grid.RowDefinitions>

   6:

   7:        <!--TitlePanel contains the name of the application and page title-->

   8:        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

   9:            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"                     Style="{StaticResource PhoneTextNormalStyle}"/>

  10:            <TextBlock x:Name="PageTitle" Text="grid layout" Margin="9,-7,0,0"                     Style="{StaticResource PhoneTextTitle1Style}"/>

  11:        </StackPanel>

  12:        <Grid Grid.Row="1">

  13:            <Grid.RowDefinitions>

  14:                <RowDefinition Height="Auto"/>

  15:                <RowDefinition Height="*"/>

  16:            </Grid.RowDefinitions>

  17:            <Grid.ColumnDefinitions>

  18:                <ColumnDefinition Width="Auto"/>

  19:                <ColumnDefinition Width="*"/>

  20:            </Grid.ColumnDefinitions>

  21:            <Image Source="phpiis.png" Grid.ColumnSpan="2"                       Grid.Row="0" Grid.Column="0"></Image>

  22:            <StackPanel x:Name="ButtonPanel" Grid.Column="0"                        Grid.ColumnSpan="2" Grid.Row="1">

  23:                <Button Content="Grayscale"></Button>

  24:                <Button Content="Sephia"></Button>

  25:                <Button Content="Binarization"></Button>

  26:            </StackPanel>

  27:        </Grid>

  28:    </Grid>

2. Untuk menangkap perubahan lakukan modifikasi pada file MainPage.xaml.cs dan tambahkan event handler OrientationChanges
   1: public MainPage()

   2:         {

   3:             InitializeComponent();

   4:             this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);

   5:

   6:         }

   7:

   8:         void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)

   9:         {

  10:             if(e.Orientation  ==  PageOrientation.Portrait ||

  11:                 e.Orientation == PageOrientation.PortraitUp)

  12:             {

  13:                 Grid.SetRow(image, 0);

  14:                 Grid.SetColumn(image, 0);

  15:                 Grid.SetColumnSpan(image,2);

  16:                 Grid.SetRowSpan(image, 1);

  17:

  18:                 Grid.SetRow(ButtonPanel, 1);

  19:                 Grid.SetColumn(ButtonPanel,0);

  20:                 Grid.SetColumnSpan(ButtonPanel, 2);

  21:                 Grid.SetRowSpan(ButtonPanel, 1);

  22:             }

  23:             else

  24:             {

  25:                 Grid.SetRow(image, 0);

  26:                 Grid.SetColumn(image, 0);

  27:                 Grid.SetRowSpan(image, 2);

  28:                 Grid.SetColumnSpan(image, 1);

  29:

  30:                 Grid.SetRow(ButtonPanel, 0);

  31:                 Grid.SetColumn(ButtonPanel, 1);

  32:                 Grid.SetRowSpan(ButtonPanel, 2);

  33:                 Grid.SetColumnSpan(ButtonPanel, 1);

  34:             }

  35:         }

3. Tekan F5 dan perhatikan hasilnya.

Portrait.

image

dan landscape

image

Cara 2 :Stack Panel Layout

Salah satu teknik lain yang dapat kita gunakan untuk mengimplementasikan layout yang dapat beradaptasi dengan orientasi device dengan sederhana dan tanpa kode adalah menggunakan StackPanel. Dengan StackPanel, maka pada saat runtime secara otomatis seluruh elemen yang terdapat di dalamnya diatur mengikuti orientasi pada device. Teknik ini cocok jika kita mengembangkan aplikasi yang menampilkan sejumlah data sejenis pada sebuah stack panel.

1. Sebagai contoh, tambahkan kode XAML berikut ini pada halaman utama.

   1: <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

   2:       <StackPanel >

   3:           <TextBlock Text="Halo my name is windows phone!" TextWrapping="Wrap"></TextBlock>

   4:          <Button HorizontalAlignment="Left" Content="Grayscale"></Button>

   5:           <Button HorizontalAlignment="Center" Content="Sephia"></Button>

   6:           <Button HorizontalAlignment="Right" Content="Binarization"></Button>

   7:           <Image x:Name="image" Source="phpiis.png" Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0"></Image>

   8:       </StackPanel>

   9:       </ScrollViewer>

2. Tekan F5 dan perhatikan hasilnya.

image image

Perhatikan ketika orientasi berubah menjadi landscape dan elemen melebihi screen, secara otomatis scroller akan muncul. Penggunaan ScrollViewer dan StackPanel sangat memudahkan programmer karena penanganan layout ditangani secara otomatis . Hal ini menjadi kemampuan internal kedua kontrol tersebut.

Cara 3 : Memanfaatkan Visual State

Cara terakhir yang dapat digunakan untuk melakukan penanganan orientasi device adalah dengan menyediakan sejumlah visual state yang berbeda untuk setiap orientasi. Jika dibandingkan dengan dua cara sebelumnya, cara visual state ini cenderung lebih spesifik dalam artian terdapat sejumlah layout yang spesifik dan konten yg ditampilkan diketahui. Sebagai contoh dibawah ini digunakan sebuah lingkaran yang ditempatkan di bagian tengah aplikasi.

image

Selanjutnya definisikan visual state untuk setiap orientasi dengan menggunakan VisualStateManager. Melakukan hal ini dengan menggunakan Expression Blend (WYSIWYG) akan menjadi lebih mudah karena sudah mendukung visual state management dan animasi. Contoh dibawah ini adalah untuk menggerakkan bola tetap berada di tengah lingkuaran.

   1: <VisualStateManager.VisualStateGroups>

   2:       <VisualStateGroup x:Name="OrientationStates">

   3:           <!--Portrait up is the default state-->

   4:           <VisualState x:Name="PortraitUp">

   5:               <Storyboard/>

   6:           </VisualState>

   7:

   8:           <!--Landscape Right-->

   9:           <VisualState x:Name="LandscapeRight">

  10:               <Storyboard>

  11:                   <DoubleAnimation Storyboard.TargetName="circle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="170" />

  12:                   <DoubleAnimation Storyboard.TargetName="circle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" To="-130" />

  13:

  14:               </Storyboard>

  15:           </VisualState>

  16:

  17:           <!--Landscape Left-->

  18:           <VisualState x:Name="LandscapeLeft">

  19:               <Storyboard>

  20:                   <DoubleAnimation Storyboard.TargetName="circle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="170" />

  21:                   <DoubleAnimation Storyboard.TargetName="circle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" To="-130" />

  22:               </Storyboard>

  23:           </VisualState>

  24:       </VisualStateGroup>

  25:   </VisualStateManager.VisualStateGroups>

Tambahkan event handler pada saat orientasi device berubah.

   1: void MainPage2_OrientationChanged(object sender, OrientationChangedEventArgs e)

   2: {

   3:     // Switch the position of the buttons.

   4:     VisualStateManager.GoToState(this, e.Orientation.ToString(), true);

   5: }

Here we go :

image image

Terlampir kode aplikasi sederhana ini untuk eksperimen bagi yang berminat

http://cid-3543a916eed05fb8.office.live.com/embedicon.aspx/MIC-ITB%20Activities/OrientationApps.zip

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s