边框

.NET 多平台应用 UI（.NET MAUI） Border 是一个容器控件，可围绕另一个控件绘制边框、背景或两者。 一个 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这样的开放形状是不被支持的。

有关控制边框形状和笔划的属性的详细信息，请参阅 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绘制了具有左上角和右下角圆角的边框。 边框形状定义为一个 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 绘制三角边框。 有关路径标记语法的详细信息，请参阅 Path 标记语法。
  • 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”都是有效的。 坐标对将转换为 Point 类型定义 X 和 Y 属性 double的对象。

  • Last updated on