Bagikan melalui

Panduan: Membuat Tombol dengan Menggunakan Microsoft Expression Blend

Panduan ini memandu Anda melalui proses pembuatan tombol yang disesuaikan WPF menggunakan Microsoft Expression Blend.

Penting

Microsoft Expression Blend bekerja dengan menghasilkan Extensible Application Markup Language (XAML) yang kemudian dikompilasi untuk membuat program yang dapat dieksekusi. Jika Anda lebih suka bekerja dengan XAML secara langsung, ada panduan lain yang membuat aplikasi yang sama dengan yang satu ini menggunakan XAML dengan Visual Studio daripada Blend. Lihat Membuat Tombol dengan Menggunakan XAML untuk informasi selengkapnya.

Ilustrasi berikut ini memperlihatkan tombol yang dikustomisasi yang akan Anda buat.

Tombol yang dikustomisasi yang akan Anda buat

Mengonversi Bentuk menjadi Tombol

Di bagian pertama panduan ini, Anda membuat tampilan kustom tombol kustom. Untuk melakukan ini, Anda terlebih dahulu mengonversi persegi menjadi tombol. Anda kemudian menambahkan bentuk tambahan ke templat tombol, membuat tombol tampilan yang lebih kompleks. Mengapa tidak memulai dengan tombol biasa dan menyesuaikannya? Karena tombol memiliki fungsionalitas bawaan yang tidak Anda butuhkan; untuk tombol kustom, lebih mudah untuk memulai dengan persegi panjang.

Untuk membuat proyek baru di Expression Blend

  1. Mulai Expression Blend. (Klik Mulai, arahkan ke Semua Program, arahkan ke Ekspresi Microsoft, lalu klik Microsoft Expression Blend.)

  2. Maksimalkan aplikasi jika diperlukan.

  3. Pada menu File , klik Proyek Baru.

  4. Pilih Aplikasi Standar (.exe).

  5. Beri nama proyek CustomButton dan tekan OK.

Pada titik ini Anda memiliki proyek WPF kosong. Anda dapat menekan F5 untuk menjalankan aplikasi. Seperti yang Anda harapkan, aplikasi hanya terdiri dari jendela kosong. Selanjutnya, Anda membuat persegi panjang bulat dan mengonversinya menjadi tombol.

Untuk mengonversi Persegi Menjadi Tombol

  1. Atur properti Latar Belakang Jendela ke hitam: Pilih Jendela, klik Tab Properti, dan atur properti ke BackgroundBlack.

    Cara mengatur latar belakang tombol menjadi hitam

  2. Gambar kotak seukuran tombol di Jendela: Pilih alat persegi panjang pada panel alat sebelah kiri dan tarik serta letakkan kotak tersebut ke Jendela.

    Cara menggambar persegi panjang

  3. Bulatkan sudut persegi panjang: Seret titik kontrol persegi panjang atau atur langsung properti RadiusX dan RadiusY. Atur nilai RadiusX dan RadiusY ke 20.

    Cara membuat sudut persegi panjang

  4. Ubah persegi panjang menjadi tombol: Pilih persegi panjang. Pada menu Alat , klik Tombol Buat.

    Cara membuat bentuk menjadi tombol

  5. Tentukan cakupan gaya/templat: Kotak dialog seperti berikut ini muncul.

    Kotak dialog

    Untuk Nama sumber daya (Kunci), pilih Terapkan ke semua. Ini akan membuat gaya yang dihasilkan dan templat tombol berlaku untuk semua objek yang merupakan tombol. Untuk Definisikan di, pilih Aplikasi. Ini akan membuat gaya yang dihasilkan dan templat tombol memiliki cakupan di seluruh aplikasi. Ketika Anda mengatur nilai dalam dua kotak ini, gaya tombol dan templat berlaku untuk semua tombol dalam seluruh aplikasi dan tombol apa pun yang Anda buat di aplikasi akan, secara default, gunakan templat ini.

Edit Templat Tombol

Anda sekarang memiliki persegi panjang yang telah diubah menjadi tombol. Di bagian ini, Anda akan memodifikasi templat tombol dan menyesuaikan tampilannya lebih lanjut.

