Batas
.NET Multi-platform App UI (.NET MAUI) Border adalah kontrol kontainer yang menggambar batas, latar belakang, atau keduanya, di sekitar kontrol lain. Hanya Border dapat berisi satu objek anak. Jika Anda ingin meletakkan batas di sekitar beberapa objek, bungkus dalam objek kontainer seperti tata letak. Untuk informasi selengkapnya tentang tata letak, lihat Tata Letak.
Border menentukan properti berikut:
Content
, dari jenisIView
, mewakili konten yang akan ditampilkan di batas. Properti ini adalahContentProperty
kelas Border , dan oleh karena itu tidak perlu diatur secara eksplisit dari XAML.Padding
, dari jenisThickness
, mewakili jarak antara batas dan elemen turunannya.StrokeShape
, dari jenisIShape
, menjelaskan bentuk batas. Properti ini memiliki pengonversi jenis yang diterapkan padanya yang dapat mengonversi string ke yang setaraIShape
. Nilai defaultnya adalah Rectangle. Oleh karena itu, akan menjadi Border persegi panjang secara default.Stroke
, dari jenis Brush, menunjukkan kuas yang digunakan untuk mengecat batas.StrokeThickness
, dari jenisdouble
, menunjukkan lebar batas. Nilai default properti ini adalah 1,0.StrokeDashArray
, dari jenisDoubleCollection
, yang mewakili kumpulandouble
nilai yang menunjukkan pola tanda hubung dan celah yang membentuk batas.StrokeDashOffset
, dari jenisdouble
, menentukan jarak dalam pola tanda hubung di mana tanda hubung dimulai. Nilai default properti ini adalah 0,0.StrokeLineCap
, dari jenisPenLineCap
, menjelaskan bentuk di awal dan akhir garisnya. Nilai default properti ini adalahPenLineCap.Flat
.StrokeLineJoin
, dari jenisPenLineJoin
, menentukan jenis gabungan yang digunakan pada simpul bentuk goresan. Nilai default properti ini adalahPenLineJoin.Miter
.StrokeMiterLimit
, dari jenisdouble
, menentukan batas rasio panjang miter hingga setengah ketebalan goresan. Nilai default properti ini adalah 10,0.
Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.
Penting
Saat membuat batas menggunakan bentuk, seperti Rectangle atau Polygon, hanya bentuk tertutup yang harus digunakan. Oleh karena itu, bentuk terbuka seperti Line tidak didukung.
Untuk informasi selengkapnya tentang properti yang mengontrol bentuk dan goresan batas, lihat Bentuk.
Membuat Batas
Untuk menggambar batas, buat Border objek dan atur propertinya untuk menentukan tampilannya. Kemudian, atur turunannya ke kontrol tempat batas harus ditambahkan.
Contoh XAML berikut menunjukkan cara menggambar batas di sekitar Label:
<Border Stroke="#C49B33"
StrokeThickness="4"
StrokeShape="RoundRectangle 40,0,0,40"
Background="#2B0B98"
Padding="16,8"
HorizontalOptions="Center">
<Label Text=".NET MAUI"
TextColor="White"
FontSize="18"
FontAttributes="Bold" />
</Border>
Atau, StrokeShape
nilai properti dapat ditentukan menggunakan sintaks tag properti:
<Border Stroke="#C49B33"
StrokeThickness="4"
Background="#2B0B98"
Padding="16,8"
HorizontalOptions="Center">
<Border.StrokeShape>
<RoundRectangle CornerRadius="40,0,0,40" />
</Border.StrokeShape>
<Label Text=".NET MAUI"
TextColor="White"
FontSize="18"
FontAttributes="Bold" />
</Border>
Kode C# yang setara adalah:
using Microsoft.Maui.Controls.Shapes;
using GradientStop = Microsoft.Maui.Controls.GradientStop;
...
Border border = new Border
{
Stroke = Color.FromArgb("#C49B33"),
Background = Color.FromArgb("#2B0B98"),
StrokeThickness = 4,
Padding = new Thickness(16, 8),
HorizontalOptions = LayoutOptions.Center,
StrokeShape = new RoundRectangle
{
CornerRadius = new CornerRadius(40, 0, 0, 40)
},
Content = new Label
{
Text = ".NET MAUI",
TextColor = Colors.White,
FontSize = 18,
FontAttributes = FontAttributes.Bold
}
};
Dalam contoh ini, batas dengan sudut kiri atas dan kanan bawah bulat digambar di sekitar Label. Bentuk batas didefinisikan sebagai RoundRectangle objek, yang propertinya CornerRadius
diatur ke Thickness
nilai yang memungkinkan kontrol independen dari setiap sudut persegi:
Stroke
Karena properti berjenis Brush, batas juga dapat digambar menggunakan gradien:
<Border StrokeThickness="4"
StrokeShape="RoundRectangle 40,0,0,40"
Background="#2B0B98"
Padding="16,8"
HorizontalOptions="Center">
<Border.Stroke>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="Orange"
Offset="0.1" />
<GradientStop Color="Brown"
Offset="1.0" />
</LinearGradientBrush>
</Border.Stroke>
<Label Text=".NET MAUI"
TextColor="White"
FontSize="18"
FontAttributes="Bold" />
</Border>
Kode C# yang setara adalah:
using Microsoft.Maui.Controls.Shapes;
using GradientStop = Microsoft.Maui.Controls.GradientStop;
...
Border gradientBorder = new Border
{
StrokeThickness = 4,
Background = Color.FromArgb("#2B0B98"),
Padding = new Thickness(16, 8),
HorizontalOptions = LayoutOptions.Center,
StrokeShape = new RoundRectangle
{
CornerRadius = new CornerRadius(40, 0, 0, 40)
},
Stroke = new LinearGradientBrush
{
EndPoint = new Point(0, 1),
GradientStops = new GradientStopCollection
{
new GradientStop { Color = Colors.Orange, Offset = 0.1f },
new GradientStop { Color = Colors.Brown, Offset = 1.0f }
},
},
Content = new Label
{
Text = ".NET MAUI",
TextColor = Colors.White,
FontSize = 18,
FontAttributes = FontAttributes.Bold
}
};
Dalam contoh ini, batas yang menggunakan gradien linier digambar di sekitar Label:
Menentukan bentuk batas dengan string
Di XAML, nilai StrokeShape
properti dapat didefinisikan menggunakan sintaksis tag properti, atau sebagai string
. Nilai yang StrokeShape
valid string
untuk properti adalah:
Ellipse
Line
, diikuti oleh satu atau dua pasangan koordinat x- dan y. Misalnya,Line 10 20
menggambar garis dari (10.20) ke (0,0), danLine 10 20, 100 120
menarik garis dari (10.20) ke (100.120).Path
, diikuti oleh data sintaks markup jalur. Misalnya,Path M 10,100 L 100,100 100,50Z
akan menggambar batas segitiga. Untuk informasi selengkapnya tentang sintaks markup jalur, lihat Sintaks markup jalur.Polygon
, diikuti dengan kumpulan pasangan koordinat x- dan y. Contohnya,Polygon 40 10, 70 80, 10 50
.Polyline
, diikuti oleh pasangan koleksi x- dan y-coordinate. Contohnya,Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30
.Rectangle
RoundRectangle
, secara opsional diikuti oleh radius sudut. Misalnya,RoundRectangle 40
atauRoundRectangle 40,0,0,40
.
Penting
Meskipun Line
merupakan nilai yang valid string
untuk StrokeShape
properti , penggunaannya tidak didukung.
String
Pasangan koordinat x dan y berbasis -dapat dibatasi oleh satu koma dan/atau satu atau beberapa spasi. Misalnya, "40,10 70,80" dan "40 10, 70 80" keduanya valid. Pasangan koordinat akan dikonversi ke Point
objek yang menentukan X
dan Y
properti, dari jenis double
.
Saran dan Komentar
https://aka.ms/ContentUserFeedback.
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat:Kirim dan lihat umpan balik untuk