Bagikan melalui

Menggunakan kuas untuk melukis latar belakang, latar depan, dan kerangka

  • Artikel

Gunakan objek Brush untuk mengecat interior dan kerangka bentuk, teks, dan kontrol XAML, membuatnya terlihat di antarmuka pengguna aplikasi Anda.

API penting: Kelas brush

Pengantar kuas

Untuk melukis Bentuk, teks, atau bagian Kontrol yang ditampilkan di kanvas aplikasi, atur properti Isian dari properti Bentuk atau Latar Belakang dan Latar Depan kontrol ke nilai Sikat.

Berbagai jenis kuas adalah:

Kuas warna solid

SolidColorBrush melukis area dengan satu Warna, seperti merah atau biru. Ini adalah kuas yang paling mendasar. Di XAML, ada tiga cara untuk menentukan SolidColorBrush dan warna yang ditentukannya: nama warna yang telah ditentukan sebelumnya, nilai warna heksadesimal, atau sintaks elemen properti.

Nama warna yang telah ditentukan sebelumnya

Anda dapat menggunakan nama warna yang telah ditentukan sebelumnya, seperti Kuning atau Magenta. Ada 256 warna bernama yang tersedia. Pengurai XAML mengonversi nama warna menjadi struktur Warna dengan saluran warna yang benar. 256 warna bernama didasarkan pada nama warna X11 dari spesifikasi Cascading Style Sheets, Level 3 (CSS3), jadi Anda mungkin sudah terbiasa dengan daftar warna bernama ini jika Anda memiliki pengalaman sebelumnya dengan pengembangan atau desain web.

Berikut adalah contoh yang mengatur properti Isian Persegi Panjang ke warna Merah yang telah ditentukan sebelumnya.

<Rectangle Width="100" Height="100" Fill="Red" />

SolidColorBrush yang dirender

SolidColorBrush diterapkan ke Persegi Panjang

Jika Anda mendefinisikan SolidColorBrush menggunakan kode daripada XAML, masing-masing warna bernama tersedia sebagai nilai properti statis dari kelas Warna . Misalnya, untuk mendeklarasikan nilai Warna dari SolidColorBrush untuk mewakili warna bernama "Orchid", atur nilai Warna ke nilai statis Colors.Orchid.

Nilai warna heksadesimal

Anda dapat menggunakan string format heksadesimal untuk mendeklarasikan nilai warna 24-bit yang tepat dengan saluran alfa 8-bit untuk SolidColorBrush. Dua karakter dalam rentang 0 hingga F menentukan setiap nilai komponen, dan urutan nilai komponen string heksadesimal adalah: saluran alfa (opasitas), saluran merah, saluran hijau, dan saluran biru (ARGB). Misalnya, nilai heksadesimal "#FFFF0000" mendefinisikan merah buram sepenuhnya (alpha="FF", red="FF", green="00", dan blue="00").

Contoh XAML ini mengatur properti Isian Persegi Panjang ke nilai heksadesimal "#FFFF0000", dan memberikan hasil yang identik untuk menggunakan warna bernama Colors.Red.

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

Sintaksis elemen properti

Anda dapat menggunakan sintaks elemen properti untuk menentukan SolidColorBrush. Sintaks ini lebih verbose daripada metode sebelumnya, tetapi Anda dapat menentukan nilai properti tambahan pada elemen, seperti Opacity. Untuk informasi selengkapnya tentang sintaks XAML, termasuk sintaks elemen properti, lihat gambaran umum XAML dan panduan sintaks XAML.

Dalam contoh sebelumnya, kuas yang dibuat dibuat secara implisit dan otomatis, sebagai bagian dari singkatan bahasa XAML yang disarankan yang membantu menjaga definisi UI tetap sederhana untuk kasus yang paling umum. Contoh berikutnya membuat Persegi panjang dan secara eksplisit membuat SolidColorBrush sebagai nilai elemen untuk properti Rectangle.Fill. Warna SolidColorBrush diatur ke Biru dan Opacity diatur ke 0,5.

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

Sikat gradien linier

