BoxView

BoxView представляет прямоугольную область. Обычно BoxView применяется для создания окрашенных областей, либо в качестве декоративного примитивного графического оформления к другим элементам.

Основные свойства класса BoxView:

• Color: представляет цвет элемента в виде структуры Color.

• CornerRadius: представляет радиус границы BoxView в виде значения типа float.

• WidthRequest: представляет ширину элемента (по умолчанию равна 40 единицам).

• HeightRequest: представляет высоту элемента (по умолчанию равна 40 единицам).

Создание BoxView в xaml:

<?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>
        <BoxView Color="LightBlue" WidthRequest="150" HeightRequest="150" CornerRadius="8"
                 HorizontalOptions="Center" VerticalOptions="Center" />
    </Grid>
</ContentPage>

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

namespace HelloApp
{
    public partial class StartPage : ContentPage
    {
        public StartPage()
        {
            BoxView boxView = new BoxView
            {
                Color = Colors.LightBlue,
                CornerRadius = 8,
                WidthRequest = 150,
                HeightRequest = 150,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };
            Grid grid = new Grid();
            grid.Add(boxView);

            Content = grid;
        }
    }
}

Также можно использовать BoxView для создания прямоугольного графического декоративного орнамента там, где не нужна сложная графика, а стандартные свойства элементов не позволяют это сделать. Нередко подобным образом BoxView используется в контейнере AbsoluteLayout, так как тот позволяет определить фиксированное положение, но и в других контейнерах также можно применять. Например, нам надо начертить двойную линию:

Пример в xaml:

<?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">
    <StackLayout Padding="20">
        <Label Text="METANIT.COM" FontSize="22" HorizontalOptions="Center"  />
        <BoxView Color="Gray"  HeightRequest="2" HorizontalOptions="Fill" Margin="1" />
        <BoxView Color="Gray"  HeightRequest="2" HorizontalOptions="Fill" Margin="1" />
        <Label Text="Руководство по .NET MAUI" FontSize="18" HorizontalOptions="Center"  />
    </StackLayout>
</ContentPage>

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

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Label label1 = new Label
            {
                Text = "METANIT.COM",
                FontSize = 22,
                HorizontalOptions = LayoutOptions.Center
            };
            Label label2 = new Label
            {
                Text = "Руководство по .NET MAUI",
                FontSize = 18,
                HorizontalOptions = LayoutOptions.Center
            };
            BoxView boxView1 = new BoxView
            {
                Color = Colors.Gray,
                HeightRequest = 2,
                Margin = new Thickness(1),
                HorizontalOptions = LayoutOptions.Fill
            };
            BoxView boxView2 = new BoxView
            {
                Color = Colors.Gray,
                HeightRequest = 2,
                Margin = 1,
                HorizontalOptions = LayoutOptions.Fill
            };
            StackLayout stackLayout = new StackLayout 
            { 
                Children = { label1, boxView1, boxView2, label2 },
                Margin = new Thickness(20),
            };
            Content = stackLayout;
        }
    }
}