Class SfBackdropPage

Inheritance

System.Object

SfBackdropPage

Namespace: Syncfusion.Maui.Backdrop

Assembly: Syncfusion.Maui.Backdrop.dll

Syntax

public class SfBackdropPage : ContentPage, IPanGestureListener, IGestureListener, ITouchListener, IParentThemeElement, IThemeElement

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         IsBackLayerRevealed="True"
                         BackLayerRevealOption="Auto"
                         OpenText="Show menu"
                         CloseText="Hide menu"
                         CloseIconImageSource="close.png"
                         OpenIconImageSource="open.png"
                         BackLayerStateChanged="SfBackdropPage_BackLayerStateChanged">

    <backdrop:SfBackdropPage.BackLayer>
        <backdrop:BackdropBackLayer>
            <StackLayout Margin="5">
                <Label Text="Appetizers"/>
                <Label Text="Soups"/>
                <Label Text="Desserts"/>
                <Label Text="Salads"/>
            </StackLayout>
        </backdrop:BackdropBackLayer>
    </backdrop:SfBackdropPage.BackLayer>

    <backdrop:SfBackdropPage.FrontLayer>
        <backdrop:BackdropFrontLayer EdgeShape="Curve"
                                     EnableSwiping="False"
                                     LeftCornerRadius="20"
                                     RightCornerRadius="20"
                                     RevealedHeight="100"
                                     >
            <StackLayout>
                <Label Text="Subheader"
                       Padding="10,0,0,0" 
                       VerticalTextAlignment="Center" 
                       HeightRequest="48"/>
            </StackLayout>
        </backdrop:BackdropFrontLayer>
    </backdrop:SfBackdropPage.FrontLayer>

</backdrop:SfBackdropPage>

private void SfBackdropPage_BackLayerStateChanged(object sender, BackLayerStateChangedEventArgs e)
{
    DisplayAlert("Event", "!Backlayer state changed.", "Ok");
}

Constructors

SfBackdropPage()

Initializes a new instance of the SfBackdropPage class.

Declaration

public SfBackdropPage()

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         IsBackLayerRevealed="True"
                         BackLayerRevealOption="Auto"
                         OpenText="Show menu"
                         CloseText="Hide menu"
                         CloseIconImageSource="close.png"
                         OpenIconImageSource="open.png"
                         BackLayerStateChanged="SfBackdropPage_BackLayerStateChanged">

    <backdrop:SfBackdropPage.BackLayer>
        <backdrop:BackdropBackLayer>
            <StackLayout Margin="5">
                <Label Text="Appetizers"/>
                <Label Text="Soups"/>
                <Label Text="Desserts"/>
                <Label Text="Salads"/>
            </StackLayout>
        </backdrop:BackdropBackLayer>
    </backdrop:SfBackdropPage.BackLayer>

    <backdrop:SfBackdropPage.FrontLayer>
        <backdrop:BackdropFrontLayer EdgeShape="Curve"
                                     EnableSwiping="False"
                                     LeftCornerRadius="20"
                                     RightCornerRadius="20"
                                     RevealedHeight="100"
                                     >
            <StackLayout>
                <Label Text="Subheader"
                       Padding="10,0,0,0" 
                       VerticalTextAlignment="Center" 
                       HeightRequest="48"/>
            </StackLayout>
        </backdrop:BackdropFrontLayer>
    </backdrop:SfBackdropPage.FrontLayer>

</backdrop:SfBackdropPage>

private void SfBackdropPage_BackLayerStateChanged(object sender, BackLayerStateChangedEventArgs e)
{
    DisplayAlert("Event", "!Backlayer state changed.", "Ok");
}

Fields

BackLayerProperty

Identifies the BackLayer bindable property.

Declaration

public static readonly BindableProperty BackLayerProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for BackLayer bindable property.

BackLayerRevealOptionProperty

Identifies the BackLayerRevealOption bindable property.

Declaration

public static readonly BindableProperty BackLayerRevealOptionProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for BackLayerRevealOption bindable property.

