共用方式為


Border

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

Border 會定義下列屬性:

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

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

重要

使用 或 PolygonRectangle圖形建立框線時,應該只使用封閉圖案。 因此,不支援開啟的圖形,例如 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 屬性會設定ThicknessRoundRectangle值,可獨立控制矩形的每個角落:

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

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 40RoundRectangle 40,0,0,40

重要

雖然 Line 是 屬性的有效 stringStrokeShape ,但不支援其使用。

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