Untuk mengedit templat tombol untuk mengubah tampilan tombol

  1. Masuk ke tampilan edit templat: Untuk lebih menyesuaikan tampilan tombol kami, kita perlu mengedit templat tombol. Templat ini dibuat ketika kami mengonversi persegi menjadi tombol. Untuk mengedit templat tombol, klik kanan tombol dan pilih Edit Bagian Kontrol (Templat) lalu Edit Templat.

    Cara mengedit templat

    Di editor templat, perhatikan bahwa tombol sekarang dipisahkan menjadi Rectangle dan ContentPresenter. ContentPresenter digunakan untuk menyajikan konten dalam tombol (misalnya, string "Tombol"). Persegi panjang serta ContentPresenter diletakkan di dalam sebuah Grid.

    Komponen dalam presentasi persegi panjang

  2. Ubah nama komponen templat: Klik kanan persegi panjang dalam inventori templat, ubah Rectangle nama dari "[Persegi]" menjadi "outerRectangle", dan ubah "[ContentPresenter]" menjadi "myContentPresenter".

    Cara mengganti nama komponen templat

  3. Ubah persegi panjang sehingga kosong di dalamnya (seperti donat): Pilih outerRectangle dan atur Fill ke "Transparan" dan StrokeThickness ke 5.

    Cara membuat persegi panjang kosong

    Kemudian atur Stroke ke warna apa pun templatnya. Untuk melakukan ini, klik kotak putih kecil di samping Goresan, pilih CustomExpression, dan ketik "{TemplateBinding Background}" dalam kotak dialog.

    Cara mengatur penggunaan warna templat

  4. Buat persegi panjang dalam: Sekarang, buat persegi panjang lain (beri nama "innerRectangle") dan posisikan secara simetris di bagian dalam outerRectangle . Untuk pekerjaan semacam ini, Anda mungkin ingin memperbesar tampilan agar tombol lebih besar di area pengeditan.

    Nota

    Persegi panjang Anda mungkin terlihat berbeda dari yang ada dalam gambar (misalnya, mungkin memiliki sudut bulat).

    Cara membuat persegi panjang di dalam persegi panjang lain

  5. Pindahkan ContentPresenter ke bagian atas: Pada titik ini, ada kemungkinan bahwa teks "Tombol" tidak akan terlihat lagi. Jika demikian, ini karena innerRectangle berada di atas myContentPresenter. Untuk memperbaikinya, seret myContentPresenterdi bawah innerRectangle. Reposisi persegi panjang dan myContentPresenter agar terlihat mirip dengan di bawah ini.

    Nota

    Atau, Anda juga dapat memposisikan myContentPresenter di atas dengan mengklik kanan dan menekan Kirim Maju.

    Cara memindahkan satu tombol di atas tombol lain

  6. Ubah tampilan innerRectangle: Atur RadiusXnilai , RadiusY, dan StrokeThickness ke 20. Selain itu, atur Fill ke latar belakang templat menggunakan ekspresi kustom "{TemplateBinding Background}" ) dan atur Stroke ke "transparan". Perhatikan bahwa pengaturan untuk Fill dan StrokeinnerRectangle adalah kebalikan dari pengaturan untuk outerRectangle.

    Cara mengubah tampilan persegi panjang

  7. Tambahkan lapisan kaca di atas: Bagian terakhir dari menyesuaikan tampilan tombol adalah menambahkan lapisan kaca di atasnya. Lapisan kaca ini terdiri dari persegi panjang ketiga. Karena kaca akan menutupi seluruh tombol, persegi panjang kaca memiliki dimensi yang mirip dengan outerRectangle. Oleh karena itu, buat persegi panjang hanya dengan membuat salinan outerRectangle. Sorot outerRectangle dan gunakan CTRL+C dan CTRL+V untuk membuat salinan. Beri nama persegi panjang baru ini "glassCube".

  8. Reposisi glassCube jika perlu: Jika glassCube belum diposisikan sehingga menutupi seluruh tombol, seret ke posisi.

  9. Berikan glassCube bentuk yang sedikit berbeda dari outerRectangle: Ubah properti glassCube. Mulailah dengan mengubah properti RadiusX dan RadiusY menjadi 10 serta properti StrokeThickness menjadi 2.

    Pengaturan tampilan untuk glassCube

  10. Buat glassCube terlihat seperti kaca:Fill Atur ke tampilan berkaca-kaca dengan menggunakan gradien linier yang 75% buram dan alternatif antara warna Putih dan Transparan selama 6 interval yang berjarak sekitar merata. Inilah cara untuk mengatur titik henti gradien:

    • Titik Henti Gradien 1: Putih dengan nilai Alpha 75%%

    • Berhenti Gradien 2: Transparan

    • Gradien Berhenti 3: Putih dengan nilai Alpha 75%

    • Gradien Berhenti 4: Transparan

    • Gradien Berhenti 5: Putih dengan nilai Alpha 75%

    • Gradien Berhenti 6: Transparan

    Ini menciptakan tampilan kaca "bergelombang".

    Persegi panjang yang terlihat seperti kaca

  11. Sembunyikan lapisan kaca: Sekarang setelah Anda melihat seperti apa lapisan berkaca-kaca, masuk ke panel Tampilanpanel Properti dan atur Opacity ke 0% untuk menyembunyikannya. Di bagian depan, kita akan menggunakan pemicu properti dan peristiwa untuk menampilkan dan memanipulasi lapisan kaca.

    Cara menyembunyikan persegi panjang kaca

