边框

项目
02/13/2024

.NET 多平台应用 UI (.NET MAUI) Border 是一个容器控件，用于围绕另一个控件绘制边框、背景或两者。一个 Border 只能包含一个子对象。如果要将边框放在多个对象周围，请将它们包装在容器对象（如布局）中。有关布局的详细信息，请参阅布局。

Border 定义以下属性：

Content，类型为 IView，表示要显示边框中的内容。此属性是 Border 类的 ContentProperty，因此不需要通过 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，指定斜接长度与笔划厚度的一半之比的限制。此属性的默认值为 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 值，用于对矩形的每个角进行独立控制：

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中，StrokeShape 属性的值可以使用属性标记语法定义，也可以作为 string 定义。 StrokeShape 属性的有效 string 值是：

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" 均有效。坐标对将被转换为定义类型为 double 的 X 和 Y 属性的 Point 对象。

边框

创建边框

使用字符串定义边框形状

反馈

其他资源