How to reveal the back Layer programmatically in the .NET MAUI Backdrop Page?

The Syncfusion® .NET MAUI Backdrop Page control allows you to reveal and conceal the back layer programmatically. In this article, you will learn how to reveal and conceal the backdrop page’s back layer through the following steps.

Step 1:
Initialize the SfBackdropPage control in your content page or your MainPage, as shown in the following code sample.

XAML

<backdrop:SfBackdropPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                        xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                        x:Class="RevealBackLayer.MainPage">

</backdrop:SfBackdropPage>

C#

public partial class MainPage : SfBackdropPage
{
   public MainPage()
   {
       InitializeComponent();
   }
}

Step 2:

Add the BackdropBackLayer to the Backdrop Page using the BackLayer property and provide actionable content.

XAML

<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 3:

Add the BackdropFrontLayer to the Backdrop Page using the FrontLayer property and provide a Label and Button with the Clicked event.

XAML

<backdrop:SfBackdropPage.FrontLayer>
   <backdrop:BackdropFrontLayer>
       <Grid>
           <Label Text="Menu"
                  FontSize="Medium"
                  Padding="15" />
           <Button Text="🗓"
                   Grid.Column="1"
                   HorizontalOptions="End"
                   VerticalOptions="Start"
                   Clicked="OnBackLayerTapped"
                   BackgroundColor="Transparent" />
       </Grid>
   </backdrop:BackdropFrontLayer>
</backdrop:SfBackdropPage.FrontLayer>

Step 4:
In the Button.Clicked event, set the IsBackLayerRevealed property to True or False to reveal and conceal the back layer of the backdrop page.

C#

private void OnBackLayerTapped(object sender, EventArgs e)
{
   if (!IsBackLayerRevealed)
   {
       this.IsBackLayerRevealed = true;
   }
   else
   {
       this.IsBackLayerRevealed = false;
   }
}

Download the complete sample on GitHub.

Output:

Conclusion:

I hope you enjoyed learning how to reveal the back layer programmatically in the .NET MAUI Backdrop Page.

You can refer to our .NET MAUI Backdrop Page’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Backdrop Page documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI Backdrop Page and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!