SfNavigationDrawer fails to render correctly after being returned to the top of the stack

[Martin Clarke]

This one's a bit odd.  If anyone is able to offer any insight it would be greatly appreciated!

Scenario:

Simple MainPage, inside a NavigationPage, that contains the SfNavigationDrawer control. The Navigation Drawer contains a single item in the ListView that pushes another page onto the stack when it is tapped. When the user returns from this page - back to the original main page containing the SfNavigationDrawer control - the page is blank.  If the page is tapped, then ~90% of it turns black, with it flickering briefly back to white if tapped again.  There is nothing else on the page and again pressing the back button, minimises the application.

Investigation thus far:

• Hid the Navigation Drawer before pushing the new page onto the stack
• Loaded the example solution for the SfNavigationDrawer control (SfNavigationDrawerSampleBrowser) which worked correctly and did not display the symptoms I was seeing.  Transposing this code into my solution resulted in the same issues as I previously mentioned.
• Ultimately narrowed down the "cause" to a single line of code: NavigationPage.SetHasNavigationBar(page, false);  Removing this line of code resulted in the control rendering correctly, reinstating it reinstated the problem.
  

Conclusion:

Lack of a navigation bar, while in a navigation page, causes the page containing the SfNavigationDrawer to render incorrectly when the user is returned to it via the navigation "back" action.

Referenced Assembly versions: 

• Xamarin.Forms - v2.5.0.91635
• Syncfusion.Xamarin.SfNavigationDrawer - v15.4.0.17
• Syncfusion.Xamarin.SfNavigationDrawer.Android - v15.4.0.17
• Syncfusion.Xamarin.DataSource - 15.4.0.17
• Syncfusion.Xamarin.GridCommon - 15.4.0.17
• Syncfusion.Xamarin.Core - 15.4.0.17
• Syncfusion.Xamarin.SfListView - 15.4.0.17
  

[Selva Kumar Veerakrishnan]

Hi Martin,

Thank you for contacting Syncfusion Support.

We could not able to reproduce the reported issue in our latest release. We have prepared a sample based on query, please download it from the link given below.

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawer2_4-1816067971.zip
 
We have a Knowledge base in which we have explained in detail about adding SfNavigationDrawer inside a NavigationPage. Please find the Knowledge base link from the link given below.

Knowledge Base : https://www.syncfusion.com/kb/7642/how-to-enable-and-disable-the-navigation-bar-on-the-main-page

If the issue persist at your end, please let us know with the sample modification with the replication procedure of the issue.

Please let us know if you have any concern about this.

Regards,
Selva Kumar V.

[Martin Clarke]

Thanks for the feedback!

Having played around with the example you sent through I did notice you placed the SfNavigationDrawer inside a Grid. I did the same in my project and the rendering issue went away.  It immediately returned after I took the control out of the Grid, so it does appear that there is a bug in the rendering of the control - admittedly it only occurs in a very specific scenario.

As my problem has been resolved I won't be investigating this further.  Thanks for the assistance.

[Selva Kumar Veerakrishnan]

Hi Martin,

Thanks for your response, also please let us know if you need any other assistance on this.

Regards,
Selva Kumar V.

[Charaf]

I am having the same issue, the SfNavigationDrawer doesn't render when navigating back to the page if HasNavigationBar is set to false, unless it is wrapped inside a grid control with a fixed height row.

[Rabhia Beham Kathar Mideenar]

Hi Charaf,

We are unable to reproduce the reported issue and have prepared a sample for the same using SfNavigationDrawer Control. Please check whether the sample meets your requirement. Please have the sample from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/134619/ze/NavigationDrawerGettingStarted_5-1-1769430041 

Please Check the sample provided and if the issue still persists from your side. Please modify the same with issue reproducing steps which will be helpful for us to analyse further and update the appropriate solution.

Please let us know if you have any query.

Regards,
Rabhia Beham K. 

[Charaf]

Hi Rabhia,
Sorry for the delay. To reproduce the issue in your solution you can set NavigationPage.HasNavigationBar="True" in the second page "Page 2" and try going back.

Hope this helps,

Regards,
C

[Rabhia Beham Kathar Mideenar]

Hi Charaf,

We have checked the sample with NavigationPage.HasNavigationBar="True" in the second page "Page 2" and unfortunately we are not able to reproduce the reported issue from our side.

We have also recorded a video by setting NavigationPage.HasNavigationBar="True”.

Video Link:  http://www.syncfusion.com/downloads/support/forum/134619/ze/NavigationDrawer956982879 

If the issue still persists from your side.Please modify the same with issue reproducing steps and also provide us the device details in which the issue is getting reproduced which will be helpful for us to analyse further and update the appropriate solution.

