Dari tutorial bagian sebelumnya, kita tambahkan kode untuk update jarum jam dengan DispatcherTimer.
DispatcherTimer digunakan agar tidak perlu lagi menambahkan kode untuk menangani masalah UI yang memiliki thread tersendiri pada aplikasi WPF (apabila menggunakan Timer biasa).
Pertama-tama tambahkan kode untuk inisialisasi sudut setiap jarum jam di konstruktor Window1 setelah inisialisasi komponen. Selanjutnya buat objek DispatcherTimer yang baru untuk mengupdate jarum jam setiap detiknya. Kita tambahkan EventHandler yang kita beri nama timer_Tick untuk event Tick. Dalam handler ini, kita update sudut dari setiap jarum jam.
Demikian tutorial membuat jam pada part 2. Semoga bermanfaat...
Pada bagian selanjutnya, kita akan menggerakkan jarum jam dengan menggunakan animasi.
User Interface (UI) yang lebih baik. Itulah salah satu nilai lebih yang dimiliki WPF. Berikut ini merupakan tutorial membuat jam sederhana dengan WPF. Dalam tutorial ini akan dipelajari bagaimana membuat elemen UI secara visual (dengan drag n drop dari toolbox dan mengubah-ubah nilai property), melalui kode XAML, dan melalui kode C#.
Karena ditujukan untuk pemula WPF (karena saya juga masih pemula ), maka akan terdapat penjelasan langkah-langkah yang cukup detail.
Sedikit pengenalan WPF. Dalam WPF, UI dan kode merupakan dua bagian yang terpisah. UI secara umum dibangun di atas kode XAML (walaupun dapat juga melalui kode). Sedangkan kode merupakan file tersendiri tergantung bahasa yang digunakan. UI dan kode yang terpisah ini mengizinkan developer dan designer dapat bekerja secara paralel yang membuat waktu pengembangan aplikasi menjadi lebih singkat. XAML menggunakan format XML yang sekarang telah banyak digunakan. Dalam file XAML, terdapat tag-tag yang mendeskripsikan elemen UI aplikasi. Elemen yang dapat dideskripsikan dalam XAML cukup banyak, meliputi bentuk-bentuk sederhana (line, rectangle, ellipse, dll), komponen seperti dalam aplikasi windows berbasis form (textbox, button, label, dll), hingga Viewport3D untuk menampilkan objek 3 dimensi dalam UI.
Pertama-tama, buka Microsoft Visual C# (yang saya gunakan Microsoft Visual C# 2008 Express Edition). Buat project baru (Ctrl + Shift + N), pilih Template WPF Application, dan beri nama Clock.
Klik tombol OK. Akan terbentuk 2 tab baru, yaitu Window1.xaml (desain UI) dan Window1.xaml.cs (kode). Secara default, akan ditampilkan tab Window1.xaml. Klik kanan pada Window1 pada layar Design, pilih Properties, kemudian ganti Title menjadi Clock.
Selanjutnya, ganti <Grid> dan </Grid> pada layar XAML (bagian bawah) yang merupakan elemen default menjadi <Canvas> dan </Canvas> karena kita hanya akan menggambar jam di dalamnya. Grid lebih diperuntukkan bila ingin menata elemen UI berdasarkan kolom dan baris.
Pilih Ellipse dari Toolbox di sebelah kiri, kemudian buat sembarang Ellipse dalam area Canvas. Ubah Canvas.Left = 40, Canvas.Top = 35, serta Height dan Width-nya menjadi 200. Dengan cara yang sama, buat sebuah Ellipse lagi dengan Canvas.Left = 35, Canvas.Top = 30, Height dan Width 210.
Selanjutnya kita akan mengedit UI melalui XAML. Kita akan menambahkan warna pada elemen-elemen yang telah dibuat. Tambahkan kode berikut ke bagian XAML.
Dua buah Ellipse yang telah kita buat, merupakan background dan highlight untuk jam. Dengan mengatur property Ellipse.Fill, ellipse1 diisi dengan gradient yang linear dari warna #555555 (Red = 0x55, Green = 0x55, Blue = 0x55) ke warna #000000 (hitam). Sedangkan ellipse2 diisi dengan gradient radial untuk effek bayangan dalam jam dan bingkai jam berwarna putih.
Selanjutnya kita akan menambahkan jarum jam. Berikut kodenya:
Kode yang ditampilkan di sini hanya untuk membuat jarum penunjuk jam, karena untuk menit dan detik pada dasarnya sama. Di sini jarum jam dibangun dari Rectangle. Rectangle dipercantik dengan menambahkan RadiusX dan RadiusY (sudutnya tidak siku-siku) dan efek drop shadow. Untuk menempatkan jarum jam pada posisi di tengah-tengah jam, dilakukan transformasi. Ada 3 buah transformasi yang perlu dilakukan:
1. Translasi untuk menempatkan sudut kiri atas Rectangle sebagai titik pusat rotasi jarum jam.
2. Rotasi yang diberi nama “hour” (agar bisa diakses dari kode C#) untuk mengatur sudut putaran jarum jam (digunakan dalam tutorial part 2).
3. Translasi untuk menempatkan pusat rotasi jarum jam di tengah-tengah bingkai jam (berdasarkan perhitungan).
Buat untuk menit dan detik dengan cara yang sama, lalu menyesuaikan ukuran dan property lainnya.
Selanjutnya kita akan menggambar penanda jam (penanda angka 1-12). Karena akan merepotkan apabila menggambar pada layar langsung (sulit mengatur posisi) dan mengedit kode XAML (kode terlalu panjang karena ada 60 elemen), maka kita akan menggambar UI melalui kode C#. Pertama-tama tambahkan elemen Canvas terlebih dahulu pada XAML seperti di bawah ini:
Kemudian tambahkan potongan kode berikut dalam kode C#.
Dalam kode ini kita membuat lingkaran dengan ukuran yang lebih besar untuk penanda setiap 5 menitnya, mentransformasikan posisinya, dan menambahkannya untuk digambar dalam Canvas cvsMarker.
Untuk melihat hasilnya, jalankan dengan menekan F5.
Demikian tutorial membuat UI jam pada part 1. Semoga bermanfaat...
Pada bagian selanjutnya, kita akan menggerakkan jarum jam.