backdrop front layer half open

I am creating Xamarin app and I would like to open the front layer half-open. if I use the height reveal option then the back layer shrinks to half. the back layer should be under the front layer fully extended.I still could see the color of the app default back color.

i could drag the front layer and it open to full but i want to create steps like half-open of certain height open and when the user click on the button or drag to top it will extend to full screen

please have a look at the screenshots


RevealHeight.png


As i think it should be like this ( when i drag it.but i want to set is as by default)

Suggestion.png



4 Replies

SS Sridevi Sivakumar Syncfusion Team July 12, 2021 12:30 PM UTC

Hi Elizabeth Britton,

Greetings from Syncfusion.

We have analysed your requirement, and you can achieve it by setting the expected height to the SfBackdropPage RevealedHeight and enable the IsBackLayerRevealed property to true as per below code snippet

[MainPage.Xaml]:
 
<backdrop:SfBackdropPage 
    xmlns:backdrop="clr-namespace:Syncfusion.XForms.Backdrop;assembly=Syncfusion.SfBackdrop.XForms" 
    x:Class="SfBackdrop_Sample.MainPage"   x:Name="BackdropPage"  IsBackLayerRevealed="True" 
    Title="Menu"> 
    <backdrop:SfBackdropPage.BackLayer> 
        <backdrop:BackdropBackLayer > 
... 
        </backdrop:BackdropBackLayer> 
    </backdrop:SfBackdropPage.BackLayer> 
    <backdrop:SfBackdropPage.FrontLayer> 
        <backdrop:BackdropFrontLayer x:Name="frontLayer" EdgeShape="Curve" > 
... 
        </backdrop:BackdropFrontLayer> 
    </backdrop:SfBackdropPage.FrontLayer> 
</backdrop:SfBackdropPage> 

[MainPage.cs]
 
            var mainDisplayInfo = DeviceDisplay.MainDisplayInfo; 
            var height = mainDisplayInfo.Height / mainDisplayInfo.Density; 
            frontLayer.RevealedHeight = height / 2; 

Please have sample from below link
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfBackdrop_Sample-1332240239

Refer this UG document for customizing the reveal height in backdrop page.
Link: https://help.syncfusion.com/xamarin/backdrop-page/revealingheight-customization

Let us know if you need any further assistance.

Regards,
Sridevi S.

 



HA Haider Ali Faheem replied to Sridevi Sivakumar July 12, 2021 02:21 PM UTC

Thanks a lot for your reply. but your solution did not work it reduce the size of the BackLayer i want to keep the back layer at the same height and want to show the front layer on top.

your solution divide the back layer and front layer.

please have a look at the screenshot. my question was is there any way i could increase the first layer with no effect on the backlayer.

 Screenshot_20210712-161612.png



HA Haider Ali Faheem July 13, 2021 01:33 PM UTC

as I have tested the sample, the sample provides the preception of the front layer is front of the back layer because of the same background color of the back layer and application. but if you change the color of the back layer color you will notice it actually divides the front layer and back layer according to reveal height.

I think this not correct behavior of the backdrop

Screenshot_20210713-153136.png





SS Sridevi Sivakumar Syncfusion Team July 13, 2021 03:37 PM UTC

Hi Haider Ali Faheem,

We have checked your reported query,  when we set the RevealHeight to the FrontLayer and the FrontLayer is placed on top of the back layer and height of the SfBackdropPage Back Layer will not be shrink.  The front layer will be added on top of the back layer. But back layer is rendered with its actual height. We have 15 labels in the Back layer and can view 10 of them. The remaining labels are rendered in back of the front layer, it means they are not visible.


Screenshot:


Please have a sample from below link

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfBackdrop_Sample-93168893

Can you please check the sample and revert us if your requirement is different from this?

Regards,
Sridevi S.
 


Loader.
Up arrow icon