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

Gunakan objek Brush untuk melukis 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 Isi properti Bentuk atau Latar Belakang dan Latar DepanKontrol ke nilai Kuas .

Berbagai jenis kuas adalah:

• AcrylicBrush
• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• ImageBrush
• WebViewBrush
• XamlCompositionBrushBase

Kuas warna solid

SolidColorBrush melukis area dengan satu Warna, seperti merah atau biru. Ini adalah sikat 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. Parser XAML mengonversi nama warna menjadi struktur Warna dengan saluran warna yang benar. 256 warna bernama didasarkan pada nama warna X11 dari spesifikasi Lembar Gaya Kaskading, Tingkat 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 IsianPersegi panjang ke warna Merah yang telah ditentukan sebelumnya.

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

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 Warnadari 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 dari 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 IsianPersegi 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 disengaja 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 . WarnaSolidColorBrush 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 pemberhentian gradien menentukan warna pemberhentian gradien. Anda dapat mengatur warna dengan menggunakan nama warna yang telah ditentukan sebelumnya atau dengan menentukan nilai ARGB heksadesimal.

Properti Offsetdari 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 EndPoint. 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 di antara hentian gradien diinterpolasi secara linier sebagai kombinasi warna yang ditentukan oleh dua pemberhentian gradien pembatas. Gambar berikut menyoroti perhentian gradien dalam contoh sebelumnya. Lingkaran menandai posisi hentian gradien, dan garis putus-putus menunjukkan sumbu gradien.

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 bisa membuat gradien horizontal atau vertikal, membalikkan arah gradien, atau mengembunkan penyebaran gradien untuk diterapkan ke rentang yang lebih kecil daripada area penuh yang dicat. Untuk mengembun gradien, Anda mengatur nilai StartPoint dan/atau EndPoint 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 Linier .

Membuat gradien linier di Visual Studio

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

Penggerak 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 pemberhentian warna yang ditambahkan ke properti koleksi GradientStops . Setiap pemberhentian 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.

Saat 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 Center, RadiusX, dan RadiusY dan (0,0) mewakili pusat untuk properti GradientOrigin .

Saat 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 perhentian gradien dalam contoh sebelumnya.

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 melukis area yang ditentukan oleh bentuk Elips.

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

ImageBrush yang dirender

ImageBrush dan Image keduanya mereferensikan file sumber gambar oleh Uniform Resource Identifier (URI), di mana file sumber gambar tersebut menggunakan beberapa format gambar yang mungkin. 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 DepanTextBlock mengambil Brush. Anda dapat menerapkan salah satu kuas yang dijelaskan di sini untuk teks. Namun, berhati-hatilah dengan kuas yang diterapkan pada teks, karena latar belakang apa pun mungkin membuat teks dapat tidak terbaca 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 terhadap warna latar belakang kontainer tata letak teks. Tingkat kontras antara latar depan teks dan latar belakang 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 Lapisan Visual.

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 pada 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 UI XAML. 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 . Teruskan 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 mereset properti SourceName atau jika konten WebView juga sedang diubah dengan kode.

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