共用方式為

Border

.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值，可獨立控制矩形的每個角落：

卷標螢幕快照周圍的框線。

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繪製：

卷標螢幕快照周圍的線性漸層框線。

使用字串定義框線圖形

在 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為 。

  • Last updated on