tutorial xaml sintaks, layout control, Silver light event handler, input control | Windows Phone | 08 November 2013

Assalamu'alaikum warahmatullahi wabarakaatuh

Okeh saya akan membahas mengenai "xaml sintaks", seperti kita ketahui pada tutorial sebelumnya kita sering menggunakan xaml, karna pada windows phone menggunakan xaml sintaks. yaa untuk mempersingkat waktu mari kalian buat new project. beri nama "XamlSintaks", nah mari saya akan sedikit menjelaskan tentang xaml sintaks, pada MainPage.xaml ada di bagian atas code seperti ini x:Class="XamlSintaks.MainPage" itu adalah "Mainpage" sebuah class, dan "XamlSintaks" adalah nama namespace atau nama project yang barusan kita buat. akan secara otomatis nama tersebut akan sama dengan file MainPage.xaml.cs karna kalau beda maka tidak akan bisa terhubung antara file MainPage.xaml dengan MainPage.xaml.cs. nah kemudian ada sintaks                                                     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"
apakah maksud dari kode tersebut? jadi maksudnya adalah sama halnya dengan "Using" ini telah saya bahas pada tutorial sebelumnya, jadi anda tidak perlu khawatir untuk menuliskan kode ini, karna secara default akan ada pada file MainPage.xaml lalu bagaimana dengan ini? 
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
"d" itu sama dengan kode ini
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
memakai blend, nanti kita akan menggunakan microsoft blend untuk merubah tampilan, lalu ada Width dan Height itu jika kita ubah akan berpengaruh pada kompiler aplikasi kita. lalu ada kode ini
SupportedOrientations="Portrait" Orientation="Portrait"
maksud "SupportedOrientations" adalah orientasi yang aplikasi suport ini hanya potrait saja, dan maksud dari "Orientation" adalah default tampilan saat aplikasi di running. contohnya seperti ini

ya seperti ini, ini merupakan defaulnya saat tampilan pertama aplikasi yang akan kita buat, ketika devicenya di miringkan, jika "SupportedOrientations" nya hanya potrait maka akan seperti ini

nah jadi tulisannya akan seperti ini. lalu kode ini apa?

shell:SystemTray.IsVisible="True">

jika ini true maka akan muncul seperi tampilan sinyal pada kompiler kita, kalau bernilai false, tidak akan muncul tampilan tersebut. lalu kita coba masukan kode ini

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

nah akan muncul seperti itu jadi tampilannya bisa potrait juga bisa landscape.

sekarang kita masuk ke tutorial layout control, hal ini sangat dibutuhkan karna ini menentukan user experience dalam aplikasi, kalau kita ibaratkan dengan web para developer menggunakan css. okeh kita akan mulai dengan new project, dan beri nama "LayoutControl", nah disini saya akan menjelaskan beberapa point:

- Grid

- Stack Panel

- Canvas 

disini saya akan coba masukan element canvas, kalian cari di toolbox. kita akan bermain di margin, yah.. setelah kalian tambahkan canvas pada device coba geserkan ke kanan dan ke kiri, itu akan membuat marginnya berubah-ubah. kalau di device saya 

tidak ada tulisan margin berapanya, jadi bisa kita lihat di codingnya, mengapa ada tanda panah ke kiri dan kebawah? sedangkan ke atas dan ke kanan tidak ada? karna di kode itu ada

HorizontalAlignment="Left"

VerticalAlignment="Bottom"

inilah yang membuat seperti itu, jika kita ubah dari Left ke Right sedangkan dari bottom ke top, akan berbeda lagi arah panahnya. lalu bagaimana jika kita mau menampilkan semuanya? caranya gampang, tinggal kita ganti dari Left menjadi Stretch dan dari bottom menjadi Stretch juga. akan tampil seperti ini,

nah seperti ini. sekarang mari kita hapus canvas yang tadi kita buat, dan saya akan sedikit menjelaskan tentang kode

  <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

saya akan menambahkan element baru namanya Grid, disini saya gunakan Stretch supaya Grid ini berada di tengah lalu marginnya gunakan 0 semuanya supaya berada tepat ditengah-tengah caranya seperti ini 

grid tersebut akan secara otomatis, ke tengah-tengah lalu masukan kode ini pada grid yang telah anda buat

<Grid.RowDefinitions>  

                  <Grid.RowDefinitions Height="60"/>

                  <Grid.RowDefinitions Height="60*"/>

 </Grid.RowDefinitions>

 <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="100*"/>

                    <ColumnDefinition Width="100" />

 </Grid.ColumnDefinitions>

jika berhasil, maka akan keluar seperti ini

sama seperti kita membuat table sih, tapi yang ini lumayan membingungkan. lalu bagaimana jika kita mau menambahkan bottom di dalam grid tersebut?

tinggal ketikan code bottom di dalam grid tersebut dan ingat, kita akan masukan buttom dimana? apakah di row 2 colomn 1 apa dimana? nah nanti jangan lupa masukan kita akan masukan buttom dimananya. nah cukup sekian, InsyaAllah pembahasannya akan dilanjutkan lagi karna berhubung saya ada tugas lagi, wassalamu'alaikum warahmatullahi wabarakaatuh...