Frame in .NET MAUI

The Frame control in .NET MAUI provides a way to add a border, background, and corner radius to its content. It's a versatile control for creating visually distinct areas within your application's UI.

Key Features of Frame

Border: Customize the color, thickness, and dash pattern of the frame's border.
Background: Set a background color or image for the frame.
Corner Radius: Create rounded corners for the frame.
Padding: Control the space between the frame's border and its content.
Shadow: Add a subtle shadow effect to lift the frame from the background.

Basic Usage

The Frame control wraps around another control, its content. Here's a simple example:

<Frame BackgroundColor="LightBlue"
       BorderColor="DarkBlue"
       CornerRadius="10"
       Padding="10"
       Margin="10">
    <Label Text="This is content inside a Frame"
           HorizontalOptions="Center"
           VerticalOptions="Center"/>
</Frame>

Common Properties

The Frame control exposes several properties to customize its appearance:

Property	Description	Default Value
`BackgroundColor`	Gets or sets the background color of the frame.	`Colors.Transparent`
`BorderColor`	Gets or sets the color of the frame's border.	`Colors.Black`
`CornerRadius`	Gets or sets the radius of the frame's corners.	0
`Padding`	Gets or sets the padding within the frame.	0
`Margin`	Gets or sets the margin around the frame.	0
`HasShadow`	Gets or sets whether the frame has a shadow.	`false`
`BorderWidth`	Gets or sets the width of the frame's border.	1
`OutlineColor`	Gets or sets the color of the frame's outline (similar to BorderColor but can be different).	`Colors.Black`

Creating Effects with Frame

Rounded Corners

Use the CornerRadius property to create rounded corners. A value of 50 on a square frame can create a circular shape.

Circular Frame Example

<Frame CornerRadius="50"
       WidthRequest="100"
       HeightRequest="100"
       BackgroundColor="Salmon"
       VerticalOptions="Center"
       HorizontalOptions="Center">
    <Label Text="O" TextColor="White" FontSize="40"
           VerticalOptions="Center" HorizontalOptions="Center"/>
</Frame>

Adding Shadows

Enable the shadow effect with the HasShadow property for a subtle depth.

Framed with Shadow Example

<Frame BackgroundColor="White"
       BorderColor="Gray"
       CornerRadius="5"
       Padding="20"
       HasShadow="true"
       HeightRequest="150"
       WidthRequest="300"
       VerticalOptions="Center"
       HorizontalOptions="Center">
    <StackLayout>
        <Label Text="Card-like Element" FontSize="18" FontAttributes="Bold"/>
        <Label Text="This frame has a shadow, giving it a sense of depth."
               FontSize="12"
               TextColor="Gray"/>
    </StackLayout>
</Frame>

Custom Borders

Control the border color, width, and outline color for more nuanced visual styling.

Custom Border Example

<Frame BorderColor="Purple"
       OutlineColor="DeepPink"
       BorderWidth="3"
       CornerRadius="8"
       Padding="15"
       Margin="15">
    <Label Text="Custom styled border with outline."
           TextColor="DarkSlateBlue"/>
</Frame>

Performance Considerations

While Frame is useful for styling, excessive nesting of Frame controls can impact performance. Consider using other layout controls or custom drawing for more complex visual requirements if performance becomes an issue.

Tip: The Frame can be particularly useful for creating card-like UI elements, highlighting important information, or grouping related controls.

.NET MAUI Navigation