Bagikan melalui

Xamarin.Forms Kuas: Gradien Radial

  • Artikel

Kelas ini RadialGradientBrush berasal dari GradientBrush kelas , dan melukis area dengan gradien radial, yang memadukan dua warna atau lebih di lingkaran. GradientStop objek digunakan untuk menentukan warna dalam gradien dan posisinya. Untuk informasi selengkapnya tentang GradientStop objek, lihat Xamarin.Forms Sikat: Gradien.

Kelas RadialGradientBrush menentukan properti berikut:

  • Center, dari jenis Point, yang mewakili titik tengah lingkaran untuk gradien radial. Nilai default properti ini adalah (0,5,0,5).
  • Radius, dari jenis double, yang mewakili radius lingkaran untuk gradien radial. Nilai default properti ini adalah 0,5.

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

Kelas ini RadialGradientBrush juga memiliki IsEmpty metode yang mengembalikan bool yang mewakili apakah kuas telah diberi objek apa pun GradientStop .

Catatan

Gradien radial juga dapat dibuat dengan radial-gradient() fungsi CSS.

Membuat RadialGradientBrush

Hentian gradien radial diposisikan di sepanjang sumbu gradien yang ditentukan oleh lingkaran. Sumbu gradien memancar dari tengah lingkaran ke lingkarnya. Posisi dan ukuran lingkaran dapat diubah menggunakan sifat dan Radius kuasCenter. Lingkaran menentukan titik akhir gradien. Oleh karena itu, pemberhentian gradien pada 1.0 mendefinisikan warna pada lingkar lingkaran. Gradien berhenti pada 0,0 mendefinisikan warna di tengah lingkaran.

Untuk membuat gradien radial, buat RadialGradientBrush objek dan atur properti dan Radius .Center Kemudian, tambahkan dua objek atau lebih GradientStop ke RadialGradientBrush.GradientStops koleksi, yang menentukan warna dalam gradien dan posisinya.

Contoh XAML berikut menunjukkan RadialGradientBrush yang ditetapkan sebagai Background dari Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- Center defaults to (0.5,0.5)
             Radius defaults to (0.5) -->
        <RadialGradientBrush>
            <GradientStop Color="Red"
                          Offset="0.1" />
            <GradientStop Color="DarkBlue"
                          Offset="1.0" />
        </RadialGradientBrush>
    </Frame.Background>
</Frame>

Dalam contoh ini, latar belakang dicat Frame dengan RadialGradientBrush yang menginterpolasi dari merah ke biru tua. Bagian tengah gradien radial diposisikan di tengah Frame:

Bingkai dicat dengan RadialGradientBrush terpusat

Contoh XAML berikut memindahkan pusat gradien radial ke sudut Framekiri atas :

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="0.0,0.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>

Dalam contoh ini, latar belakang dicat Frame dengan RadialGradientBrush yang menginterpolasi dari merah ke biru tua. Bagian tengah gradien radial diposisikan di kiri Frameatas :

Bingkai dicat dengan RadialGradientBrush kiri atas

Contoh XAML berikut memindahkan pusat gradien radial ke sudut Framekanan bawah :

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="1.0,1.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>

Dalam contoh ini, latar belakang dicat Frame dengan RadialGradientBrush yang menginterpolasi dari merah ke biru tua. Bagian tengah gradien radial diposisikan di kanan Framebawah :

Bingkai dicat dengan RadialGradientBrush kanan bawah