LinearGradientBrush melukis area dengan gradien yang ditentukan di sepanjang garis. Baris ini disebut sumbu gradien. Anda menentukan warna gradien dan lokasinya di sepanjang sumbu gradien menggunakan objek GradientStop. Secara default, sumbu gradien berjalan dari sudut kiri atas ke sudut kanan bawah area yang dicat kuas, menghasilkan bayangan diagonal.

GradientStop adalah blok penyusun dasar dari sikat gradien. Pemberhentian gradien menentukan warna kuas pada Offset di sepanjang sumbu gradien, ketika kuas diterapkan ke area yang dicat.

Properti Warna stop gradien menentukan warna hentian gradien. Anda dapat mengatur warna dengan menggunakan nama warna yang telah ditentukan sebelumnya atau dengan menentukan nilai ARGB heksadesimal.

Properti Offset dari GradientStop menentukan posisi setiap GradientStop di sepanjang sumbu gradien. Offset adalah ganda yang berkisar antara 0 hingga 1. Offset 0 menempatkan GradientStop di awal sumbu gradien, dengan kata lain di dekat StartPoint-nya. Offset 1 menempatkan GradientStop di Titik Akhir. Minimal, LinearGradientBrush yang berguna harus memiliki dua nilai GradientStop, di mana setiap GradientStop harus menentukan Warna yang berbeda dan memiliki Offset yang berbeda antara 0 dan 1.

Contoh ini membuat gradien linier dengan empat warna dan menggunakannya untuk melukis Persegi Panjang.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Warna setiap titik antara perhentian gradien secara linier diinterpolasi sebagai kombinasi warna yang ditentukan oleh dua pemberhentian gradien pembatas. Gambar berikut menyoroti pemberhentian gradien dalam contoh sebelumnya. Lingkaran menandai posisi hentian gradien, dan garis putus-putus menunjukkan sumbu gradien.

Diagram yang menggambarkan Gradien Berhenti 1 hingga 4 dimulai di sudut kiri atas diagram dan miring ke bawah dan ke kanan hingga mencapai sudut kanan bawah diagram.

Kombinasi warna yang ditentukan oleh dua pemberhentian gradien pembatas

Anda dapat mengubah garis di mana perhentian gradien diposisikan dengan mengatur properti StartPoint dan EndPoint menjadi nilai yang berbeda dari (0,0) default awal dan (1,1) . Dengan mengubah nilai koordinat StartPoint dan EndPoint , Anda dapat membuat gradien horizontal atau vertikal, membalik arah gradien, atau mengembun sebaran gradien untuk diterapkan ke rentang yang lebih kecil daripada area penuh yang dicat. Untuk mengembun gradien, Anda mengatur nilai StartPoint dan/atau Titik Akhir menjadi sesuatu yang berada di antara nilai 0 dan 1. Misalnya, jika Anda menginginkan gradien horizontal di mana semua pudar terjadi di bagian kiri kuas dan sisi kanan solid ke warna GradienStop terakhir Anda, Anda menentukan StartPoint (0,0) dan Titik (0.5,0)Akhir .

Menggunakan alat untuk membuat gradien

Sekarang setelah Anda mengetahui cara kerja gradien linier, Anda dapat menggunakan Visual Studio atau Blend untuk membuat gradien ini lebih mudah. Untuk membuat gradien, pilih objek yang ingin Anda terapkan gradiennya pada permukaan desain atau dalam tampilan XAML. Perluas Brush dan pilih tab Gradien Linear.

Membuat gradien linier di Visual Studio

Membuat gradien linier di Visual Studio

Sekarang Anda dapat mengubah warna hentian gradien dan menggeser posisinya menggunakan bilah di bagian bawah. Anda juga dapat menambahkan pemberhentian gradien baru dengan mengklik bilah dan menghapusnya dengan menyeret perhentian dari bilah (lihat cuplikan layar berikutnya).

Bilah di bagian bawah jendela properti yang mengontrol pemberhentian gradien

Slider pengaturan gradien

Sikat gradien radial

RadialGradientBrush digambar dalam elips yang ditentukan oleh properti Tengah, RadiusX, dan RadiusY. Warna untuk gradien mulai di tengah elips dan berakhir pada radius.

