Border

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI), Border başka bir denetimin çevresine kenarlık, arka plan veya her ikisini birden çizen bir kapsayıcı denetimidir. A Border yalnızca bir alt nesne içerebilir. Birden çok nesnenin çevresine kenarlık koymak istiyorsanız, bunları düzen gibi bir kapsayıcı nesnesine sarmalarsınız. Düzenler hakkında daha fazla bilgi için bkz . Düzenler.

Border aşağıdaki özellikleri tanımlar:

• Content, türünde IView, kenarlıkta görüntülenecek içeriği temsil eder. Bu özellik sınıfının özelliğidir ContentProperty Border ve bu nedenle açıkça XAML'den ayarlanması gerekmez.
• PaddingThicknesstüründe, kenarlık ile alt öğesi arasındaki uzaklığı temsil eder.
• StrokeShapeIShapetüründe, kenarlık şeklini açıklar. Bu özellik, bir dizeyi eşdeğerine IShapedönüştürebilen bir tür dönüştürücüsünü uygulamıştır. Varsayılan değeridir Rectangle. Bu nedenle, varsayılan olarak dikdörtgen Border olacaktır.
• Stroke, türünde Brush, kenarlık boyamak için kullanılan fırçayı gösterir.
• StrokeThickness, türündeki doublekenarlık genişliğini gösterir. Bu özelliğin varsayılan değeri 1.0'dır.
• StrokeDashArray, türündedir DoubleCollectionve kenarlık oluşturan tire ve boşluk desenini gösteren bir değer koleksiyonunu double temsil eder.
• StrokeDashOffsettüründe double, tire deseninin içinde bir tirenin başladığı uzaklığı belirtir. Bu özelliğin varsayılan değeri 0,0'dır.
• StrokeLineCaptüründe PenLineCap, çizginin başındaki ve sonundaki şekli açıklar. Bu özelliğin varsayılan değeridir PenLineCap.Flat.
• StrokeLineJointüründe PenLineJoin, vuruş şeklinin köşelerinde kullanılan birleştirme türünü belirtir. Bu özelliğin varsayılan değeridir PenLineJoin.Miter.
• StrokeMiterLimittüründe double, sicim uzunluğunun vuruş kalınlığının yarısına oranının sınırını belirtir. Bu özelliğin varsayılan değeri 10,0'dır.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Önemli

veya Polygongibi Rectangle bir şekil kullanarak kenarlık oluştururken yalnızca kapalı şekiller kullanılmalıdır. Bu nedenle, gibi Line açık şekiller desteklenmez.

Kenarlık şeklini ve vuruşunu denetleen özellikler hakkında daha fazla bilgi için bkz . Şekiller.

Kenarlık Oluşturma

Kenarlık çizmek için bir Border nesne oluşturun ve özelliklerini görünümünü tanımlayacak şekilde ayarlayın. Ardından, alt öğesini kenarlığının eklenmesi gereken denetime ayarlayın.

Aşağıdaki XAML örneği, çevresine Labelkenarlık çizmeyi gösterir:

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

Alternatif olarak özellik değeri, StrokeShape özellik etiketi söz dizimi kullanılarak belirtilebilir:

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

Eşdeğer C# kodu:

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
    }
};

Bu örnekte, sol üst ve sağ alt köşeleri yuvarlatılmış kenarlık, çevresinde Labelçizilmiştir. Kenarlık şekli, CornerRadius özelliği dikdörtgenin her köşesinde bağımsız denetim sağlayan bir değere ayarlanmış bir Thickness nesne olarak RoundRectangle tanımlanır:

Stroke özelliği türünde Brusholduğundan, gradyanlar kullanılarak kenarlıklar da çizilebilir:

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

Eşdeğer C# kodu:

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
    }
};

Bu örnekte, doğrusal gradyan kullanan bir kenarlık çevresinde çizilir Label:

Kenarlık şeklini bir dizeyle tanımlama

XAML'de özelliğin StrokeShape değeri, özellik etiketi söz dizimi kullanılarak veya olarak stringtanımlanabilir. Özelliği için StrokeShape geçerli string değerler şunlardır:

• Ellipse
• Lineve ardından bir veya iki x ve y koordinat çifti. Örneğin, Line 10 20 (10,20) ile (0,0) arasında bir çizgi çizer ve Line 10 20, 100 120 (10,20) ile (100.120) arasında bir çizgi çizer.
• Path, ardından yol işaretleme söz dizimi verileri. Örneğin, Path M 10,100 L 100,100 100,50Z üçgen kenarlık çizer. Yol işaretleme söz dizimi hakkında daha fazla bilgi için bkz . Yol işaretleme söz dizimi.
• Polygonve ardından x ve y koordinat çiftlerinden oluşan bir koleksiyon. Örneğin, Polygon 40 10, 70 80, 10 50.
• Polyline, ardından x ve y koordinat çiftleri koleksiyonu ekler. Örneğin, Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30.
• Rectangle
• RoundRectangle, isteğe bağlı olarak bir köşe yarıçapı izler. Örneğin, RoundRectangle 40 veya RoundRectangle 40,0,0,40.

Önemli

Line özelliği için StrokeShape geçerli string bir değer olsa da, kullanımı desteklenmez.

String-tabanlı x ve y koordinat çiftleri tek bir virgül ve/veya bir veya daha fazla boşlukla sınırlandırılabilir. Örneğin, "40,10 70,80" ve "40 10, 70 80" geçerli olur. Koordinat çiftleri türü doubleve özelliklerini tanımlayan Y X nesnelere Point dönüştürülür.