Customising DrawerHeader

[Benjamin]

how do i set the drawer header background color to transparent, or how do I remove the white part from the image below

I want the drawer header to looks something like this

And i would like to shrink the width of the grey area in the first image to something like the 2nd image.

[Rachel A]

Hi Benjamin, 

Thanks for the update. 

Query 1: How do i set the drawer header background color to transparent. 

We have achieved your requirement by using the ContentBackgroundColor property which is used to set the background color for the navigation drawer as explained in the below documentation link. 

https://help.syncfusion.com/xamarin/sfnavigationdrawer/multi-drawer#default-drawer-settings 

Please find the output image below. 

 

Query 2: I would like to shrink the width of the drawer. 

As we mentioned earlier in other forum the DrawerWidth property is used to shrink the width of the drawer if the position is left or right. 

https://help.syncfusion.com/xamarin/sfnavigationdrawer/getting-started#adjust-drawer-size 

We have prepared sample to achieve the above requirements. Please try the attached below sample and let us know if you have any concern on this. 

Sample Link: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNavigationDrawer_Sample-1052068526 

Thanks, 

Rachel. 

[Benjamin]

Hi Rachel,

Thanks for replying and the sample. 

Would like to check if it is possible to remove the grey out effect at the right of the nav drawer when the drawer is open?

[Rachel A]

Hi Benjamin,  

  

We have analyzed your requirement in SfNavigationDrawer and have prepared the sample by setting the opacity for the content in tab view when slide out is opened and reset the opacity in closed state. Please try the attached below sample and let us know if you have any concern on this.  

 

Sample Link: 

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

 

Images: 

      

 

Thanks, 

Rachel. 

[Benjamin]

hi,

No matter what width I set it seems to always have an extra spacing at the end of the drawer content. What I want is for the content area to stretch out and cover-up that space

My XAML Code

[Kanimozhi Gunasekaran]

Hi Benjamin,

We have analyzed your requirement in SfNavigationDrawer with your given code snippet. In the code snippet provided, you have used the scrollview in DrawerContentView and used the WidthRequest as 600. So that extra space is available in the drawer. Could you please remove the WidthRequest on ScrollView? to resolve the reported issue in SfNavigationDrawer. Please check with already provided sample and let us know if you have any concern on this.

Regards,
Kanimozhi G

[Benjamin]

Hi,

i have removed width request from scrollview and stack layout inside the scroll view, the extra space is still there

[Kanimozhi Gunasekaran]

Hi Benjamin,   

 

We have checked the reported issue in SfNavigationDrawer from our side. We are unable to reproduce the reported issue from our end. We have prepared the sample based on your requirement. Please check with the sample and if the issue mentioned occurs in different scenario. Please modify the sample with the issue reproducing sample which will be helpful for us to analyze further and provide an appropriate solution. 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNavigationDrawer_Sample-1841297943  

 

 

Regards,
Kanimozhi G. 

[Benjamin]

Hi,

I have updated the sample with my requirement and tooltip is not showing up.

Please ignore the trendline as I have not sure how come it is not loading any data in the sample.

I removed the android project due to the upload size requirement

Attachment: SfNavigationDrawer_Sample_ForumBenjamin_2a03df51.zip

[Kanimozhi Gunasekaran]

Hi Benjamin,

We have checked your requirement in SfNavigationDrawer with given sample. While the drawer gets opened the content view is displayed as gray. This is the behavior of the SfNavigationDrawer. So, we don’t have the support for your requirement.

Regards,
Kanimozhi G.