Push DrawerContent up when Textinput control in focus

[Reza]

Using this guide, https://xamgirl.com/adjusting-elements-when-keyboard-shows-in-xamarin-forms/ I am able to create a custom control to push the TextInput up when the focus is on the control and the Keyboard appears. In the sample project, this is in the KeyboardPushPage. 

However, I would like to do the same in the NavigationDrawer - essentially to slide the entire drawer up, but I can't quite get it to work. This is on the MainPage.

Can you help with getting the Keyboard to slide the DrawerContentView up when the focus is on the TextInput, please?

Attachment: DrawerCustomKeyboard_42e408a6.zip

[Suganya Sethuraman]

Hi Reza,

Greetings from Syncfusion.

We have analyzed your query and we can resolve the reported issue by adding ScrollView in as like below code snippet.

XAML:

  

<navigationDrawer:SfNavigationDrawer.DrawerContentView>  

           <ScrollView>  

            <StackLayout >  

                

            <Grid VerticalOptions="FillAndExpand" BackgroundColor="Bisque">  

                <Grid.RowDefinitions>  

                    <RowDefinition Height="Auto"></RowDefinition>  

                    <RowDefinition Height="*"></RowDefinition>               

                </Grid.RowDefinitions>  

                  

                <Label Text="Title" BackgroundColor="Red"  Grid.Row="0"/>  

                <textInputLayout:SfTextInputLayout  

                    Grid.Row="1"  

                    Margin="10"  

                    BackgroundColor="LightGray"  

                    CharMaxLength="280"  

                    ContainerType="None"  

                    HorizontalOptions="FillAndExpand"  

                    VerticalOptions="EndAndExpand"  

                    InputViewPadding="0"  

                    ShowCharCount="True">  

                    <Editor  

                        x:Name="txtEntry"  

                        FontFamily="Font-Medium"  

                        FontSize="12" HeightRequest="150"/>  

                </textInputLayout:SfTextInputLayout>  

                 

            </Grid>  

                   

          </StackLayout>  

               </ScrollView>  

        </navigationDrawer:SfNavigationDrawer.DrawerContentView>  

 

We modified your sample and please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/DrawerCustomKeyboard813093007

Please let us know if you have any other queries.

Regards,
Suganya Sethuraman. 

 

[Reza]

That is a lazy solution - using a scrollview. All that does is it pushes all the contents of the DrawerContentView above the viewable area of the Drawer. 

Hence the specific question about how to increase the Drawer Height - so I can show keep showing all the content above the Editor. Even the other ContentPage that I had as a sample shows the desired effect.

[Suganya Sethuraman]

Hi Reza,

Sorry for the inconvenience.

Quer1: All that does is it pushes all the contents of the DrawerContentView above the viewable area of the Drawer

We have analyzed your query and currently we don’t have support for slide up the drawer above the keyboard.

Query 2: Hence the specific question about how to increase the Drawer Height

We can increase the drawer height by setting DrawerHeight property of SfNavigationDrawer control as like below code snippet.

XAML:

  

<navigationDrawer:SfNavigationDrawer  

        x:Name="navigationDrawer" DrawerHeight="200"  

        DrawerHeaderHeight="100" DrawerFooterHeight="0"  

        Position="Bottom">  

Please let us know if you have any other queries.

Regards,
Suganya Sethuraman.  

[Reza]

How can I make the DrawerContentView take up the entire height of the device? 

Also, need to make sure that when iOS safe area is set, that it only takes up the space between the bounds of the safe area.

xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true"

[Suganya Sethuraman]

Hi Reza,

Thanks for the update.

We can achieve your requirement by overriding OnSizeAllocated method as like below code snippet.

C#:  

public partial class MainPage : ContentPage  

    {  

        public MainPage()  

        {  

            InitializeComponent();  

        }  

  

  

        protected override void OnSizeAllocated(double width, double height)  

        {  

            base.OnSizeAllocated(width, height);  

  

            navigationDrawer.DrawerHeight = (float)height;  

        }  

    }  

Please let us know if you have any other queries. 

Regards,
Suganya Sethuraman. 

[Reza]

This is simply a method to overrride width and height, that is not my question. 

I asked how can we apply something that automatically takes up the entire height of the screen since the height varies by device. Is there something like DrawerContentView.Height=100% or equivalent.

[Suganya Sethuraman]

Hi Reza,

We don't have direct support for take the complete screen height to DrawerContentView. We can set DrawerHeight as the height instead. So that we have provided workaround to achieve your requirement.

Please let us know if you have any other queries.

Regards,
Suganya Sethuraman.