Sikat gradien linier

Telusuri sampel

Kelas .NET Multi-platform App UI (.NET MAUI) LinearGradientBrush berasal dari GradientBrush kelas , dan melukis area dengan gradien linier, yang memadukan dua warna atau lebih di sepanjang garis yang dikenal sebagai sumbu gradien. GradientStop objek digunakan untuk menentukan warna dalam gradien dan posisinya. Untuk informasi selengkapnya tentang GradientStop objek, lihat Gradien.

Kelas LinearGradientBrush menentukan properti berikut:

• StartPoint, dari jenis Point, yang mewakili koordinat dua dimensi awal gradien linier. Nilai default properti ini adalah (0,0).
• EndPoint, dari jenis Point, yang mewakili koordinat dua dimensi akhir dari gradien linier. Nilai default properti ini adalah (1,1).

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

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

Catatan

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

Membuat LinearGradientBrush

Hentian gradien gradien linier diposisikan di sepanjang sumbu gradien. Orientasi dan ukuran sumbu gradien dapat diubah menggunakan sikat StartPoint dan EndPoint properti. Dengan memanipulasi properti ini, Anda dapat membuat gradien horizontal, vertikal, dan diagonal, membalikkan arah gradien, mengembun sebaran gradien, dan banyak lagi.

Properti StartPoint dan EndPoint relatif terhadap area yang dicat. (0,0) mewakili sudut kiri atas area yang dicat, dan (1,1) mewakili sudut kanan bawah area yang dicat. Diagram berikut menunjukkan sumbu gradien untuk sikat gradien linier diagonal:

Dalam diagram ini, garis putus-putus menunjukkan sumbu gradien, yang menyoroti jalur interpolasi gradien dari titik awal ke titik akhir.

Membuat gradien linier horizontal

Untuk membuat gradien linier horizontal, buat LinearGradientBrush objek dan atur StartPoint ke (0,0) dan EndPoint ke (1,0). Kemudian, tambahkan dua objek atau lebih GradientStop ke LinearGradientBrush.GradientStops koleksi, yang menentukan warna dalam gradien dan posisinya.

Contoh XAML berikut menunjukkan horizontal LinearGradientBrush yang ditetapkan sebagai Background dari Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->
        <LinearGradientBrush EndPoint="1,0">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>  

Dalam contoh ini, latar belakang Frame dicat dengan LinearGradientBrush yang menginterpolasi dari kuning ke hijau secara horizontal:

Membuat gradien linier vertikal

Untuk membuat gradien linier vertikal, buat LinearGradientBrush objek dan atur StartPoint ke (0,0) dan EndPoint ke (0,1). Kemudian, tambahkan dua objek atau lebih GradientStop ke LinearGradientBrush.GradientStops koleksi, yang menentukan warna dalam gradien dan posisinya.

Contoh XAML berikut menunjukkan vertikal LinearGradientBrush yang ditetapkan sebagai Background dari Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->    
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

Dalam contoh ini, latar belakang dicat Frame dengan LinearGradientBrush yang menginterpolasi dari kuning ke hijau secara vertikal:

Membuat gradien linier diagonal

Untuk membuat gradien linier diagonal, buat LinearGradientBrush objek dan atur StartPoint ke (0,0) dan EndPoint ke (1,1). Kemudian, tambahkan dua objek atau lebih GradientStop ke LinearGradientBrush.GradientStops koleksi, yang menentukan warna dalam gradien dan posisinya.

Contoh XAML berikut menunjukkan diagonal LinearGradientBrush yang ditetapkan sebagai Background dari Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0)      
             Endpoint defaults to (1,1) -->
        <LinearGradientBrush>
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

Dalam contoh ini, latar belakang dicat Frame dengan LinearGradientBrush yang menginterpolasi dari kuning ke hijau secara diagonal: