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 jenis IView, mewakili konten yang akan ditampilkan di batas. Properti ini adalah ContentProperty kelas Border , dan oleh karena itu tidak perlu diatur secara eksplisit dari XAML.
• Padding, dari jenis Thickness, mewakili jarak antara batas dan elemen turunannya.
• StrokeShape, dari jenis IShape, menjelaskan bentuk batas. Properti ini memiliki pengonversi jenis yang diterapkan padanya yang dapat mengonversi string ke yang setara IShape. 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 jenis double, menunjukkan lebar batas. Nilai default properti ini adalah 1,0.
• StrokeDashArray, dari jenis DoubleCollection, yang mewakili kumpulan double nilai yang menunjukkan pola tanda hubung dan celah yang membentuk batas.
• 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 garisnya. Nilai default properti ini adalah PenLineCap.Flat.
• StrokeLineJoin, dari jenis PenLineJoin, menentukan jenis gabungan yang digunakan pada simpul bentuk goresan. Nilai default properti ini adalah PenLineJoin.Miter.
• StrokeMiterLimit, dari jenis double, 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), dan Line 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 atau RoundRectangle 40,0,0,40.

Penting

Meskipun Line merupakan nilai yang valid string untuk StrokeShape properti , penggunaannya tidak didukung.

StringPasangan 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.