Resume Materi 7 | 8 November 2013

Ketemu lagi dengan materi tentang windows phone yang lumayan asik untuk mencoba membuat sebuah sederhana dengan menggunakan visual studio dimana kita dapat membuat aplikasi untuk windows phone yang saat ini ikut meramaikan pasar smartphone. 

di pertemuan kali kita akan membahas tentang membaca inputan, baik itu textbox, passwordbox, checkbox, radiobutton, atau pun listbox dan kita bisa menggunakan layout untuk mengatur tampilan aplikasi yang akan kita buat agar tampilan kita lebih rapi.

cekidot ini dia codingnya gan :

<Grid x:Name = "Contentpanel1" Grid.Row = "1" Margin = "12,0,12,0">

    <Grid.RowDefinitions>

        <RowDefinition Heigh = "75" />

        <RowDefinition Heigh = "75" />

        <RowDefinition Heigh = "75" />

        <RowDefinition Heigh = "75" />

        <RowDefinition Heigh = "75" />

        <RowDefinition Heigh = "75" />

        <RowDefinition Heigh = "75" />

        <RowDefinition Heigh = "75" />

        <RowDefinition Heigh = "75" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width = "160" />

        <ColumnDefinition Width = "10" />

        <ColumnDefinition Width = "250" />

    </Grid.ColumnDefinitions>

</Grid>

Melihat dari cara penulisannya,  tentu cukup familiar, yaitu mirip dengan bahasa html, dimana ada pembuka, pasti ada penutup. Karena bahasanya adalah xml, jadi sangat mirip dengan html. Silahkan amati, skrip di atas akan menghasilkan tampilan berupa sebuah tabel dengan 8 baris dan 3 kolom. Saya yakin skrip ini sangat mudah untuk dipahami, jadi tidak perlu banyak dijelaskan.

Selanjutnya, kita akan menyisipkan beberapa komponen, tapi kita akan menyisipkannya melalui skrip, bukan langsung drad and drop dari library yang ada. 

Berikut ini adalah skrip untuk menyisipkan textBoxt:

<TextBox Name = "myTextBox"

     Width = "250"

     Height = "70"

     Grid.Column = "2"

     Grid.Row = "0"

     HorizontalAligment = "Stretch"

     VerticalAligment = "Strecth"

     TextChanged = "myTextBox_TextChanged"

     />

Setelelah skrip ini dibuat, akan tampil sebuah textBox di kolom ke-2 baris ke-0. Pada properti TextChanged kita bisa lihat bahwa kita memanggil sebuah event. Maka kita perlu membuat event tersebut dengan cara klik kanan pada nama method, kemudian klik "Navigate To Event Handler".

Catatan : Index baris dan kolom dimulai dari 0.

Kemudian tambahkan elemen-elemen lain dengan kode-kode di bawah ini:

<PasswordBox Name = "myPasswordBox"

         Width = "250"

         Height = "70"

         Grid.Column = "2"

         Grid.Row = "1"

         HorizontalAligment = "Stretch"

         VerticalAligment = "Strecth"

         PasswordChanged = "myPasswordBox_PasswordChanged"

         />

<CheckBox Name = "myCheckBox"

      Content = "Are you sure want to do this?"

      Grid.ColumnSpan = "3"

      Grid.Row = "2"

      HorizontalAligment = "Stretch"

      VerticalAligment = "Strecth"

      Checked = "myCheckBox_Checked"

      />

<RadioButton Name = "myRadioButton1"

         Content = "Male"

         Grid.Column = "2"

         Grid.Row = "3"

         HorizontalAligment = "Stretch"

         VerticalAligment = "Strecth"

         TextChanged = "myTextBoxChanged"

         GroupName = "myGroup"

         IsChecked = "True"

         />

<RadioButton Name = "myRadioButton2"

         Content = "Male"

         Grid.Column = "2"

         Grid.Row = "4"

         HorizontalAligment = "Stretch"

         VerticalAligment = "Strecth"

         TextChanged = "myTextBoxChanged"

         GroupName = "myGroup"

         />

<ListBox Name = "myListBox"

     Grid.Row = "5"

     Grid.ColumnSpan = "3"

     Grid.RowSpan = "2"

     SelectionChanged = myListBox_SelectionChanged">

    <ListBoxItem Content = "First Option" />

    <ListBoxItem Content = "Second Option" />

    <ListBoxItem Content = "Third Option" />

    <ListBoxItem Content = "Fourth Option" />

    <ListBoxItem Content = "Fifth Option" />

    <ListBoxItem Content = "Sixth Option" />

    <ListBoxItem Content = "Seventh Option" />

    <ListBoxItem Content = "Eighth Option" />

</ListBox>

<Button Name = "myButton"

    Grid.Row = "7"

    Grid.Column = "2"

    Content = "OK"

    Click= "myButton_Click" />

Ada sedikit yang perlu dijelaskan, di beberapa komponen, ada properti RowSpan dan ColumnSpan. Kode ini bertujuan untuk menggabungkan (merge) 2 cell atau lebih.

Selanjutnya, ketikkan skrip ini pada event button di file MainPage.xaml.cs untuk membaca inputan dari semua komponen yang telah kita buat.

String IBValue = myTextBox.Text;

string PBValue = myPasswordBox.Password;

String CBValue = "";

If (myCheckBox.IsChecked == true)

{

    CBValue = "Yes";

}

else

{

    CBValue = "No";

}

String RBValue = ""

If (myRadioButton1.IsChecked == true)

{

    RBValue = "Male";

}

else

{

    RBValue = "Female";

}

ListBoxItem LBItem = (ListBoxItem)myListBox.SelectionItem;

string LBItemValue - LBItem.Content.ToString();

Setelah semua selesai, coba jalankan aplikasi tersebut. Selamat mencoba!!!

NB: TB = TextBox

PB = PasswordBox

CB = CheckBox

RB = RadioButton

LB = ListBox