Warna untuk gradien radial ditentukan oleh perhentian warna yang ditambahkan ke properti koleksi GradientStops. Setiap perhentian gradien menentukan warna dan offset di sepanjang gradien.

Asal gradien default ke tengah dan dapat diimbangi menggunakan properti GradientOrigin.

MappingMode menentukan apakah Center, RadiusX, RadiusY, dan GradientOrigin mewakili koordinat relatif atau absolut.

Ketika MappingMode diatur ke RelativeToBoundingBox, nilai X dan Y dari tiga properti diperlakukan relatif terhadap batas elemen, di mana (0,0) mewakili kiri atas dan (1,1) mewakili kanan bawah batas elemen untuk properti Tengah, RadiusX, dan RadiusY dan (0,0) mewakili pusat untuk properti GradientOrigin.

Ketika MappingMode diatur ke Absolute, nilai X dan Y dari tiga properti diperlakukan sebagai koordinat absolut dalam batas elemen.

Contoh ini membuat gradien linier dengan empat warna dan menggunakannya untuk melukis Persegi Panjang.

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Warna setiap titik antara pemberhentian gradien diinterpolasi secara radial sebagai kombinasi warna yang ditentukan oleh dua pemberhentian gradien pembatas. Gambar berikut menyoroti pemberhentian gradien dalam contoh sebelumnya.

Cuplikan layar gradien radial.

Perhentian gradien

Kuas gambar

ImageBrush melukis area dengan gambar, dengan gambar untuk dicat yang berasal dari sumber file gambar. Anda mengatur properti ImageSource dengan jalur gambar yang akan dimuat. Biasanya, sumber gambar berasal dari item Konten yang merupakan bagian dari sumber daya aplikasi Anda.

Secara default, ImageBrush membentangkan gambarnya untuk sepenuhnya mengisi area yang dicat, mungkin mendistorsi gambar jika area yang dicat memiliki rasio aspek yang berbeda dari gambar. Anda dapat mengubah perilaku ini dengan mengubah properti Stretch dari nilai default Isi dan mengaturnya sebagai None, Uniform, atau UniformToFill.

Contoh berikutnya membuat ImageBrush dan mengatur ImageSource ke gambar bernama licorice.jpg, yang harus Anda sertakan sebagai sumber daya di aplikasi. ImageBrush kemudian mengecat area yang ditentukan oleh bentuk Elips.

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

ImageBrush yang dirender.

ImageBrush yang dirender

ImageBrush dan Image mereferensikan file sumber gambar oleh Uniform Resource Identifier (URI), di mana file sumber gambar tersebut menggunakan beberapa kemungkinan format gambar. File sumber gambar ini ditentukan sebagai URI. Untuk informasi selengkapnya tentang menentukan sumber gambar, format gambar yang dapat digunakan, dan mengemasnya dalam aplikasi, lihat Gambar dan ImageBrush.

Kuas dan teks

Anda juga dapat menggunakan kuas untuk menerapkan karakteristik penyajian ke elemen teks. Misalnya, properti Latar Depan TextBlock mengambil Brush. Anda dapat menerapkan salah satu kuas yang dijelaskan di sini ke teks. Namun, berhati-hatilah dengan kuas yang diterapkan pada teks, karena latar belakang apa pun mungkin membuat teks tidak dapat dibaca jika Anda menggunakan kuas yang berdarah ke latar belakang. Gunakan SolidColorBrush untuk keterbacaan elemen teks dalam banyak kasus, kecuali jika Anda ingin elemen teks sebagian besar dekoratif.

Bahkan ketika Anda menggunakan warna solid, pastikan bahwa warna teks yang Anda pilih memiliki kontras yang cukup dengan warna latar belakang kontainer tata letak teks. Tingkat kontras antara latar belakang latar depan teks dan kontainer teks adalah pertimbangan aksesibilitas.

WebViewBrush

