Gradien

Telusuri sampel

Kelas .NET Multi-platform App UI (.NET MAUI) GradientBrush berasal dari Brush kelas , dan merupakan kelas abstrak yang menggambarkan gradien, yang terdiri dari pemberhentian gradien. Sikat gradien melukis area dengan beberapa warna yang berbaur satu sama lain di sepanjang sumbu.

Kelas yang berasal dari GradientBrush menjelaskan berbagai cara untuk menafsirkan pemberhentian gradien, dan .NET MAUI menyediakan kuas gradien berikut:

• LinearGradientBrush, yang melukis area dengan gradien linier. Untuk informasi selengkapnya, lihat Sikat gradien linier.
• RadialGradientBrush, yang melukis area dengan gradien radial. Untuk informasi selengkapnya, lihat Sikat gradien Radial.

Kelas GradientBrush mendefinisikan GradientStops properti, dari jenis GradientStopCollection, yang mewakili pemberhentian gradien sikat, yang masing-masing menentukan warna dan offset di sepanjang sumbu gradien kuas. A GradientStopCollection adalah ObservableCollection GradientStop objek. Properti GradientStops didukung oleh BindableProperty objek, yang berarti dapat menjadi target pengikatan data, dan ditata.

Catatan

Properti GradientStops adalah ContentProperty kelas GradientBrush , sehingga tidak perlu diatur secara eksplisit dari XAML.

Perhentian gradien

Pemberhentian gradien adalah blok penyusun kuas gradien, dan menentukan warna dalam gradien dan lokasinya di sepanjang sumbu gradien. Perhentian gradien ditentukan menggunakan GradientStop objek.

Kelas GradientStop menentukan properti berikut:

• Color, dari jenis Color, yang mewakili warna pemberhentian gradien.
• Offset, dari jenis float, yang mewakili lokasi pemberhentian gradien dalam vektor gradien. Nilai default properti ini adalah 0, dan nilai yang valid berada dalam rentang 0,0-1,0. Semakin dekat nilai ini dengan 0, semakin dekat warnanya dengan awal gradien. Demikian pula, semakin dekat nilai ini ke 1, semakin dekat warnanya ke akhir gradien.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Penting

Sistem koordinat yang digunakan oleh gradien relatif terhadap kotak pembatas untuk area output. 0 menunjukkan 0 persen dari kotak pembatas, dan 1 menunjukkan 100 persen kotak pembatas. Oleh karena itu, (0,5,0,5) menjelaskan titik di tengah kotak pembatas, dan (1,1) menggambarkan titik di kanan bawah kotak pembatas.

Contoh XAML berikut membuat diagonal LinearGradientBrush dengan empat warna:

<LinearGradientBrush StartPoint="0,0"
                     EndPoint="1,1">
    <GradientStop Color="Yellow"
                  Offset="0.0" />
    <GradientStop Color="Red"
                  Offset="0.25" />
    <GradientStop Color="Blue"
                  Offset="0.75" />             
    <GradientStop Color="LimeGreen"
                  Offset="1.0" />
</LinearGradientBrush>                                                       

Warna setiap titik antara pemberhentian gradien diinterpolasi sebagai kombinasi warna yang ditentukan oleh dua pemberhentian gradien pembatas. Diagram berikut menunjukkan gradien berhenti dari contoh sebelumnya:

Dalam diagram ini, lingkaran menandai posisi hentian gradien, dan garis putus-putus menunjukkan sumbu gradien. Pemberhentian gradien pertama menentukan warna kuning pada offset 0,0. Pemberhentian gradien kedua menentukan warna merah pada offset 0,25. Titik-titik antara kedua gradien ini berhenti secara bertahap berubah dari kuning ke merah saat Anda bergerak dari kiri ke kanan di sepanjang sumbu gradien. Pemberhentian gradien ketiga menentukan warna biru pada offset 0,75. Titik-titik antara gradien kedua dan ketiga berhenti secara bertahap berubah dari merah ke biru. Pemberhentian gradien keempat menentukan warna kapur hijau pada offset 1,0. Titik-titik antara gradien ketiga dan keempat berhenti secara bertahap berubah dari biru ke hijau kapur.