Windows Phone 8 November 2013 - Layout Control
Secara default Layout Control ada tiga yaitu
-
Grid
-
Stack Panel
-
Canvas
Ketiga element diatas merupakan element layout control.
Siapkan project baru beri saja nama project tersebut dengan
LayoutControl. Drag element Canvas.
Pada dasarnya contol sebuah element seperti Buttom dan yang
lainnya terdapat pada sebuah scrip atau coding. Seperti yang terlihat pada
gambar di atas, ini adalah contoh element Canvas yang kita drag tadi.
Untuk memahaminya di butuhkan sedikit percobaan pada scip
diatas. Scrip diatas aka nada jika kita sudah mendrag element canvas.
Sedikit percobaan ubah nilai Heigth, ubah
HorizontalAlignment menjadi left atau yang lainnya silakan di uji coba dan
lihat perubahannya.
Selanjutnya hapus saja Canvas jika sudah mendapat pencerahan.
Selanjutnya kita akan berpindah pada element Grid. Langsung saja drag elemnt
grid pada toolsbox pada visual studio kita..
Dan tambahkan scrip ini pada grid..
<Grid.RowDefinitions>
<RowDefinition Height="60*" />
<RowDefinition Height="60*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*" />
<ColumnDefinition Width="100*" />
</Grid.ColumnDefinitions>
Dan lihatlah perubahannya…
Selain membuat grid seperti tambahan scrip diatas kita juga
bisa menambahkan grid seperti gambar di bawah ini. Atur grid sesuai gambar…
Klik tanda ‘…’ maka akan muncul gambar dibawah ini…
Dan selanjutnya jika ingin menambahkan row langsung saja add
dan beri nilai row tersebut.
Tujuan layout dari grid tersebut adalah untuk mengatur agar
Buttom atau element yang lainnya tersusun rapi. Contohnya seperti table jika di
desain web, atau css-nya gitu deh.
Ok sekarang kita masuk ke pembahasan selanjutnya yaitu tentang Silverlight Event Handler
Event Handler adalahsebuah system yang menjebatani antara
user dan aplikasi. Jadi apa yang user lakukan akan di tangkap oleh Event
Handler ini.
Gambar di atas yang telah di lingkarin merah itulah
eventhandler. Kita bisa menggunakan Event Handler melalui properties atau juga
langsung melalui coding.
selanjutnya lagi kita beralih ke pembahasan tentang Input Control
Seperti biasa kita buat project baru, kita beri nama
InputControl. Ok selanjutnya kita akan membuat GridRowDefinition melalui
coding….
Nah seperti ini yang kita buat terdiri dari 7 row dan 3
colums.
Lalu tambahkan Input Control TextBox
<TextBox Grid.Column="2"
Height="70"
HorizontalAlignment="Stretch"
Margin="22,6,0,0"
Name="mytextbox"
Text="TextBox"
VerticalAlignment="Stretch"
TextChanged="mytextbox_TextChanged"
Width="250" />
Selanjutnya tambahkan element – element lainnya seperti
dibawah ini …
<PasswordBox Grid.Column="2"
Grid.Row="1"
Height="70"
HorizontalAlignment="Stretch"
Name="mypass"
VerticalAlignment="Stretch"
Width="250"
Margin="25,8,-3,8"
PasswordChanged="mypass_PasswordChanged" />
<CheckBox Grid.Row="2"
Height="72"
HorizontalAlignment="Stretch"
Margin="9,7,0,0"
Name="mycheckbox"
VerticalAlignment="Stretch"
Content="Ar you sure you want to do this ?"
Grid.ColumnSpan="3" Width="441"
Checked="mycheckbox_Checked" />
<RadioButton Content="Male"
Grid.Column="2"
Grid.Row="3"
Height="72"
HorizontalAlignment="Stretch"
Name="radioButton1"
VerticalAlignment="Stretch"
Margin="10,10,0,0"
GroupName="mygroup"
IsChecked="True"
/>
<RadioButton Content="Female"
Grid.Column="2"
Grid.Row="4"
Height="72"
HorizontalAlignment="Stretch"
Margin="9,8,59,0"
Name="radioButton2"
VerticalAlignment="Stretch"
Width="204"
GroupName="mygroup"
/>
<ListBox Name="mylistbox"
Grid.ColumnSpan="3"
Grid.Row="5"
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>
dan jika semua elemt sudah di
tambahkan, dan jika semua pengaturan atau coding sudah benar maka interface-nya
akan seperti gambar di bawah ini…
Dan langsung jalankan untuk melihat
apakah program yang kita buat tidak error
Oh iya jangan lupa tambahkan element Buttom
<Button Content="OK"
Grid.Column="2"
Grid.Row="7"
Height="72"
HorizontalAlignment="Stretch"
Margin="35,108,24,35"
Name="mybuttom"
VerticalAlignment="Stretch"
Click="mybuttom_Click"
/>
Nah selanjutnya double klik pada element Buttom
private void
mybuttom_Click(object sender, RoutedEventArgs e)
{
string TBvalue = mytextbox.Text;
string PBvalue
= mypass.Password;
//bool? CBvalue = mycheckbox.Checked;
string CBvalue = "";
if (mycheckbox.IsChecked == true)
{
CBvalue = "yes";
}
else
{
CBvalue = "no";
}
string RBvalue = "";
if (radioButton1.IsChecked == true)
{
RBvalue = "Male";
}
else
{
RBvalue = "Female";
}
ListBoxItem LBItem = (ListBoxItem)mylistbox.SelectedItem;
//string LBItemValue = (string)LBItem.Content;
string LBItemValue = LBItem.Content.ToString();
}
}
}
Komentar