Transitioning from Frame to Border in .NET MAUI

This is an article in the Developer Tips series, which offers concise hints to enhance productivity. You can access all the articles in this series here.

Border:

From .NET MAUI 9 onwards, the Frame control has been marked as obsolete, paving the way for more robust Border control.

An article has already been published detailing the comprehensive features of .NET MAUI 9.

The Border serves as a container control, akin to the Frame; however, it exhibits significantly greater flexibility, enabling the user to delineate any enclosed geometric shape.

Even though the Frame control is simple to use, it is quite primitive in terms of functionality. For instance, the CornerRadius, of type float, can only be applied uniformly across all edges, resulting in Rectangle, RoundedRectangle, or Circular shape.

The efficacy of Border control is attributed to the following properties:

• Stroke
  • Proximate equivalent of BorderColor in Frame
• StrokeShape

Since the Stroke property is of type Brush, it is also feasible to create borders utilizing gradients.

The StrokeShape property is characterized as an IShape type, allowing the encapsulation of the associated control, as defined by the Content property of type IView, within any closed geometric form, with the Rectangle as the default shape. This property has a type converter applied to it that can convert a string to its equivalent IShape.

For clarity, the code sample comprises a simple control, the Label. To draw a border surrounding a set of controls, as one would in a card design, enclose them within a layout and subsequently apply a border to the entirety.

<Border
    Background="#2B0B98"
    HorizontalOptions="Center"
    Padding="20"
    Stroke="#C49B33"
    StrokeShape="RoundRectangle 40,0,0,40"
    StrokeThickness="4">
    <Label
        FontSize="24"
        Text="Hello, World!"
        TextColor="White" />
</Border>

The StrokeShape can also be defined autonomously.

<Border
    Background="#2B0B98"
    HorizontalOptions="Center"
    Padding="20"
    Stroke="#C49B33"
    StrokeThickness="4">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="40,0,0,40" />
    </Border.StrokeShape>
    <Label
        FontSize="24"
        Text="Hello, World!"
        TextColor="White" />
</Border>

Shadow:

From Xamarin.Forms, the Shadow is integrated with the Frame control. Conversely, in .NET MAUI, the Shadow object is decoupled and associated with the VisualElement, allowing shadows to be applied as needed.

The Shadow type defines the below properties to define its appearance:

• Brush
  • Brush used to colorize the shadow
  • For now, only SolidColorBrush is supported
• Opacity, of type float
  • Opacity of the shadow
• Offset, of type Point
  • Offset for the shadow, which represents the position of the light source that creates the shadow
• Radius, of type float
  • Radius of the blur used to generate the shadow

Note: Shadows can also be added to clipped objects such as Images.

XAML:

<Border
    Background="#2B0B98"
    HorizontalOptions="Center"
    Padding="20"
    Stroke="#C49B33"
    StrokeShape="RoundRectangle 40,0,0,40"
    StrokeThickness="4">
    <Border.Shadow>
        <Shadow
            Brush="Gray"
            Opacity="0.8"
            Offset="10,10" />
    </Border.Shadow>
    <Label
        FontSize="24"
        Text="Hello, World!"
        TextColor="White" />
</Border>

C#:

using Microsoft.Maui.Controls.Shapes;
using Microsoft.Maui.Graphics;

namespace MauiApp1.Views;

public class HomePage : ContentPage
{
    public HomePage()
    {
        Content = new Grid()
        {
            Children =
            {
                new Border()
                {
                    Background = new SolidColorBrush(Color.FromArgb("#2B0B98")),
                    HorizontalOptions = LayoutOptions.Center,
                    Padding = 20,
                    Shadow = new Shadow()
                    {
                        Brush = Colors.Gray,
                        Opacity = 0.8f,
                        Offset = new Point(10, 10),
                    },
                    Stroke = Color.FromArgb("#C49B33"),
                    StrokeShape = new RoundRectangle()
                    {
                        CornerRadius = new CornerRadius(40,0,0,40)
                    },
                    StrokeThickness = 4,
                    VerticalOptions = LayoutOptions.Center,
                    Content = new Label()
                    {
                        FontSize = 24,
                        Text = "Hello, World!",
                        TextColor = Colors.White
                    }
                }
            }
        };
    }
}

Pro Tip: With the default values for Margin, Padding, and Spacing set to zero in .NET MAUI, transitioning from the Frame control to the Border control means there will be no space between the border and its content. It’s recommended to define an implicit style for Border with a default Padding of 20, as was the case with the Frame control, and then adjust as needed. Check Styles.xaml in the Resources folder for predefined styles. Consult this article on Styles to know more.

Further Reading:

• Frame deprecation
• Border
• Shadow
• Frame

Happy coding. Stay connected as we continue to learn and share the experiences from this exciting journey of being a .NET developer.