邊境

.NET 多平台應用程式介面（.NET MAUI） Border 是一種容器控制項，會在另一個控制項周圍繪製邊界、背景或兩者。 A Border 只能包含一個子物件。 如果你想在多個物件周圍加邊框，就用容器物件（例如版面）包裹它們。 欲了解更多版面配置資訊，請參見版面配置。

Border 定義下列屬性：

  • Content，型別為 IView，表示要在邊框中顯示的內容。 此屬性是Border類別的ContentProperty，因此不需要從 XAML 明確設定。
  • Padding，型別 Thickness為 ，代表邊界與其子元素之間的距離。
  • StrokeShape，型為 IShape，描述邊界的形狀。 此性質上有一個型別轉換器，可將字串轉換為其等價的 IShape。 預設值為 Rectangle。 因此，a Border 預設為矩形。
  • Stroke，型為 Brush，表示用來繪製邊框的畫筆。
  • StrokeThickness，型為 double，表示邊界的寬度。 此屬性的預設值為 1.0。
  • StrokeDashArray 的類型為 DoubleCollection，代表一個由 double 構成的數值集合，這些數值表示構成邊界的破折號與間隔圖案。
  • StrokeDashOffset的double類型，指定了破折線模式中破折號起始距離的位置。 此屬性的預設值為 0.0。
  • StrokeLineCap，類型為PenLineCap，描述其線條起點與終點的形狀。 這個屬性預設值為 PenLineCap.Flat。
  • StrokeLineJoin 的類型 PenLineJoin 指定了筆劃形狀頂點處使用的連接類型。 這個屬性預設值為 PenLineJoin.Miter。
  • StrokeMiterLimit，類型為 double，指定斜切長度與筆觸厚度一半的比值上限。 此屬性的預設值為10.0。

這些屬性由 BindableProperty 物件支援，這表示它們可以成為資料繫結的目標並且可以設定樣式。

這很重要

使用形狀（如 Rectangle 或 Polygon）建立邊界時，應僅使用封閉形狀。 因此，像 這樣的 Line 開放形狀是無支撐的。

欲了解更多控制邊框形狀與筆劃的屬性，請參閱「形狀」。

建立邊界

要繪製邊界，請建立一個 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。 邊框形狀定義為一個 RoundRectangle 物件，其 CornerRadius 屬性設定 Thickness 為一個值，使得能獨立控制矩形的每個角落：

標籤截圖的邊框。

由於屬性 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:

Label 截圖周圍的線性漸層邊框。

用字串定義邊界形狀

在 XAML 中，屬性的值 StrokeShape 可以用屬性標籤語法定義，或以 string. 有效的 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是StrokeShape屬性的有效string值，但其使用不被支持。

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

  • Last updated on