Change overlay color over main content

[Md. Rashidul Hasan]

Hi Syncfusion Team,

Recently I have been working with SfNavigationDrawer control in .Net MAUI. I have been looking for a particular feature to align with my current development. Overlay color over the main content is always grayish. I need to make this transparent to make the main content more visible. I couldn't find a way to do this. Providing a way out for this will be appreciable. Thanks in advance.

 Image for reference -

[Brundha Velusamy]

Hi Md. Rashidul,

 

We would like to inform you that, with the use of the theme key, we can customize the overlay color according to our preferences. This support will be available in our upcoming weekly release on February 27, 2024. We will notify you once the NuGet package is released. Thank you for your understanding and patience until then.

 

Regards,

Brundha V

[Brundha Velusamy]

Hi Md. Rashidul,

Apologies for inconvenience caused.

We are still in the process of testing this support, and it will be included in our upcoming weekly release scheduled for March 5, 2024. In the meantime, we have provided a custom NuGet package that incorporates this support, versioned as 24.2.8. You can find the file attached below.

Please clear the NuGet cache, before using the latest one and please refer to the below link for this

https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache

Please refer the below KB to install the custom NuGet on a local machine,

https://support.syncfusion.com/kb/article/14586/how-to-install-the-maui-custom-nuget-in-the-windows-machine

Disclaimer: The inclusion of this solution in the weekly release may change due to other factors, including but not limited to QA checks and work reprioritization.

We suggest setting the SfNavigationDrawerGreyLayoutBackground theme key to define the overlay color in the navigation drawer, as demonstrated in the code snippet below.

Please refer the below code snippet for this,

<ContentPage

  …

             xmlns:theme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core">

 

    <ContentPage.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <theme:SyncfusionThemeResourceDictionary SfVisualTheme="LightDefault"/>

                <ResourceDictionary>

                    <x:String x:Key="SfNavigationDrawerTheme">CommonTheme</x:String>

                    <Color x:Key="SfNavigationDrawerGreyLayoutBackground">Transparent</Color>

                </ResourceDictionary>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </ContentPage.Resources>

 

    <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">

        …

    </navigationdrawer:SfNavigationDrawer>

 

</ContentPage>

This approach allows you to customize the overlay color of the navigation drawer.

Regards,

Brundha V

Attachment: CustomNuget_75ff72d1.zip

[Brundha Velusamy]

Hi Md. Rashidul Hasan,

 

Sorry for the delay update.

 

We have included the support for customizing the overlay color of the SfNavigationDrawer in our latest weekly NuGet release v24.2.9 which is available for download ( NuGet). We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you require any further assistance.

 

Regards,
Brundha V

[Devashri Mahindrakar]

Hi @Brundha, Can you please guide me on how overlay color can be changed in latest nuget release for SfNavigationDrawer?

[Brundha Velusamy]

Hi Devashri,

Query: Can you please guide me on how overlay color can be changed in latest nuget release for SfNavigationDrawer?

Currently, direct API support for changing the overlay color in SfNavigationDrawer is not available. However, you can achieve this by utilizing the "SfNavigationDrawerGreyLayoutBackground" theme key within your project. Below is a code snippet demonstrating how you can achieve the desired behavior in SfNavigationDrawer. We have also attached a sample for your reference. Please review it and let us know if you need further assistance.

Please refer the below code snippet for this,

<ContentView

  …

xmlns:theme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core">

 

<ContentPage.Resources>

    <ResourceDictionary>

        <ResourceDictionary.MergedDictionaries>

            <theme:SyncfusionThemeResourceDictionary />

            <ResourceDictionary>

                <x:String x:Key="SfNavigationDrawerTheme">CommonTheme</x:String>

                <Color x:Key="SfNavigationDrawerGreyLayoutBackground">Transparent</Color>

            </ResourceDictionary>

        </ResourceDictionary.MergedDictionaries>

    </ResourceDictionary>

</ContentPage.Resources>

Regards,

Brundha V

Attachment: SfNavigationDrawerSample_f64fb3c0.zip

[Devashri Mahindrakar]

Thanks @Brundha, this solution worked in my Project. Also wanted to know if we can disable the drawer closure on focus out. I want to keep the drawer fixed and can be opened or closed only on button click. Let me know if this is possible in SfNavigation drawer.

[Prithis Iyyappan]

Hi Devashri Mahindrakar,

 

The current behavior of the SfNavigationDrawer is to close automatically if we focus out or click outside the drawer content. We do not have an Adaptive Navigation Drawer Display for Larger Screens support for the .NET MAUI SfNavigationDrawer. We have already created a feature request for this "Implement the Adaptive Navigation Drawer Display for Larger Screens in .NET MAUI SfNavigationDrawer". Please find the link below to track the status of the feature implementation.

 

Feedback: Feedback - 50173

 

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we have committed to already planned work. So, this feature will be available in any of our upcoming releases.

 

If you have any more specifications/suggestions for the feature request, you can add them as a comment in the portal. We will share the release details in the feedback itself.

 

Regards,

Prithis I