Bagikan melalui

Xamarin.Forms Bentuk

  • Artikel

Shape adalah jenis View yang memungkinkan Anda menggambar bentuk ke layar. Shape objek dapat digunakan di dalam kelas tata letak dan sebagian besar kontrol, karena Shape kelas berasal dari View kelas .

Xamarin.FormsBentuk tersedia di Xamarin.Forms.Shapes namespace layanan di iOS, Android, macOS, Platform Windows Universal (UWP), dan Windows Presentation Foundation (WPF).

Shape menentukan properti berikut:

  • Aspect, dari jenis Stretch, menjelaskan bagaimana bentuk mengisi ruang yang dialokasikan. Nilai default properti ini adalah Stretch.None.
  • Fill, dari jenis Brush, menunjukkan kuas yang digunakan untuk melukis interior bentuk.
  • Stroke, dari jenis Brush, menunjukkan kuas yang digunakan untuk melukis kerangka bentuk.
  • StrokeDashArray, dari jenis DoubleCollection, yang mewakili kumpulan double nilai yang menunjukkan pola tanda hubung dan celah yang digunakan untuk menguraikan bentuk.
  • StrokeDashOffset, dari jenis double, menentukan jarak dalam pola tanda hubung di mana tanda hubung dimulai. Nilai default properti ini adalah 0,0.
  • StrokeLineCap, dari jenis PenLineCap, menjelaskan bentuk di awal dan akhir garis atau segmen. Nilai default properti ini adalah PenLineCap.Flat.
  • StrokeLineJoin, dari jenis PenLineJoin, menentukan jenis gabungan yang digunakan di puncak bentuk. Nilai default properti ini adalah PenLineJoin.Miter.
  • StrokeMiterLimit, dari jenis double, menentukan batas pada rasio panjang miter hingga setengah StrokeThickness dari bentuk. Nilai default properti ini adalah 10,0.
  • StrokeThickness, dari jenis double, menunjukkan lebar kerangka bentuk. Nilai default properti ini adalah 1,0.

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

Xamarin.Forms menentukan sejumlah objek yang berasal dari Shape kelas . Ini adalah Ellipse, , PathLine, Polygon, Polyline, dan Rectangle.

Bentuk cat

Brush objek digunakan untuk melukis bentuk Stroke dan Fill:

<Ellipse Fill="DarkBlue"
         Stroke="Red"
         StrokeThickness="4"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Start" />

Dalam contoh ini, goresan dan isi ditentukan Ellipse :

Bentuk cat

Penting

Brush objek menggunakan pengonversi jenis yang memungkinkan Color nilai ditentukan untuk Stroke properti .

Jika Anda tidak menentukan Brush objek untuk Stroke, atau jika Anda mengatur StrokeThickness ke 0, maka batas di sekitar bentuk tidak digambar.

Untuk informasi selengkapnya tentang Brush objek, lihat Xamarin.Forms Sikat. Untuk informasi selengkapnya tentang nilai yang valid, lihat Warna di Xamarin.Forms.Color

Membentangkan bentuk

Shape objek memiliki Aspect properti, berjenis Stretch. Properti ini menentukan bagaimana Shape konten objek direntangkan untuk mengisi Shape ruang tata letak objek. Ruang Shape tata letak objek adalah jumlah ruang yang Shape dialokasikan oleh Xamarin.Forms sistem tata letak, karena eksplisit WidthRequest dan HeightRequest pengaturan atau karena pengaturan dannya HorizontalOptions VerticalOptions .

Enumerasi Stretch menentukan anggota berikut:

  • None, yang menunjukkan bahwa konten mempertahankan ukuran aslinya. Ini adalah nilai Shape.Aspect default properti.
  • Fill, yang menunjukkan bahwa konten diubah ukurannya untuk mengisi dimensi tujuan. Rasio aspek tidak dipertahankan.
  • Uniform, yang menunjukkan bahwa konten diubah ukurannya agar sesuai dengan dimensi tujuan, sambil mempertahankan rasio aspek.
  • UniformToFill, menunjukkan bahwa konten diubah ukurannya untuk mengisi dimensi tujuan, sambil mempertahankan rasio aspek. Jika rasio aspek persegi panjang tujuan berbeda dari sumbernya, konten sumber diklip agar pas di dimensi tujuan.

XAML berikut menunjukkan cara mengatur Aspect properti:

<Path Aspect="Uniform"
      Stroke="Yellow"
      Fill="Red"
      BackgroundColor="LightGray"
      HorizontalOptions="Start"
      HeightRequest="100"
      WidthRequest="100">
    <Path.Data>
        <!-- Path data goes here -->
    </Path.Data>  