Please let us know if you have any concern.

Regards,
Rabhia Beham K. 

[Charaf]

Hi Rabhia,
I appreciate the quick response. In your video you are not actually going back but doing a new navigation call. do you have the same behavior when navigating back (with using device back button or NavigationBar back button?

Regards,
C

[Rabhia Beham Kathar Mideenar]

 Hi Charaf, 

Sorry for the inconvenience.
We could reproduce the reported issue from our side in SfNavigationDrawer Control.We have created a workaround for the same.Please have the sample from the below link.
Sample Link: http://www.syncfusion.com/downloads/support/forum/134619/ze/NavigationDrawerGettingStarted_5-1_61114825958
Please let us know if you have any concern. 

Regards,
Rabhia Beham K. 

[bulent]

Hi,

I have the same problem. My main page has a drawer control and it's contentview is a grid with 2 rows. First row height is a star so that the second row is at the bottom of the screen. After a navigation occurs to another page and pop to the main page, the second row isn't on the visible area anymore. If I rotate the device to landscape, it appears again and after that rotating to portrait again and it displays the second row. What is the workaround for this? I only use code and not xaml. Here is my code part:

            grid = new Grid
            {
                RowSpacing = 0,
                ColumnSpacing = 1,
                BackgroundColor = AppStyle.WhiteColor,
                Padding = new Thickness(3, 0, 3, 0),
            };

            int satir = 0;
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });




            image = new Image
            {
                Aspect = Aspect.AspectFit,
            };
            grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });
            grid.Children.Add(image, 0, satir++);
            Grid.SetColumnSpan(image, 6);


            var scanButton = new Button
            {
                Style = AppStyle.BasicButton,
                Text = AppResources.ScanCard,
                HorizontalOptions = LayoutOptions.FillAndExpand,
            };
            scanButton.Clicked += ScanButton_Clicked;
            grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
            grid.Children.Add(scanButton, 2, satir++);
            Grid.SetColumnSpan(scanButton, 2);


            drawer.ContentView = grid;

            this.Content = drawer;

[Martin Clarke]

Hi bulent,

Try creating an event handler for the Appearing page event and have it remove and re-add the row. Should have the same effect as altering the orientation of the phone. A dirty workaround though.

[Rabhia Beham Kathar Mideenar]

Hi bulent,

We have analysed your code snippet and have prepared a sample fro our side using SfNavigationDrawer Control.Unfortunately we are not able to reproduce the reported issue from our side. Please have the sample from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/134619/ze/NavigationDrawer271869803269 

If the issue still persists from your side.Please modify the same with issue reproducing steps and also provide us the device details, the platform in which the issue is getting reproduced which will be helpful for us to analyse further and update the appropriate solution.

Please let us know if you have any concern.

Regards,
Rabhia Beham K.
 

[Jared]

Hi bulent,

We have analysed your code snippet and have prepared a sample fro our side using SfNavigationDrawer Control.Unfortunately we are not able to reproduce the reported issue from our side. Please have the sample from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/134619/ze/NavigationDrawer271869803269 

If the issue still persists from your side.Please modify the same with issue reproducing steps and also provide us the device details, the platform in which the issue is getting reproduced which will be helpful for us to analyse further and update the appropriate solution.

Please let us know if you have any concern.

Regards,
Rabhia Beham K.
 

I too am confused by this rendering bug. Having to reset the content on returning to the main page is quite the hack. Given the SfNavigationDrawer doesn't seem to overlap the navigation bar, hiding the navigation bar on the main page seems like a mandatory step. For this to break the main page after using the back button is a significant problem. I also find it odd that the Syncfusion Xamarin Samples app doesn't use SfNavigationDrawer itself for the main flyout. I guess there'd be issues with nested navigation drawers, but even ignoring that, I don't see how SfNavigationDrawer could be used to achieve the same effect.

In the case of the above sample, the bug can be reproduced just by hiding the navigation bar on the first page.

[Rabhia Beham Kathar Mideenar]

Hi Jared,

Sorry for the inconvenience.

We would like to let you know that SfNavigationDrawer control is a content control in which we cannot have multiple pages loaded and navigate between them. We have to change the content view of the NavigationDrawer based on our requirement. So, we have used MasterDetails page for our Xamarin samples app to have pages having each sample.

We were able to reproduce the reported issue in SfNavigationDrawer Control. We have logged the defect report for the same. We are currently working on the reported issue and the fix for the same will be available in Volume 2 Release which is expected to be rolled out by the end of May 2018.

Please let us know if you have any concern.

Regards,
Rabhia Beham K.