Windows Phone | 08 November 2013
Assalamu'alaikum wr wb para blogger.
Seperti biasa, di perkuliahan ini...kami di sodorkan dengan video tutorial yang nantinya bakalan kita praktekkan. namun sebelum itu, kita akan diabsensi dengan syarat, harus ada password nya, nah..password minggu ini "Apa Buku Favorit Anda ?"..hayo apa...?..
tep...setelah mengcopy file video, kita langsung aja praktekin tu video..
okeh...dari video itu, ane akan membahas mengenai INPUT CONTROL ye...
dalam INPUT CONTROL ada 5 INPUT yang sering digunakan oleh para programer, antara lain:
1.TextBox
2.PasswordBox
3.CheckBox
4.RadioButton
5.ListBox
Nah, sekarang waktunya kita praktekkan,...seperti biasa, yang pertama kali harus kita lakukan adalah.membuka Software WP , beri NAMA_FILE dan sampai masuk ke bagian tampilan Halaman Kerjanya.
Nah, sahabat...ada tambahan sedikit ni pada kodenya..silahkan letakkan KODE dibawah ini, pada kode GRID (seperti contoh dibawah).
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="75*" />
<RowDefinition Height="75*" />
<RowDefinition Height="75*" />
<RowDefinition Height="75*" />
<RowDefinition Height="75*" />
<RowDefinition Height="75*" />
<RowDefinition Height="75*" />
<RowDefinition Height="75*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="250*" />
</Grid.ColumnDefinitions>
</Grid>
</Grid>
Kalau sudah, saatnya kita beraksi. Yang pertama kita bahas tentang :
TEXTBOX
______________
<TextBox Name="qitextBox"
Width="250"
Height="70"
Grid.Column="2"
Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
TextChanged="qitextBox_TextChanged"
/>
PASSWORDBOX
________________
<PasswordBox Name="qipassBox"
Width="250"
Height="70"
Grid.Column="2"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
PasswordChanged="qipassBox_PasswordChanged"
/>
CHECKBOX
____________
<CheckBox Name="qicheckBox"
Content="Berikan 2 Pilihan?"
Grid.Column="3"
Grid.Row="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Checked="qicheckBox_Checked"
/>
RADIO BUTTON
__________________
<RadioButton Name="qiRadioBut1"
Content="Pria"
Grid.Column="2"
Grid.Row="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
GroupName="qiGroup"
IsChecked="True"
/>
<RadioButton Name="qiRadioBut2"
Content="Wanita"
Grid.Column="2"
Grid.Row="4"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
GroupName="qiGroup"
/>
pada Radio Button, kita menggunakan GroupName, yang fungsinya untuk memilih salah satu.
LIST BOX
__________
<ListBox Name="qilistBox"
Grid.Row="5"
Grid.ColumnSpan="3"
Grid.RowSpan="2"
SelectionChanged="qilistBox_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>
yeah,,...ambil napas sebentar...
Selanjutnya kita akan menambahkan BUTTON di row ke 7 untuk memasukkan data yang ada di jenis2 input control yang sudah kita pelajari.
<Button Name="qiButton"
Content="OK"
Grid.Column="2"
Grid.Row="7"
Click="qiButton_Click"/>
Seperti biasa, pada BUTTON, kita klik 2x dan akan beralih ke menu MainPage.Xaml.cs, dan siap bercoding ria sahabat..^_^..
nah fungsi kode2 ini untuk menangkap data yang ada pada textbox,passwordbox,checkedbox,radiobutton dan listbox..
private void mButton_Click(object sender, RoutedEventArgs e)
{
string TBValue = qitextBox.Text;
string PBValue = qipassBox.Password;
bool? CBValue = qicheckBox.IsChecked;
string RBValue = "";
if (qiRadioBut1.IsChecked == true)
{
RBValue = "Pria";
}
else
{
RBValue = "Wanita";
}
ListBoxItem LBItem = (ListBoxItem)qilistBox.SelectedItem;
string LBItemValue = LBItem.Content.ToString();
}
Lalu kita tambahkan ScrollViewer diantara beberapa input control yang sudah kita buat tadi, yang fungsinya agar kita bisa menggerakkan scroll nya kearah bawah dan atas ketika di tampilan di layar sesudah kita jalankan dan kegunaan ScroolViewer ini, sangat dibutuhkan jika, banyak data yang akan kita tampilkan.
<ScrollViewer Margin="0,175,0,0"
Height="500"
VerticalScrollBarVisibility="Visible">
//Taruh disini jenis input Control yang ingin kita scroll
</ScrollViewer>
Beres deh pembahasan video kita...emang sedikit rumit sih, tapi jika ada kemauan dan usaha, pasti berhasil deh..Penasaran ..? Coba Deh..
Okeh..sekian dulu ya, pembahasan kali ini...semoga bermanfaat dan silahkan sahabat kembangkan sesuai dengan kreatifitas sahabat...
NB : Emulator lagi Error.,..jadi gak bisa nampilin Gambar...^_^
Share story
0 komentar :