Граница

Статья
02/13/2024

Многоплатформенный пользовательский интерфейс приложения .NET (.NET MAUI) Border — это элемент управления контейнером, который рисует границу, фон или оба элемента управления вокруг другого элемента управления. Объект Border может содержать только один дочерний объект. Если вы хотите поместить границу вокруг нескольких объектов, заключите их в объект контейнера, например макет. Дополнительные сведения о макетах см. в статье Макеты .

Border определяет следующие свойства:

ContentIViewТип , представляет содержимое для отображения в границе. Это свойство является классом ContentPropertyBorder и поэтому не требуется явно задавать из XAML.
PaddingThicknessТип , представляет расстояние между границей и его дочерним элементом.
StrokeShapeIShapeТип , описывает форму границы. Это свойство имеет преобразователь типов, примененный к нему, который может преобразовать строку в эквивалент.IShape Это значение Rectangleпо умолчанию. Поэтому прямоугольный Border по умолчанию будет прямоугольным.
Stroke, тип Brush, указывает кисть, используемую для рисования границы.
StrokeThickness, тип double, указывает ширину границы. Значение по умолчанию этого свойства — 1.0.
StrokeDashArrayтип DoubleCollection, представляющий коллекцию значений, указывающих шаблон дефисов double и пробелов, составляющих границу.
StrokeDashOffsetdoubleТип , указывает расстояние в шаблоне тире, где начинается тире. Значение по умолчанию этого свойства равно 0.0.
StrokeLineCapPenLineCapТип , описывает фигуру в начале и конце его линии. Значение по умолчанию этого свойства равно 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. Допустимые 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.

Граница

Создание границы

Определение фигуры границы со строкой

Обратная связь

Дополнительные ресурсы