WebViewBrush adalah jenis kuas khusus yang dapat mengakses konten yang biasanya dilihat dalam kontrol WebView. Alih-alih merender konten di area kontrol WebView persegi panjang, WebViewBrush melukis konten tersebut ke elemen lain yang memiliki properti jenis Brush untuk permukaan render. WebViewBrush tidak sesuai untuk setiap skenario kuas, tetapi berguna untuk transisi WebView. Untuk informasi selengkapnya, lihat WebViewBrush.

XamlCompositionBrushBase

XamlCompositionBrushBase adalah kelas dasar yang digunakan untuk membuat kuas kustom yang menggunakan CompositionBrush untuk melukis elemen UI XAML.

Ini memungkinkan interoperaksi "drop down" antara lapisan Windows.UI.Xaml dan Windows.UI.Composition seperti yang dijelaskan dalam gambaran umum Visual Layer.

Untuk membuat kuas kustom, buat kelas baru yang mewarisi dari XamlCompositionBrushBase dan terapkan metode yang diperlukan.

Misalnya, ini dapat digunakan untuk menerapkan efek pada UIElements XAML menggunakan KomposisiEffectBrush, seperti GaussianBlurEffect atau SceneLightingEffect yang mengontrol sifat reflektif UIElement XAML saat dinyalakan oleh XamlLight.

Untuk contoh kode, lihat XamlCompositionBrushBase.

Sikat sebagai sumber daya XAML

Anda dapat mendeklarasikan kuas apa pun untuk menjadi sumber daya XAML kunci dalam kamus sumber daya XAML. Ini memudahkan untuk mereplikasi nilai kuas yang sama seperti yang diterapkan pada beberapa elemen dalam UI. Nilai kuas kemudian dibagikan dan diterapkan ke kasus apa pun di mana Anda mereferensikan sumber daya kuas sebagai penggunaan {StaticResource} di XAML Anda. Ini termasuk kasus di mana Anda memiliki templat kontrol XAML yang mereferensikan kuas bersama, dan templat kontrol itu sendiri adalah sumber daya XAML yang dikunci.

Kuas dalam kode

Jauh lebih khas untuk menentukan kuas menggunakan XAML daripada menggunakan kode untuk menentukan kuas. Ini karena kuas biasanya didefinisikan sebagai sumber daya XAML, dan karena nilai kuas sering kali merupakan output alat desain atau sebagai bagian dari definisi XAML UI. Namun, untuk kasus sesekali di mana Anda mungkin ingin menentukan kuas menggunakan kode, semua jenis Brush tersedia untuk instans kode.

Untuk membuat SolidColorBrush dalam kode, gunakan konstruktor yang mengambil parameter Warna. Berikan nilai yang merupakan properti statis dari kelas Warna , seperti ini:

SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);

Dim blueBrush as SolidColorBrush = New SolidColorBrush(Windows.UI.Colors.Blue)

Windows::UI::Xaml::Media::SolidColorBrush blueBrush{ Windows::UI::Colors::Blue() };

blueBrush = ref new SolidColorBrush(Windows::UI::Colors::Blue);

Untuk WebViewBrush dan ImageBrush, gunakan konstruktor default lalu panggil API lain sebelum Anda mencoba menggunakan kuas tersebut untuk properti UI.

  • ImageSource memerlukan BitmapImage (bukan URI) saat Anda menentukan ImageBrush menggunakan kode. Jika sumber Anda adalah aliran , gunakan metode SetSourceAsync untuk menginisialisasi nilai. Jika sumber Anda adalah URI, yang menyertakan konten di aplikasi Anda yang menggunakan skema ms-appx atau ms-resource , gunakan konstruktor BitmapImage yang mengambil URI. Anda mungkin juga mempertimbangkan untuk menangani peristiwa ImageOpened jika ada masalah waktu dengan mengambil atau mendekode sumber gambar, di mana Anda mungkin memerlukan konten alternatif untuk ditampilkan hingga sumber gambar tersedia.
  • Untuk WebViewBrush, Anda mungkin perlu memanggil Redraw jika Anda baru saja mengatur ulang properti SourceName atau jika konten WebView juga sedang diubah dengan kode.

Untuk contoh kode, lihat WebViewBrush, ImageBrush, dan XamlCompositionBrushBase.