Reveal Height Customization in MAUI Backdrop Page (SfBackdropPage)

22 Dec 20224 minutes to read

When revealing the back layer, the front layer will be moved downwards. By setting the BackLayerRevealOption property of the backdrop, customize how far the front layer can be moved from the header when revealing the back layer.

The following options are provided to move the front layer:

Fill – Moves the front layer downwards to the entire height of the page, excluding the RevealedHeight.

Auto – Moves the front layer downwards to the height of the back layer content.

<backdrop:SfBackdropPage xmlns=""

                    <RowDefinition Height="Auto"/>
                <ListView >
                        <x:Array Type="{x:Type x:String}">

            <Grid BackgroundColor="WhiteSmoke" />

this.IsBackLayerRevealed = true;
this.BackLayerRevealOption = RevealOption.Auto;
this.BackLayer = new BackdropBackLayer
    Content = new Grid
        RowDefinitions =
            new RowDefinition () { Height = GridLength.Auto}
        Children =
            new ListView
                ItemsSource = new string[] { "Appetizers", "Soups", "Desserts" ,"Salads"}

this.FrontLayer = new BackdropFrontLayer()
    Content = new Grid
        BackgroundColor = Colors.WhiteSmoke,

.NET MAUI Backdrop reveal height customization