Exploring the New .NET MAUI Backdrop: A Specialized Content Page for Your Apps
Tags: netmaui, mobile, ui
Published: 2023-01-19 13:32:26

---
title: Exploring the New .NET MAUI Backdrop: A Specialized Content Page for Your Apps
published: true
date: 2023-01-19 11:59:18 UTC
tags: netmaui, mobile, ui
canonical_url: https://www.syncfusion.com/blogs/post/exploring-the-new-net-maui-backdrop-a-specialized-content-page-for-your-apps.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xze092xk1jej37w6e5ay.png
---
The [.NET MAUI Backdrop](https://www.syncfusion.com/maui-controls/maui-backdrop "Syncfusion .NET MAUI Backdrop control") included in our [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4") release is a specialized content page. It provides a full-screen interface for displaying and interacting with a single piece of content. This page comprises two surfaces, a back layer and a front layer, stacked one over the other. The back layer displays actions and context, while the rest of the page is covered by the front layer.

Integrating the Backdrop with built-in .NET MAUI pages such as NavigationPage and FlyoutPage allow you to utilize features such as title, icon, page navigation, and toolbar item customization.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/image001-1.gif" alt=".NET MAUI Backdrop with Swipe Action" style="width:100%">

  <figcaption>.NET MAUI Backdrop with Swipe Action</figcaption>

</figure>

The back layer holds options such as navigation, filtration, and more, which updates the front layer content on performing specific actions. When concealed, the back layer can provide contextual information about the front layer. When revealed, the back layer displays contextual controls that relate to the front layer.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/image002.jpg" alt=".NET MAUI Backdrop" style="width:100%">

  <figcaption>.NET MAUI Backdrop</figcaption>

</figure>

## Front layer

The front layer is always visible in front of the back layer. It is displayed at full width and holds primary content.

You can customize the corner of the front layer of the .NET MAUI Backdrop to be curve or flat. You can customize one or both corners of the front layer with these shapes. It is also possible to change the default radius of the custom shapes.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/image003.jpg" alt=".NET MAUI Backdrop Front Layer with Different Corner Shapes" style="width:100%">

  <figcaption>.NET MAUI Backdrop Front Layer with Different Corner Shapes</figcaption>

</figure>

## Back layer

The back layer appears at the lowest elevation in the app, filling the entire background. It holds actionable content that is relevant to the front layer.

When the back layer is revealed, use the auto adjustment option to adjust its height based on its content, or expand it fully until only the front layer’s header is visible.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/image004.jpg" alt=".NET MAUI Backdrop Back Layer" style="width:100%">

  <figcaption>.NET MAUI Backdrop Back Layer</figcaption>

</figure>

## Reveal and conceal the back layer

The Backdrop provides options to reveal and conceal the back layer.

- **Programmatically** : Reveals the back layer by setting the [IsBackLayerRevealed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html#Syncfusion_Maui_Backdrop_SfBackdropPage_IsBackLayerRevealed "IsBackLayerRevealed property of .NET MAUI Backdrop control") property to true. By default, it is set to false.
- **Touch interaction** : Reveals the back layer by tapping the toolbar icon at the top-right corner of the navigation bar header. The hamburger icon reveals the back layer, while the close icon conceals it. When adding the Backdrop as a child of the FlyoutPage, the hamburger, and close icons will be replaced by expand (or down arrow) and collapse (or up arrow) icons, respectively.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/image005.gif" alt="Touch Interaction in .NET MAUI Backdrop Interface" style="width:100%">

  <figcaption>Touch Interaction in .NET MAUI Backdrop Interface</figcaption>

</figure>

- **Swipe or flick action** : Reveals the back layer when swiping or flicking the front layer header. Swipe downward to reveal, and swipe upward to conceal the back layer. The swipe or flick action will be handled only on the top of the front layer (header).

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/image006.gif" alt=".NET MAUI Backdrop UI with Swipe Action" style="width:100%">

  <figcaption>.NET MAUI Backdrop UI with Swipe Action</figcaption>

</figure>

## Add the .NET MAUI Backdrop to your application

We have seen the key features of the .NET MAUI Backdrop control. Let’s see how to create a simple .NET MAUI app with the Backdrop to demonstrate its primary usage.

### Step 1: Create a .NET MAUI app.

First, [create a new .NET MAUI](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android "Build your first .NET MAUI app documentation") app in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio").

### Step 2: Install the NuGet packages.

Syncfusion .NET MAUI controls are available in the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the SfBackdropPage control to your project, open the **NuGet package manager** in Visual Studio, and search for **Syncfusion.Maui.Backdrop** , and then install it.

### Step 3: Handler registration.

The **Syncfusion.Maui.Core** NuGet package is a dependent package for all Syncfusion .NET MAUI controls. In the **MauiProgram.cs** file, register the handler for the Syncfusion core package using the **ConfigureSyncfusionCore()** method.

Refer to the following code.

```csharp
public static class MauiProgram
{
   public static MauiApp CreateMauiApp()
   {
      var builder = MauiApp.CreateBuilder();
      builder
	.UseMauiApp<App>()
	.ConfigureSyncfusionCore()
	.ConfigureFonts(fonts =>
	{
	   fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
	   fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
	});
      return builder.Build();
  }
}
```

### Step 4: Initializing Backdrop

Create a page and import the **SfBackdropPage** XAML namespace. Refer to the following code.

```xml
<backdrop:SfBackdropPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                         
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  x:Class= “BackdropGettingStarted.BackdropSamplePage”
  Title= “Menu”
  xmlns:backdrop= “clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop”
  IsBackLayerRevealed= “True”>
```

**Note:** The [Title](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.page.title?view=net-maui-6.0 "Page.Title property of .NET MAUI Framework") and [ToolBarItems](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.page.toolbaritems?view=net-maui-6.0 "Page.ToolbarItems property of .NET MAUI Framework") properties of the [Page](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.page?view=net-maui-6.0 "Page Class of .NET MAUI Framework") can be used to customize the appearance of the navigation bar header.

### Step 5: Configure the header

The page navigation bar header for the Backdrop appears only when adding Backdrop as a child of the NavigationPage. To learn more about it, refer to the [header configuration](https://help.syncfusion.com/maui/backdrop/header-configuration "Header Configuration in .NET MAUI Backdrop documentation").

### Step 6: Add back layer content

The back layer holds actionable content (navigation or filtration) relevant to the front layer. The back layer will either fill the entire background or occupy the background based on the content height. Add a back layer using the [BackLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html#Syncfusion_Maui_Backdrop_SfBackdropPage_BackLayer "BackLayer property of .NET MAUI Backdrop control") property as shown in the code below.

```xml
<backdrop:SfBackdropPage.BackLayer>
   <backdrop:BackdropBackLayer>
     <Grid>
       <Grid.RowDefinitions>
          <RowDefinition Height= “Auto”/>
       </Grid.RowDefinitions>
       <ListView>
         <ListView.ItemsSource>
           <x:Array Type="{x:Type x:String}">                         
              <x:String>Appetizers</x:String>
              <x:String>Soups</x:String>                          
              <x:String>Desserts</x:String>                            
              <x:String>Salads</x:String>
           </x:Array>
         </ListView.ItemsSource>
      </ListView>
    </Grid>
  </backdrop:BackdropBackLayer>
</backdrop:SfBackdropPage.BackLayer>
```

### Step 7: Add front layer content

The front layer always appears in front of the back layer and holds primary content. Add the front layer using the [FrontLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html#Syncfusion_Maui_Backdrop_SfBackdropPage_FrontLayer "FrontLayer property of .NET MAUI Backdrop control") property as shown in the code below.

```xml
<backdrop:SfBackdropPage.FrontLayer>
    <backdrop:BackdropFrontLayer>
        <Grid BackgroundColor= “WhiteSmoke”/>
    </backdrop:BackdropFrontLayer>
</backdrop:SfBackdropPage.FrontLayer>
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/image007.gif" alt=".NET MAUI Backdrop Front Layer Content" style="width:100%">

  <figcaption>.NET MAUI Backdrop Front Layer Content</figcaption>

</figure>

## GitHub reference

For more information, refer to the [.NET MAUI Backdrop Control Getting Started demo on GitHub](https://github.com/SyncfusionExamples/Getting-started-with-.NET-MAUI-Backdrop- ".NET MAUI Backdrop control GitHub demo").

## Conclusion

Thanks for reading! In this blog, we walked you through the new [Syncfusion .NET MAUI Backdrop control](https://www.syncfusion.com/maui-controls/maui-backdrop "Syncfusion .NET MAUI Backdrop control") and its features. For more information, refer to its [user guide](https://help.syncfusion.com/maui/backdrop/getting-started "Getting started with .NET MAUI Backdrop control").

Leave your feedback in the comments section below.

Refer to our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.4.0.38 "Syncfusion Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "What’s New in Syncfusion Products") pages to check out the other updates in this release. Also, you can contact us through our [support forums](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/support/tickets "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion .NET MAUI 2023 Roadmap](https://www.syncfusion.com/blogs/post/syncfusion-net-maui-2023-roadmap.aspx "Blog: Syncfusion .NET MAUI 2023 Roadmap")
- [Introducing the New .NET MAUI Rating Control](https://www.syncfusion.com/blogs/post/dotnet-maui-rating-control.aspx "Blog: Introducing the New .NET MAUI Rating Control")
- [Introducing the Sixth Set of .NET MAUI Controls](https://www.syncfusion.com/blogs/post/introducing-the-sixth-set-of-net-maui-controls.aspx "Blog: Introducing the Sixth Set of .NET MAUI Controls")
- [Authenticate the .NET MAUI App With Azure AD](https://www.syncfusion.com/blogs/post/authenticate-the-net-maui-app-with-azure-ad.aspx "Blog: Authenticate the .NET MAUI App With Azure AD")
- [Agenda View in .NET MAUI Scheduler: A Perfect Tool for Modern-Day Office Management](https://www.syncfusion.com/blogs/post/agenda-view-in-net-maui-scheduler-a-perfect-tool-for-modern-day-office-management.aspx "Blog: Agenda View in .NET MAUI Scheduler: A Perfect Tool for Modern-Day Office Management")