CloseIconImageSourceProperty

Identifies the CloseIconImageSource bindable property.

Declaration

public static readonly BindableProperty CloseIconImageSourceProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for CloseIconImageSource bindable property.

CloseTextProperty

Identifies the CloseText bindable property.

Declaration

public static readonly BindableProperty CloseTextProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for CloseText bindable property.

FrontLayerProperty

Identifies the FrontLayer bindable property.

Declaration

public static readonly BindableProperty FrontLayerProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for FrontLayer bindable property.

IsBackLayerRevealedProperty

Identifies the IsBackLayerRevealed bindable property.

Declaration

public static readonly BindableProperty IsBackLayerRevealedProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for IsBackLayerRevealed bindable property.

OpenIconImageSourceProperty

Identifies the OpenIconImageSource bindable property.

Declaration

public static readonly BindableProperty OpenIconImageSourceProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for OpenIconImageSource bindable property.

OpenTextProperty

Identifies the OpenText bindable property.

Declaration

public static readonly BindableProperty OpenTextProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for OpenText bindable property.

Properties

BackLayer

Gets or sets a value for a view to place behind the BackdropFrontLayer.

Declaration

public BackdropBackLayer BackLayer { get; set; }

Property Value

Type	Description
BackdropBackLayer	The back layer content.

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         >

    <backdrop:SfBackdropPage.BackLayer>
        <backdrop:BackdropBackLayer>
            <StackLayout>
                <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>
            </StackLayout>
        </backdrop:BackdropBackLayer>
    </backdrop:SfBackdropPage.BackLayer>

</backdrop:SfBackdropPage>

this.BackLayer = new BackdropBackLayer
{
    Content = new StackLayout
    {
        Children = 
        { 
            new ListView 
            {
                ItemsSource = new string[]
                {
                    "Appetizers",
                    "Soups",
                    "Desserts",
                    "Salads"
                } 
            }
        }
    }
};

BackLayerRevealOption

Gets or sets the value that indicate how the back layer gets revealed.

Declaration

public RevealOption BackLayerRevealOption { get; set; }

Property Value

Type	Description
RevealOption	The reveal option for back layer. The default value is Fill.

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         BackLayerRevealOption="Auto">

</backdrop:SfBackdropPage>

this.BackLayerRevealOption = RevealOption.Auto;

CloseIconImageSource

Gets or sets the image source value for the CloseIconImageSource.

Declaration

