Bagikan melalui

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

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

Buka aplikasi Galeri WinUI 3 dan lihat RadialGradientBrush beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Pengantar kuas

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

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. Terdapat 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 dari persegi panjang ke warna yang telah ditentukan sebelumnya Red.

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

Sebuah SolidColorBrush yang dirender

SolidColorBrush diterapkan pada Persegi Panjang

Jika Anda mendefinisikan SolidColorBrush menggunakan kode alih-alih XAML, setiap warna yang memiliki nama tersedia sebagai nilai properti statis dari kelas Colors . 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 dari Rectangle ke nilai heksadesimal "#FFFF0000", dan memberikan hasil yang identik dengan menggunakan warna bernama Colors.Red.

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

Sintaks 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 ikhtisar 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 dari properti Rectangle.Fill. Warna dari 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 mewarnai suatu 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 kuas gradasi. Hentian gradien menentukan dari Warna kuas pada Offset di sepanjang sumbu gradien, ketika kuas diterapkan ke area yang dicat.

Properti Warna dari stop gradien menentukan warna pemberhentian 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 dari 0 menempatkan GradientStop di awal sumbu gradien, dengan kata lain di dekat StartPoint. 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 titik henti gradien secara linier diinterpolasi sebagai kombinasi warna yang ditentukan oleh dua titik henti gradien. Gambar berikut menyoroti titik henti gradien dalam contoh sebelumnya. Lingkaran menandai posisi hentian gradien, dan garis putus-putus menunjukkan sumbu gradien.

Diagram yang menggambarkan titik henti gradasi 1 hingga 4 dimulai dari sudut kiri atas diagram dan menurun serta miring ke kanan hingga mencapai sudut kanan bawah diagram.

Kombinasi warna yang ditetapkan oleh dua titik henti gradien pembatas

Anda dapat mengubah garis tempat perhentian gradien terletak dengan mengatur properti StartPoint dan EndPoint menjadi nilai yang berbeda dari nilai awal default (0,0) 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 tetap solid ke warna terakhir GradienStop Anda, Anda menentukan StartPoint (0,0) dan EndPoint (0.5,0).

Kuas gradien radial

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

Warna untuk gradien radial ditentukan oleh titik warna yang ditambahkan ke dalam properti koleksi GradientStops. Tiap titik gradien menentukan warna dan offset di sepanjang gradien.

Asal gradien secara 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 Pusat, 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 titik henti gradien diinterpolasi secara radial sebagai kombinasi warna yang ditentukan oleh dua batas titik henti gradien. Gambar berikut menyoroti titik henti gradien dalam contoh sebelumnya.

Tangkapan layar gradasi radial.

Gradien berhenti

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 bawaan, ImageBrush memperlebar gambar untuk sepenuhnya mengisi area yang dicat, mungkin mendistorsi gambar jika area yang dicat memiliki rasio aspek yang berbeda dengan gambar. Anda dapat mengubah perilaku ini dengan mengubah properti Stretch dari nilai default Fill dan mengaturnya menjadi None, Uniform, atau UniformToFill.

Contoh berikutnya membuat ImageBrush dan mengatur ImageSource ke gambar bernama licorice.jpg, yang harus Anda sertakan sebagai sumber daya dalam 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 telah dirender.

Sebuah ImageBrush yang telah 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 bisa 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 dari TextBlock menggunakan 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 dapat membuat teks menjadi tidak terbaca jika Anda menggunakan kuas yang menyatu 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.

XamlCompositionBrushBase

XamlCompositionBrushBase adalah kelas dasar yang digunakan untuk membuat kuas kustom yang menggunakan CompositionBrush untuk mewarnai 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 ke UIElements XAML menggunakan CompositionEffectBrush, seperti GaussianBlurEffect atau SceneLightingEffect yang mengendalikan 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 situasi mana pun di mana Anda mereferensikan penggunaan sumber daya kuas sebagai {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 umum untuk menentukan kuas menggunakan XAML daripada kode. 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 instansiasi kode.

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

SolidColorBrush blueBrush = new SolidColorBrush(Colors.Blue);

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

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

ImageSource memerlukan BitmapImage (bukan URI) saat Anda menggunakan kode untuk menentukan ImageBrush. Jika sumber Anda adalah aliran , gunakan metode SetSourceAsync untuk menginisialisasi nilai. Jika sumber Anda adalah URI yang mencakup konten di aplikasi Anda dan menggunakan skema ms-appx atau ms-resource, gunakan konstruktorBitmapImage yang mengambil URI. Anda mungkin juga mempertimbangkan untuk menangani peristiwa ImageOpened jika ada kendala waktu dalam mengambil atau mendekode sumber gambar, di mana Anda mungkin perlu konten alternatif untuk ditampilkan hingga sumber gambar tersedia.

Untuk contoh kode, lihat ImageBrush dan XamlCompositionBrushBase.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan Windows App SDK dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API Brush ada di namespace Windows.UI.Xaml.Controls dan Windows.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya, templat, dan fitur terbaru untuk semua kontrol.

WebViewBrush (khusus UWP)

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 lainnya yang memiliki properti Brush-type sebagai permukaan render. WebViewBrush tidak sesuai untuk setiap skenario penggunaan kuas, tetapi berguna dalam transisi WebView. Untuk informasi selengkapnya, lihat WebViewBrush.

Jika Anda membuat WebViewBrush dalam kode, gunakan konstruktor default lalu panggil API lain sebelum Anda mencoba menggunakan kuas tersebut untuk properti UI. Anda mungkin perlu memanggil Redraw jika baru saja mengatur ulang properti SourceName atau jika konten WebView juga diubah dengan kode.

Untuk contoh kode, lihat WebViewBrush.

  • Last updated on