通过

边框

.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 值，用于对矩形的每个角进行独立控制：

“标签”屏幕截图周围的边框。

由于 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中，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 对象。

  • Last updated on