Edit

BoxView

The .NET Multi-platform App UI (.NET MAUI) BoxView draws a simple rectangle or square, of a specified width, height, and color.

BoxView defines the following properties:

  • Color, of type Color, which defines the color of the BoxView.
  • CornerRadius, of type CornerRadius, which defines the corner radius of the BoxView. This property can be set to a single double uniform corner radius value, or a CornerRadius structure defined by four double values that are applied to the top left, top right, bottom left, and bottom right of the BoxView.

These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Note

Although BoxView can mimic simple graphics, a better alternative is to use .NET MAUI Shapes or .NET MAUI Graphics.

Create a BoxView

To draw a rectangle or square, create a BoxView object and set its Color, WidthRequest, and HeightRequest properties. Optionally, you can also set its CornerRadius property.

The following XAML example shows how to create a BoxView:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BasicBoxView"
             x:Class="BasicBoxView.MainPage">
    <BoxView Color="CornflowerBlue"
             CornerRadius="10"
             WidthRequest="160"
             HeightRequest="160"
             VerticalOptions="Center"
             HorizontalOptions="Center" />
</ContentPage>

In this example, a cornflower blue BoxView is displayed in the center of the page:

Screenshot of a BoxView with rounded corners.

The WidthRequest and HeightRequest properties are measured in device-independent units.

Note

A BoxView can also be a child of an AbsoluteLayout. In this case, both the location and size of the BoxView are set using the LayoutBounds attached bindable property.

A BoxView can also be sized to resemble a line of a specific width and thickness.

Fill a BoxView with a brush

Starting in .NET 11, BoxView exposes a Fill property of type Brush. Setting Fill lets you paint a BoxView with any brush, including gradients, instead of being limited to the solid Color property.

The following XAML example fills a BoxView with a LinearGradientBrush:

<BoxView Opacity="0.5"
         WidthRequest="200"
         HeightRequest="100"
         CornerRadius="60,20,20,60"
         HorizontalOptions="Center"
         VerticalOptions="Center">
    <BoxView.Fill>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,0">
            <GradientStop Color="Purple"
                          Offset="0.0" />
            <GradientStop Color="Orange"
                          Offset="0.5" />
            <GradientStop Color="Red"
                          Offset="1.0" />
        </LinearGradientBrush>
    </BoxView.Fill>
</BoxView>

In this example, the BoxView is painted with a purple-to-red horizontal linear gradient:

Screenshot of a BoxView painted with a linear gradient brush.

Or a RadialGradientBrush:

<BoxView Opacity="0.5"
         WidthRequest="200"
         HeightRequest="100"
         HorizontalOptions="Center"
         VerticalOptions="Center">
    <BoxView.Fill>
        <RadialGradientBrush Center="0.5,0.5"
                             Radius="0.5">
            <GradientStop Color="Yellow"
                          Offset="0.0" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </RadialGradientBrush>
    </BoxView.Fill>
</BoxView>

In this example, the BoxView is painted with a yellow-to-green radial gradient:

Screenshot of a BoxView painted with a radial gradient brush.

The Fill property takes priority over the Color property. When both are set, the brush specified by Fill is used to paint the BoxView. If Fill is later cleared by setting it to null, the BoxView reverts to rendering with Color:

box.Color = Colors.Red;
box.Fill = new LinearGradientBrush(/* ... */); // Gradient is rendered.
box.Fill = null;                                // Red is rendered.
  • Last updated on