public ImageSource CloseIconImageSource { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.ImageSource	The default value for navigation page is close icon (x mark). For flyout page is up arrow icon.

Remarks

The CloseIconImageSource in SfBackdropPage accepts the following inputs. FromFile, FromUri, FromResource, FromStream.

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         CloseIconImageSource="close.png"
                         >

</backdrop:SfBackdropPage>

this.CloseIconImageSource = "close.png";

CloseText

Gets or sets the value to display the CloseIconImageSource text.

Declaration

public string CloseText { get; set; }

Property Value

Type	Description
System.String	The default value is `Close`.

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         CloseText="Hide menu">

</backdrop:SfBackdropPage>

this.CloseText = "Hide menu";

Content

Gets the view that contains the content of the Page.

Declaration

public View Content { get; }

Property Value

Type
Microsoft.Maui.Controls.View

ControlTemplate

Gets the control template that is used to display content.

Declaration

public ControlTemplate ControlTemplate { get; }

Property Value

Type
Microsoft.Maui.Controls.ControlTemplate

FrontLayer

Gets or sets a value for a view to place above the BackdropBackLayer.

Declaration

public BackdropFrontLayer FrontLayer { get; set; }

Property Value

Type	Description
BackdropFrontLayer	The front layer content.

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         >


    <backdrop:SfBackdropPage.FrontLayer>
        <backdrop:BackdropFrontLayer EdgeShape="Curve"
                                     EnableSwiping="False"
                                     LeftCornerRadius="20"
                                     RightCornerRadius="20"
                                     RevealedHeight="100"
                                     >
            <StackLayout>
                <Label Text="Subheader"
                       Padding="10,0,0,0" 
                       VerticalTextAlignment="Center" 
                       HeightRequest="48"/>
            </StackLayout>
        </backdrop:BackdropFrontLayer>
    </backdrop:SfBackdropPage.FrontLayer>

</backdrop:SfBackdropPage>

this.FrontLayer = new BackdropFrontLayer()
{
    EdgeShape = EdgeShape.Curve,
    EnableSwiping = false,
    LeftCornerRadius = 20,
    RightCornerRadius = 20,
    RevealedHeight = 100,
    Content = new StackLayout
    {
        Children =
        {
            new Label
            {
                Text="Subheader",
                VerticalTextAlignment=TextAlignment.Center,
                Padding = new Thickness(10,0,0,0),
                HeightRequest=48
            }
        }
    }
};

IsBackLayerRevealed

Gets or sets a value indicating whether back layer should be in expanded state.

Declaration

public bool IsBackLayerRevealed { get; set; }

Property Value

Type	Description
System.Boolean	`true` if revealed; otherwise, `false`. The default value is `false`.

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         IsBackLayerRevealed="True">

</backdrop:SfBackdropPage>

this.IsBackLayerRevealed = true;

OpenIconImageSource

Gets or sets the image source value for the OpenIconImageSource.

Declaration

public ImageSource OpenIconImageSource { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.ImageSource	The default value for navigation page is hamburger icon. For flyout page is down arrow icon.

Remarks

The OpenIconImageSource in SfBackdropPage accepts the following inputs. FromFile, FromUri, FromResource, FromStream.

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         OpenIconImageSource="open.png"
                         >

</backdrop:SfBackdropPage>

this.OpenIconImageSource = "open.png";

OpenText

Gets or sets the value to display the OpenIconImageSource text.

Declaration

public string OpenText { get; set; }

Property Value

Type	Description
System.String	The default value is `Open`.

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         OpenText="Show menu">

</backdrop:SfBackdropPage>

this.OpenText = "Show menu";

Padding

Gets the space between the content of the Page and it's border.

Declaration

public Thickness Padding { get; }

Property Value

Type
Microsoft.Maui.Thickness

Methods

GetTouchHeight()

Gets the value for fornt layer touch height.

Declaration

protected virtual double GetTouchHeight()

Returns

Type	Description
System.Double	The touch height.

OnAppearing()

When overridden, allows application developers to customize behavior immediately prior to the Page becoming visible.

Declaration

protected override void OnAppearing()

OnDisappearing()

To customize behavior when the Page disappears.

Declaration

protected override void OnDisappearing()

OnSizeAllocated(Double, Double)

Handles the size allocated.

Declaration

protected override void OnSizeAllocated(double width, double height)

Parameters

Type	Name	Description
System.Double	width	The width.
System.Double	height	The height.

Events

BackLayerStateChanged

Occurs when the back layer gets revealed or concealed.

Declaration

public event EventHandler<BackLayerStateChangedEventArgs> BackLayerStateChanged

Event Type

Type	Description
System.EventHandler<BackLayerStateChangedEventArgs>	Occurs when the back layer gets revealed or concealed.

Examples

XAML
C#

<backdrop:SfBackdropPage 
                         ...
                         xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"
                         BackLayerStateChanged="SfBackdropPage_BackLayerStateChanged">

    <backdrop:SfBackdropPage.BackLayer>
        <backdrop:BackdropBackLayer>
        </backdrop:BackdropBackLayer>
    </backdrop:SfBackdropPage.BackLayer>

    <backdrop:SfBackdropPage.FrontLayer>
        <backdrop:BackdropFrontLayer>
        </backdrop:BackdropFrontLayer>
    </backdrop:SfBackdropPage.FrontLayer>

</backdrop:SfBackdropPage>

private void SfBackdropPage_BackLayerStateChanged(object sender, BackLayerStateChangedEventArgs e)
{
    DisplayAlert("Event", "!Backlayer state changed.", "Ok");
}