Border

發行項
02/13/2024

.NET 多平臺應用程式 UI （.NET MAUI） Border 是容器控件，可在另一個控件周圍繪製框線、背景或兩者。 Border只能包含一個子物件。如果您想要將框線放在多個物件周圍，請將框線包裝在容器物件中，例如版面配置。如需配置的詳細資訊，請參閱版面配置。

Border 會定義下列屬性：

Content型 IView別為的，表示要顯示在框線中的內容。這個屬性是 ContentProperty 類別的 Border ，因此不需要從 XAML 明確設定。
Padding型 Thickness別為的，表示框線與其子專案之間的距離。
StrokeShape型 IShape別為的，描述框線的形狀。這個屬性已套用類型轉換器，可將字串轉換成其對等 IShape的。預設值為 Rectangle。因此， Border 預設會是矩形。
Stroke型 Brush別為的筆刷，表示用來繪製框線的筆刷。
StrokeThickness型 double別為的，表示框線的寬度。此屬性的預設值為 1.0。
StrokeDashArray型 DoubleCollection別為的，表示值集合 double ，表示構成框線的虛線和間距模式。
StrokeDashOffset型 double別為的，指定虛線開始的虛線圖樣內的距離。此屬性的預設值為 0.0。
StrokeLineCap類型 PenLineCap為的，描述其線條開頭和結尾處的圖形。此屬性的預設值為 PenLineCap.Flat。
StrokeLineJoin型 PenLineJoin別為的，指定在筆劃圖形頂點使用的聯結類型。此屬性的預設值為 PenLineJoin.Miter。
StrokeMiterLimit型 double別為的，指定Miter長度與筆劃粗細一半的比例限制。此屬性的預設值為10.0。

這些屬性是由 BindableProperty 物件所支援，這表示這些屬性可以是數據系結的目標，並設定樣式。

重要

使用或 Polygon等Rectangle圖形建立框線時，應該只使用封閉圖案。因此，不支援開啟的圖形，例如 Line 。

如需控制框線圖形和筆劃之屬性的詳細資訊，請參閱 Shapes。

建立框線

若要繪製框線，請 Border 建立物件，並設定其屬性來定義其外觀。然後，將其子系設定為應該加入框線的控件。

下列 XAML 範例示範如何在周圍繪製框線 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>

或者， StrokeShape 可以使用屬性標記語法來指定屬性值：

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

對等的 C# 程式碼為：

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

在此範例中，以圓角和右下角的框線在周圍 Label 繪製。框線圖形定義為物件，其 CornerRadius 屬性會設定 Thickness 為 RoundRectangle 值，可獨立控制矩形的每個角落：

Border around a Label screenshot.

Stroke由於屬性的類型為 Brush ，因此也可以使用漸層繪製框線：

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

對等的 C# 程式碼為：

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

在此範例中，使用線性漸層的框線會在周圍 Label 繪製：

Linear gradient border around a Label screenshot.

使用字串定義框線圖形

在 XAML 中，可以使用屬性標記語法或做為 string 來定義屬性的值 StrokeShape 。屬性的有效 string 值為 StrokeShape ：

Ellipse
Line，後面接著一或兩個 x 和 Y 座標組。例如， Line 10 20 從（10,20）到（0,0），繪製 Line 10 20, 100 120 一條從（10,20）到（100,120）的線條。
Path，後面接著路徑標記語法資料。例如， Path M 10,100 L 100,100 100,50Z 會繪製三角形框線。如需路徑標記語法的詳細資訊，請參閱路徑標記語法。
Polygon，後面接著 x 和 Y 座標組的集合。例如： Polygon 40 10, 70 80, 10 50 。
Polyline，後面接著集合 x 和 Y 座標組。例如： Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30 。
Rectangle
RoundRectangle，選擇性地後面接著圓角半徑。例如，RoundRectangle 40 或 RoundRectangle 40,0,0,40。

重要

雖然 Line 是屬性的有效 string 值 StrokeShape ，但不支援其使用。

String以 x 和 y 座標為基數的配對可以以單一逗號和/或一或多個空格分隔。例如，「40,10 70,80」和「40 10， 70 80」都是有效的。座標組會轉換成 Point 定義 X 和 Y 屬性的物件，類型 double 為。

Border

建立框線

使用字串定義框線圖形

意見反應

其他資源