</Path>

Dalam contoh ini, objek Path menarik hati. Properti Path dan HeightRequest objek WidthRequest diatur ke 100 unit independen perangkat, dan propertinya Aspect diatur ke Uniform. Akibatnya, konten objek diubah ukurannya agar sesuai dengan dimensi tujuan, sambil mempertahankan rasio aspek:

Membentangkan bentuk

Gambar bentuk putus-putus

Shape objek memiliki StrokeDashArray properti, berjenis DoubleCollection. Properti ini mewakili kumpulan double nilai yang menunjukkan pola tanda hubung dan celah yang digunakan untuk menguraikan bentuk. A DoubleCollection adalah ObservableCollection nilai double . Masing-masing double dalam koleksi menentukan panjang tanda hubung atau celah. Item pertama dalam koleksi, yang terletak di indeks 0, menentukan panjang tanda hubung. Item kedua dalam koleksi, yang terletak di indeks 1, menentukan panjang celah. Oleh karena itu, objek dengan nilai indeks genap menentukan tanda hubung, sementara objek dengan nilai indeks ganjil menentukan celah.

Shape objek juga memiliki StrokeDashOffset properti, jenis double, yang menentukan jarak dalam pola tanda hubung tempat tanda hubung dimulai. Kegagalan untuk mengatur properti ini akan mengakibatkan Shape memiliki kerangka yang solid.

Bentuk putus-putus dapat digambar dengan mengatur StrokeDashArray properti dan StrokeDashOffset . Properti StrokeDashArray harus diatur ke satu atau beberapa double nilai, dengan setiap pasangan dibatasi oleh satu koma dan/atau satu atau beberapa spasi. Misalnya, "0,5 1.0" dan "0.5,1.0" keduanya valid.

Contoh XAML berikut menunjukkan cara menggambar persegi panjang putus-putus:

<Rectangle Fill="DarkBlue"
           Stroke="Red"
           StrokeThickness="4"
           StrokeDashArray="1,1"
           StrokeDashOffset="6"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Start" />

Dalam contoh ini, persegi panjang yang diisi dengan goresan putus-putus digambar:

Persegi panjang putus-putus

Garis kontrol berakhir

Garis memiliki tiga bagian: tutup awal, isi garis, dan tutup akhir. Batas awal dan akhir menggambarkan bentuk di awal dan akhir garis, atau segmen.

Shape objek memiliki StrokeLineCap properti, jenis PenLineCap, yang menjelaskan bentuk di awal dan akhir garis, atau segmen. Enumerasi PenLineCap menentukan anggota berikut:

  • Flat, yang mewakili batas yang tidak meluas melewati titik terakhir baris. Ini sebanding dengan tanpa batas baris, dan merupakan nilai default properti StrokeLineCap .
  • Square, yang mewakili persegi panjang yang memiliki tinggi sama dengan ketebalan garis dan panjang sama dengan setengah ketebalan garis.
  • Round, yang mewakili semicircle yang memiliki diameter sama dengan ketebalan garis.

Penting

Properti StrokeLineCap tidak berpengaruh jika Anda mengaturnya pada bentuk yang tidak memiliki titik awal atau akhir. Misalnya, properti ini tidak berpengaruh jika Anda mengaturnya pada Ellipse, atau Rectangle.

XAML berikut menunjukkan cara mengatur StrokeLineCap properti:

<Line X1="0"
      Y1="20"
      X2="300"
      Y2="20"
      StrokeLineCap="Round"
      Stroke="Red"
      StrokeThickness="12" />

Dalam contoh ini, garis merah dibulatkan di awal dan akhir baris:

Batas baris

Gabungan baris kontrol

Shape objek memiliki StrokeLineJoin properti, jenis PenLineJoin, yang menentukan jenis gabungan yang digunakan pada simpul bentuk. Enumerasi PenLineJoin menentukan anggota berikut:

  • Miter, yang mewakili simpul sudut reguler. Ini adalah nilai StrokeLineJoin default properti.
  • Bevel, yang mewakili simpul miring.
  • Round, yang mewakili simpul bulat.

Catatan

StrokeLineJoin Ketika properti diatur ke Miter, StrokeMiterLimit properti dapat diatur ke double untuk membatasi panjang miter gabungan garis dalam bentuk.

XAML berikut menunjukkan cara mengatur StrokeLineJoin properti:

<Polyline Points="20 20,250 50,20 120"
          Stroke="DarkBlue"
          StrokeThickness="20"
          StrokeLineJoin="Round" />

Dalam contoh ini, poliline biru tua telah membulatkan gabungan di puncaknya:

Gabungan baris