Slide up panel to enter data

[Reza]

Does SF have a control that will slide up halfway like a panel? Something like this:

What I would like to have is a floating image of an 'Add' button on the main screen, and when that imagebutton is pressed to have a small panel slide up that has a textinput and an 'Add' and 'Cancel' button.

[Sridevi Sivakumar]

Hi Reza Mohamed,

Greetings from Syncfusion.

We would like to inform you that, the Syncfusion SfBackdropPage control will help to achieve your requirement. Add you required items inside the front layer of backdrop page.

For more information about SfBackdropPage, refer below UG link.
https://help.syncfusion.com/xamarin/backdrop-page/getting-started

Let us know if you need any further assistance.

Regards,
Sridevi S. 

[Reza]

The SFBackDropPage has very limited use beyond just for a navigation example. I am looking for something more like the Slide Up Menu here: https://github.com/XAM-Consulting/SlideOverKit#sliding-up-menu

Do you have a control or sample to achieve that?

[Sridevi Sivakumar]

Hi Reza Mohamed,

 

We have analysed the shared link and you can move the backdrop layers up and down. We have prepared sample for your requirement. Please have a sample from below link
https://www.syncfusion.com/downloads/support/directtrac/general/ze/BackdropGettingStarted1256938636 

 

Are expecting to show the drawer in different sides? We have suggested you to use our SfNavigationdrawer control.   

For more information about navigation drawer 

https://help.syncfusion.com/xamarin/navigation-drawer/getting-started  

 

You can change the drawer position by using the navigation drawer Position property 

https://help.syncfusion.com/xamarin/navigation-drawer/navigation-pane-sides  

Regards,
Sridevi S. 

 

[Reza]

I examined both options, but still unclear how to use this. My use case is that I have a few contentPages already, and I want to create a custom control that will have the features of the backdroppanel/frontLayer. So ideally I am looking to just add a custom control to the existing pages that will add a panel. 

In both cases of backdroppanel and navigationdrawer, I don't see how a custom control could be made since it would require rewriting all the existing contentpages.

(1) I built a demo project, can this be done with SF controls? https://github.com/rezamohamed/PancakeViewDemo

the biggest issue for me with this is setting the height manually using this (it doesn't work consistently between iOS and Android devices)

var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
double startHeight = mainDisplayInfo.Height /6;

(2) With the SfTextInput, how do I remove the long line at the bottom of the text input? I looked into the Essential UI Kit/Borderless entry, but it doesn't allow me for Max Char count, and Show the Character remaining. (In the image below, its the red line)

(3) there is some space in the SfTextInput from the top of the control to where the user actually enters the data, how do you remove that space? (In the image below, you can see the space from the cursor to the top of the control)

(4) On both the keyboards iOS/Android, is it possible to disable the closeing of the keyboard? The keyboard will stay open while the panel is open, until the Cancel button is clicked.

[Sridevi Sivakumar]

Hi Reza Mohamed, 

Query: In both cases of backdrop panel and navigation drawer, I don't see how a custom control could be made since it would require rewriting all the existing content pages.
SfBackDropPage is a content page, if you like to add backdrop page in your application, you have to change your page top class as SfBackdropPage as like below.

Code snippet 

  

<?xml version="1.0" encoding="UTF-8"?> 

<backdrop:SfBackdropPage 

    xmlns=http://xamarin.com/schemas/2014/forms 

    xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml 

    xmlns:backdrop="clr-namespace:Syncfusion.XForms.Backdrop;assembly=Syncfusion.SfBackdrop.XForms" 

    x:Class="BackdropGettingStarted.BackdropSamplePage" 

    Title="Menu"> 

  

</backdrop:SfBackdropPage> 

  

 

or you have to convert your page content as ContentView and have to add  as a back/front layer content mentioned in below. 

  

<backdrop:SfBackdropPage.BackLayer> 

        <backdrop:BackdropBackLayer> 

             //<Your custom view> 

        </backdrop:BackdropBackLayer> 

</backdrop:SfBackdropPage.BackLayer> 

  

<backdrop:SfBackdropPage.FrontLayer> 

        <backdrop:BackdropFrontLayer> 

              //<Your custom view> 

        </backdrop:BackdropFrontLayer> 

</backdrop:SfBackdropPage.FrontLayer> 

  

 

Please refer below links for more details.
https://help.syncfusion.com/xamarin/backdrop-page/getting-started#add-back-layer-content
https://help.syncfusion.com/xamarin/backdrop-page/getting-started#add-front-layer-content

For navigation drawer, you can add modify your application using below link.
https://help.syncfusion.com/xamarin/navigation-drawer/navigation-pane-sides

If you have queries related with SfNavigationDrawer, please create separate ticket.

Query: The biggest issue for me with this is setting the height manually
We have checked the reported query with the provided sample, and PancakeView is animated properly with mentioned start height, and height.  Can you please provide detailed information on the reported query?

Query: With the SfTextInput, how do I remove the long line at the bottom of the text input
We would like to inform you  that, you can achieve it by setting the SfTextInputLayout FocusedColor, UnfocusedColor to Transparent  as per the below code snippet  

 <textInputLayout:SfTextInputLayout 

                    Margin="10" FocusedColor="Transparent" UnfocusedColor="Transparent" 

                    BackgroundColor="LightGray" 

                    CharMaxLength="280" 

                    ContainerType="None" 

                    HorizontalOptions="FillAndExpand" 

                    InputViewPadding="0" 

                    ShowCharCount="True">
....
</textInputLayout:SfTextInputLayout> 

 

UG link : https://help.syncfusion.com/xamarin/text-input-layout/states-and-colors#focused-color

Query: there is some space in the SfTextInput from the top of the control to where the user actually enters the data, how do you remove that space?
We have checked the reported query with provided screenshot. Editor control maintained some space at the top of the control. We can get that top space without SfTextInputLayout also.

Query: On both the keyboards iOS/Android, is it possible to disable the closing of the keyboard? The keyboard will stay open while the panel is open, until the Cancel button is clicked.
SfTextInputLayout is a container and we didn't handle any keyboard action in that. It will be handled by SfTextInputLayout’s input views (Entry, Editor,..) only

Regards,
Sridevi S.