Mengkustomisasi Perilaku Tombol

Pada titik ini, Anda telah menyesuaikan presentasi tombol dengan mengedit templatnya, tetapi tombol tidak bereaksi terhadap tindakan pengguna seperti yang dilakukan tombol umum (misalnya, mengubah tampilan saat mouse-over, menerima fokus, dan mengklik.) Dua prosedur berikutnya menunjukkan cara membangun perilaku seperti ini ke dalam tombol kustom. Kita akan mulai dengan pemicu properti sederhana, lalu menambahkan pemicu peristiwa dan animasi.

Untuk mengatur pemicu properti

  1. Buat pemicu properti baru: Dengan glassCube dipilih, klik + Properti di panel Pemicu (lihat gambar yang mengikuti langkah berikutnya). Ini membuat pemicu properti dengan pemicu properti default.

  2. Jadikan IsMouseOver properti yang digunakan oleh pemicu: Ubah properti menjadi IsMouseOver. Ini membuat pemicu properti diaktifkan ketika properti IsMouseOver adalah true (ketika pengguna menunjuk ke tombol dengan mouse).

    Cara mengatur pemicu pada properti

  3. IsMouseOver mengaktifkan kekaburan 100% untuk glassCube: Perhatikan bahwa rekaman pemicu aktif (lihat gambar sebelumnya). Ini berarti bahwa setiap perubahan yang Anda buat pada nilai properti glassCube saat rekaman aktif akan menjadi tindakan yang terjadi ketika IsMouseOver adalah true. Saat merekam, ubah OpacityglassCube menjadi 100%.

    Cara mengatur keburaman tombol

    Anda sekarang telah berhasil membuat pemicu properti pertama Anda. Perhatikan bahwa panel Pemicu editor telah merekam Opacity telah diubah menjadi 100%.

    Panel

    Tekan F5 untuk menjalankan aplikasi, dan gerakkan penunjuk mouse ke atas dan ke luar tombol. Anda harus melihat lapisan kaca muncul ketika Anda menggerakkan mouse ke atas tombol dan menghilang ketika pointer menjauh.

  4. IsMouseOver memicu perubahan nilai stroke: Mari kita kaitkan beberapa tindakan lain dengan pemicunya IsMouseOver . Saat perekaman berlanjut, alihkan pilihan Anda dari glassCube ke outerRectangle. Kemudian atur StrokeouterRectangle ke ekspresi kustom "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Ini menetapkan Stroke menjadi warna sorotan khas yang digunakan oleh tombol. Tekan F5 untuk melihat efek saat Anda menunjuk mouse di atas tombol.

    Cara mengatur goresan ke warna sorotan

  5. IsMouseOver memicu teks kabur: Mari kita kaitkan satu tindakan lagi ke properti pemicu IsMouseOver. Buat konten tombol tampak sedikit buram ketika kaca muncul di atasnya. Untuk melakukan ini, kita dapat menerapkan efek blur BitmapEffect ke ContentPresenter (myContentPresenter).

    Cara mengaburkan konten tombol

    Nota

    Untuk mengembalikan panel Properti ke kondisi semula sebelum Anda melakukan pencarian BitmapEffect, hapus teks di kotak pencarian.

    Pada titik ini, kami telah menggunakan pemicu properti dengan beberapa tindakan terkait untuk membuat perilaku penyorotan ketika penunjuk mouse memasuki dan meninggalkan area tombol. Perilaku umum lain untuk tombol adalah menyoroti ketika memiliki fokus (seperti setelah diklik). Kita dapat menambahkan perilaku tersebut dengan menambahkan pemicu properti lain untuk properti IsFocused.

  6. Buat pemicu properti untuk IsFocused: Menggunakan prosedur yang sama seperti untuk IsMouseOver (lihat langkah pertama bagian ini), buat pemicu properti lain untuk properti .IsFocused Saat perekaman pemicu sedang berjalan, tambahkan tindakan berikut ke pemicu:

    • glassCube mendapatkan nilai sebesar 100%.

    • outerRectangle diberi Stroke nilai ekspresi kustom "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

Sebagai langkah terakhir dalam panduan ini, kita akan menambahkan animasi ke tombol . Animasi ini akan dipicu oleh peristiwa—khususnya peristiwa MouseEnter dan Click.

