Terapkan sumber gaya dan tema untuk kontrol: Tutorial Pengembangan Aplikasi Windows Phone - Bagian 20

Dalam tutorial terakhir, kami belajar cara menerapkan sumber gaya dan tema ke kontrol kami. Sekarang di bagian ini dari seri tutorial kami , kami akan terus bekerja dengan gaya dan sumber daya dan belajar bagaimana menerapkan sumber daya warna pilihan kami.

Mari mulai bekerja dengan proyek yang sama yang kami buat di tutorial terakhir dengan satu tombol. Pilih tombol itu dan menuju ke jendela properti. Ketika Anda mengklik tombol panah kecil yang terletak di sebelah properti Foreground Anda akan melihat bahwa jendela kecil lain terbuka dengan ubin warna dan tab yang berbeda di atasnya. Ada empat tab kecil di jendela kecil itu yaitu Null Brush, Solid Color Brush, Gradient Brush, dan Image Brush. Secara default sudah diatur ke sikat solid dengan warna putih (RGB: 0,0,0 dan saluran alpha transparent diatur ke 255). Anda dapat memilih warna yang Anda inginkan dengan menggerakkan slider di sepanjang bar vertikal dan kemudian kursor melingkar untuk memilih warna yang tepat. Anda juga dapat memilih menggunakan iDropper yang dapat Anda gunakan warna dari alat yang tersedia. Ada banyak cara untuk mengubah warna pada sikat warna solid ini.

Begitu juga dengan Gradient Brush. Ini melakukan tugas yang sama sebagai sikat warna solid tetapi olahraga beberapa opsi tambahan. Ini memberi Anda serangkaian berhenti. Anda dapat menggunakan berhenti ini secara kreatif untuk mendapatkan warna yang berbeda di antara warna yang dipilih. Anda juga dapat mengubah tekstur warna menggunakan opsi seperti gradien horizontal dan gradien vertikal. Kuas gambar memungkinkan Anda memilih gambar sebagai sumber daya kami. Anda dapat menambahkan gambar seperti kami menambahkan gambar dalam kontrol gambar.

Untuk saat ini, gunakan brush warna gradien menggunakan stop seperti saya telah melakukannya (Lihat gambar). Sekarang jika Anda melihat jendela XAML, Anda akan melihat bahwa beberapa kode ditambahkan ke jendela XAML untuk tombol.

Sekarang misalkan, jika kita ingin menambahkan warna gradien yang sama yang kami tambahkan untuk tombol kami ke semua kontrol lain di halaman kami, bagaimana kita melakukannya? Untuk itu pergi ke properti latar depan di mana kita mengatur sikat warna gradien yang funky dan klik kanan di atasnya dan pilih "Ekstrak nilai ke sumber daya". Ini akan membuka jendela popup kecil "Create Resource". Anda dapat menamai sumber daya yang Anda inginkan atau Anda dapat meninggalkannya sebagaimana adanya. Kemudian Anda dapat memilih di mana Anda ingin menyimpannya, tergantung di mana Anda ingin menggunakan sumber daya ini. Jika Anda ingin menggunakannya pada satu halaman, pilih MainPage.xaml lain pilih App.xaml dan klik Ok.

Sekarang tarik tombol lain pada permukaan desainer dan pergi ke properti latar depan. Sekarang Anda akan menemukan sumber daya kustom kami di bawah nama sumber daya lokal. Setelah Anda mengkliknya, Anda akan melihat tombol kedua membawa warna yang sama dengan yang pertama. Bagaimana jika ada beberapa properti yang ingin kami terapkan pada kontrol kami? Kita bisa melakukannya dengan menggunakan gaya. Gaya adalah kumpulan pengatur properti. Mari kita ciptakan gaya baru sekarang. Pertama, hapus semua modifikasi yang kami lakukan di contoh terakhir dan dapatkan tombol baru untuk memulai yang baru. Sisipkan kode berikut di bawah deklarasi xmlsns.

Dalam kode ini, kami telah membuat dua properti penyetel untuk mengubah warna batas dan latar depan. Setelah ini, masuk ke kode tombol dan tambahkan kode ini:

Gaya = "{StaticResource myStyle}".

Anda akan melihat bahwa warna batas tombol dan warna latar depan berubah menjadi merah.

Sekarang jika Anda ingin untuk menerapkan gaya ini ke seluruh aplikasi Anda, potong kode di antara. Buka file App.xaml dan tempelkan di antara tag sumber daya aplikasi. Sekarang jika Anda kembali dan memeriksa tombol, Anda akan melihat tombol itu masih menampilkan warna merah.

Jadi ini semua tentang Gaya dan sumber daya di Windows Phone 7.5. Di bab berikutnya kita akan belajar tentang menavigasi antara halaman xaml.