Sebagai bagian dari seri tutorial Windows Phone kami, sekarang kami akan belajar untuk membuat elemen UI untuk HelloPhone aplikasi. Aplikasi ini sangat sederhana. Ketika selesai, UI aplikasi akan berisi keterangan, kotak teks, dan tombol.
Untuk menggunakan aplikasi, Anda memasukkan beberapa teks ke dalam kotak teks dan kemudian, ketika Anda mengklik tombol, aplikasi menampilkan spanduk dengan teks yang Anda ketikkan. Ini akan terlihat seperti gambar berikut.
1. Dalam Penjelajah solusi, klik dua kali MainPage.xaml untuk membuka file ini di perancang.
Perancang menyediakan dua pandangan terpisah untuk mengedit file XAML, Desain dan XAML melihat. Dalam mode Desain, Anda memiliki desain emulator di mana Anda dapat menarik dan melepas kontrol dari kotak alat, serta memilih, mengubah ukuran, memindahkan, dan mengatur properti untuk kontrol yang ada. Dalam mode XAML, Anda memiliki editor markup yang memungkinkan Anda mengedit kode XAML di halaman. Anda dapat bekerja dengan salah satu mode. Anda juga memiliki mode terpisah, dengan jendela editor menampilkan kedua tampilan secara bersamaan.
2. Dalam tugas ini kami terutama berfokus pada mengedit XAML secara manual. Setelah bagian pengkodean selesai Anda dapat kembali ke tampilan desainer untuk melihat hasilnya. Anda juga dapat memiliki tampilan XAML layar penuh.
3. Di markup XAML yang dibuat oleh template aplikasi Windows Phone default, cari Kisi elemen penampung bernama LayoutRoot. Tujuannya adalah mengatur elemen-elemen di halaman. Di dalam nya RowDefinition properti, masukkan baris tambahan di antara dua baris yang ada dan atur nilainya Tinggi properti ke Mobil. Baris ini akan segera menyertakan kotak teks dan tombol.
4. Root Kisi elemen juga mengandung beberapa elemen bertingkat dengan masing-masing ditugaskan ke baris yang berbeda dari kisi luar dengan mendefinisikan a Grid.Row milik. Sekarang cari elemen Grid bernama TitleGrid dan Atur properti teks elemen blok teks pertama di dalam grid batin ke” Windows Phone 7 Series”. Demikian pula Halo telepon ditambahkan ke blok teks berikutnya.
5. Sekarang, Temukan Kisi elemen bernama ContentGrid, menetapkannya ke baris 1, yang umumnya kosong awalnya, dan tempel markup XAML berikut di dalam elemen ini.
6. Untuk melengkapi desain halaman, tambahkan baris ketiga untuk memuat spanduk dengan pesan yang dimasukkan oleh pengguna. Untuk membuat baris ini, masukkan markup XAML berikut tepat sebelum tag akhir kisi luar.
7. Klik Desain lihat dan periksa tata letak kontrol pada halaman.
Dalam tutorial kami berikutnya, kami akan belajar caranya "Tangani Acara dari Antarmuka Pengguna".