Untuk menggunakan pemicu peristiwa dan animasi untuk menambahkan interaktivitas

  1. Buat Pemicu Peristiwa MouseEnter: Tambahkan pemicu peristiwa baru dan pilih MouseEnter sebagai peristiwa yang akan digunakan dalam pemicu.

    Cara membuat pemicu peristiwa MouseEnter

  2. Buat garis waktu animasi: Selanjutnya, kaitkan garis waktu animasi ke MouseEnter peristiwa.

    Cara menambahkan garis waktu animasi ke peristiwa

    Setelah Anda menekan OK untuk membuat garis waktu baru, Panel Garis Waktu muncul dan "Rekaman garis waktu aktif" terlihat di panel desain. Ini berarti kita dapat mulai merekam perubahan properti di garis waktu (menganimasikan perubahan properti).

    Nota

    Anda mungkin perlu mengubah ukuran jendela dan/atau panel untuk melihat tampilan.

    Panel garis waktu

  3. Buat keyframe: Untuk membuat animasi, pilih objek yang ingin Anda animasikan, buat dua atau beberapa keyframe pada garis waktu, dan untuk keyframe tersebut, atur nilai properti yang Anda inginkan untuk diinterpolasi animasi. Gambar berikut memandu Anda melalui pembuatan keyframe.

    Cara membuat keyframe

  4. Susutkan glassCube pada keyframe ini: Dengan keyframe kedua dipilih, susutkan ukuran glassCube menjadi 90% ukuran penuhnya menggunakan Transformasi Ukuran.

    Cara menyusutkan ukuran tombol

    Tekan F5 untuk menjalankan aplikasi. Pindahkan penunjuk mouse ke atas tombol. Perhatikan bahwa lapisan kaca menyusut di atas tombol.

  5. Buat Pemicu Peristiwa lain dan kaitkan animasi lain dengannya: Mari kita tambahkan satu animasi lagi. Gunakan prosedur serupa dengan apa yang Anda gunakan untuk membuat animasi pemicu peristiwa sebelumnya:

    1. Buat pemicu peristiwa baru menggunakan Click.

    2. Kaitkan garis waktu baru dengan peristiwa tersebut Click .

      Cara membuat garis waktu baru

    3. Untuk garis waktu ini, buat dua keyframe, satu pada 0,0 detik dan yang kedua pada 0,3 detik.

    4. Sorot keyframe pada 0,3 detik, dan atur Sudut Transformasi Putar menjadi 360 derajat.

      Cara membuat transformasi putar

    5. Tekan F5 untuk menjalankan aplikasi. Klik tombol . Perhatikan bahwa lapisan kaca berputar.

Kesimpulan

Anda telah menyelesaikan tombol khusus. Anda melakukan ini menggunakan templat tombol yang diterapkan ke semua tombol dalam aplikasi. Jika Anda meninggalkan mode pengeditan templat (lihat gambar berikut) dan membuat lebih banyak tombol, Anda akan melihat bahwa mereka terlihat dan bertingkah seperti tombol kustom Anda daripada seperti tombol default.

Templat tombol kustom

Beberapa tombol yang menggunakan templat yang sama

Tekan F5 untuk menjalankan aplikasi. Klik tombol dan perhatikan bagaimana mereka semua ber perilaku yang sama.

Ingat bahwa saat Anda menyesuaikan templat, Anda mengatur Fill properti innerRectangle dan Stroke properti outerRectangle ke latar belakang templat ({TemplateBinding Background}). Karena itu, ketika Anda mengatur warna latar belakang tombol individual, latar belakang yang Anda tetapkan akan digunakan untuk properti masing-masing. Coba ubah latar belakang sekarang. Dalam gambar berikut, gradien yang berbeda digunakan. Oleh karena itu, meskipun templat berguna untuk penyesuaian keseluruhan kontrol seperti tombol, kontrol dengan templat masih dapat dimodifikasi agar terlihat berbeda satu sama lain.

Tombol dengan templat yang sama tetapi memiliki tampilan berbeda

Sebagai kesimpulan, dalam proses menyesuaikan templat tombol, Anda telah mempelajari cara melakukan hal berikut di Microsoft Expression Blend:

  • Menyesuaikan tampilan kontrol.

  • Atur pemicu properti. Pemicu properti sangat berguna karena dapat digunakan pada sebagian besar objek, bukan hanya kontrol.

  • Atur pemicu peristiwa. Pemicu peristiwa sangat berguna karena dapat digunakan pada sebagian besar objek, bukan hanya kontrol.

  • Membuat animasi.

  • Lain-lain: buat gradien, tambahkan BitmapEffects, gunakan transformasi, dan atur properti dasar objek.

Lihat juga