Border

Контейнер Border, как правило, выполняет декоративные функции и используется для создания границы или создания фона для вложенного элемента.

Среди свойств класса Border следует выделить следующие:

• StrokeShape: форма границы в виде объекта IShape.

• Stroke: цвет границы в виде объекта класса Brush.

• StrokeThickness: ширина границы в виде значения типа double (значение по умолчанию 1.0).

• StrokeDashArray: коллекция значений типа double в виде объекта DoubleCollection, которые определяют черточки и пропуски, из которых состоит граница.

• StrokeLineCap: описывает форму в начале и конце линии в виде объекта PenLineCap. Значение по умолчанию - PenLineCap.Flat.

• StrokeLineJoin: задает тип соединения в виде значения типа PenLineJoin, которое используется на вершинах фигуры, образуемой линией. Значение по умолчанию - PenLineJoin.Miter.

Стоит учитывать, что данный контейнер может вмещать только один элемент. Ключевым моментом использования Border является возможность установить некоторое внешнее оформление для вложенного элемента, например, с помощью установки цвета границы, ее радиуса, цвета фона.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <Grid Padding="20">
        <Border Stroke="Gray" BackgroundColor="#e1e1e1">
            <Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Hello METANIT.COM" />
        </Border>
    </Grid>
</ContentPage>

По умолчанию контейнер использует прямоугольную форму, граница не скруглена:

Аналогичный пример в коде C#:

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        Grid grid = new Grid() { Padding = 20 };
        Border border = new Border
        {
            Stroke = Colors.Gray,
            Content = new Label
            {
                Text = "Hello METANIT.COM",
                HorizontalTextAlignment = TextAlignment.Center,
                VerticalTextAlignment = TextAlignment.Center
            },
            BackgroundColor = Color.FromArgb("#e1e1e1")
        };
        grid.Add(border);
        Content = grid;
    }
}

По умолчанию применяется прямоугольная форма, то есть свойство StrokeShape использует объект класса Microsoft.Maui.Controls.Shapes.Rectangle. Но также можно использовать ряд других фигур, например, RoundRectangle для создания сгруленных границ:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <Grid Padding="20">
        <Border Stroke="Gray" BackgroundColor="#e1e1e1">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="20" />
            </Border.StrokeShape>
            <Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Hello METANIT.COM" />
        </Border>
    </Grid>
</ContentPage>

Здесь в качестве свойства StrokeShape передаем объект RoundRectangle и c помощью его свойства CornerRadius устанавливаем у него скругление - радиус границы:

<Border.StrokeShape>
    <RoundRectangle CornerRadius="20" />
</Border.StrokeShape>

Аналог в C#

using Microsoft.Maui.Controls.Shapes;

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        Grid grid = new Grid() { Padding = 20 };
        Border border = new Border
        {
            Stroke = Colors.Gray,
            StrokeShape = new RoundRectangle { CornerRadius = 20 },
            Content = new Label
            {
                Text = "Hello METANIT.COM",
                HorizontalTextAlignment = TextAlignment.Center,
                VerticalTextAlignment = TextAlignment.Center
            },
            BackgroundColor = Color.FromArgb("#e1e1e1")
        };
        grid.Add(border);
        Content = grid;
    }
}

Border может применяться для скругления влложенных элементов:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <Grid Padding="20">
        <Border Stroke="Gray" HeightRequest="200" WidthRequest="200">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="190" />
            </Border.StrokeShape>
            <Image Source="forest.png" Aspect="AspectFill"
                HeightRequest="200" WidthRequest="200"  />
        </Border>
    </Grid>
</ContentPage>

Здесь предполагается, что в проекте в папке Resources/Imgaes находится файл изображения forest.png.

Также можно применять Border для создания стилизованных карточек:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <Grid Padding="20">
        <Border Stroke="Gray" BackgroundColor="#e1e1e1">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="20" />
            </Border.StrokeShape>
            <StackLayout>
                <Label HorizontalTextAlignment="Center" FontSize="24" Text=".NET MAUI" />
                <BoxView HeightRequest="2" Color="DarkGray" Margin="10" />
                <Label FontSize="18" Text=".NET MAUI - технология, предназначенная для создания кроссплатформенных приложений." />
            </StackLayout>
        </Border>
    </Grid>
</ContentPage>