1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to I select native Dark Mode for SfDataGrid/SfDataPager in UWP?

How to I select native Dark Mode for SfDataGrid/SfDataPager in UWP?

Hi,

I want to update my app to also support dark mode and not only light.

In UWP I used this extension method to enable dark mode, this works for the inbox controls, but not for SfDataGrid/SfDataPager, they are both white.

I don't want to define my own style, I want to use the Windows inbox style:

RequestedTheme = Windows.UI.Xaml.ElementTheme.Dark


But how do I set this for both controls?

11 Replies
MK Muthu Kumaran Gnanavinayagam Syncfusion Team February 18, 2020 01:38 PM UTC

Hi, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “Need to apply themes for SfDataGrid and SfDataPager” from our side. We would like to let you know that you can apply dark theme and light theme to SfDataGrid control by adding the required theme in our application resource dictionary from our predefined library as like below. 
 
Example: UWP MainPage.cs 
public sealed partial class MainPage 
    { 
        public MainPage() 
        { 
            this.InitializeComponent(); 
            Syncfusion.SfDataGrid.XForms.UWP.SfDataGridRenderer.Init(); 
            ThemeSelectorService.SetRequestedThemeAsync(ElementTheme.Dark); 
            LoadApplication(new DataGridDemo.App()); 
        } 
    } 
 
    public static class ThemeSelectorService 
    { 
        public static async Task SetRequestedThemeAsync(ElementTheme Theme) 
        { 
            foreach (var view in CoreApplication.Views) 
            { 
                await view.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => 
                { 
                    if (Window.Current.Content is FrameworkElement frameworkElement) 
                    { 
                        frameworkElement.RequestedTheme = Theme; 
 
                        ICollection<Xamarin.Forms.ResourceDictionary> mergedDictionaries = Xamarin.Forms.Application.Current.Resources.MergedDictionaries; 
                        if (Theme == ElementTheme.Dark) 
                        { 
                            mergedDictionaries.Clear(); 
                            mergedDictionaries.Add(new DarkTheme()); 
                        } 
                        else if (Theme == ElementTheme.Light) 
                        { 
                            mergedDictionaries.Clear(); 
                            mergedDictionaries.Add(new LightTheme()); 
                        } 
                    } 
                }); 
            } 
        } 
    } 
 
For your reference, we have attached the working sample and you can download it from the below link. 
 
 
Currently SfDataPager doesn’t have theme support. So we have logged feature request regarding this and we will implement this feature in any of our Volume 2 SP 1 release.   
  
At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented. We appreciate your patience until then. 
  
 
Please let us know if you require further assistance. 
 
Regards, 
G.Muthu kumaran. 
 


AZ André Ziegler February 19, 2020 10:29 AM UTC

Thanks,

this workaround is indeed working, but it is using your own defined dark theme from Syncfusion.XForms.Themes namespace and this is what I want to avoid.

The white text color is different compared to the native UWP look and if Microsoft updates the dark theme in future Windows 10 half year updates, you need tp update the styles again.



I've updated your demo and added a label and as you can see it looks different and this is why I want to avoid defining own themes.

// Edit:

 I've also tried to create custom renders and override yours, but yours are all internal which prevents me, so I have to wait for a fixed version.

MK Muthu Kumaran Gnanavinayagam Syncfusion Team February 20, 2020 02:17 PM UTC

Hi Andre, 
 
Currently we are analyzing the reported requirement with our leads and will update details on or before 21st February, 2020. We will appreciate your patience until then. 
 
Regards, 
G.Muthu kumaran. 


PR Padmini Ramamurthy Syncfusion Team February 21, 2020 10:12 AM UTC

HI Andre, 
  
Sorry for the delay, we are still working on your requirement and update you the complete details on Monday (Feb 24th). Appreciate your patience until then. 
  
Regards, 
Padmini 


DV Divya Venkatesan Syncfusion Team February 21, 2020 01:37 PM UTC

Hi Andre, 
 
Thanks for your patience. 
 
Because of the restriction to suit the light and Dark color code in all three platforms (Android, iOS and UWP), our Xamarin. Forms UWP light and dark themes are not specified based on Native UWP theme colors. So, we have defined our own Dark and Light theme to fit Color code in all platforms. 
 
But in the future, we will consider your feedback and try to implement it in our themes support. 
 
Regards, 
Divya Venkatesan 


AZ André Ziegler March 2, 2020 08:04 AM UTC

ok, until this happens can you remove the "internal" from renderers to allow us to override it?

I want to try if  this code would work in overridden renders

 if (Control != null)
 {
     Control.RequestedTheme = Windows.UI.Xaml.ElementTheme.Dark;
}



SS Sivaraman Sivagurunathan Syncfusion Team March 2, 2020 12:22 PM UTC

  
Hi Andre, 
 
Thanks for the update. 
 
Currently, we cannot provide the Renderer as public. But we have a workaround for your use case. You can trigger the QueryCellStyle event and set the ForegroundColor for the Gridcell for UWP alone.  
 
Please refer the below code snippet 
 
 
public MainPage() 
{ 
    InitializeComponent(); 
    dataGrid.QueryCellStyle += DataGrid_QueryCellStyle; 
} 
 
private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e) 
{ 
    ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries; 
    var darkTheme = mergedDictionaries.OfType<DarkTheme>().FirstOrDefault(); 
    if (darkTheme != null) 
    { 
        if (Device.RuntimePlatform == Device.UWP) 
        { 
            e.Style.ForegroundColor = Color.FromHex("#FFFFFFFF"); 
            e.Handled = true; 
        } 
    } 
} 
 
 
Regards, 
Sivaraman S 
 


AZ André Ziegler March 9, 2020 01:42 PM UTC

ok, it was a bit complicated to get VS to recognize OfType Method, but after several tries it finally works.

The Xamarin Team also works on dark mode support in Xamarin.Forms.



FP Farjana Parveen Ayubb Syncfusion Team March 11, 2020 12:22 PM UTC

Hi Andre, 
 
Thanks for the update. 
 
We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you. 
 
Regards, 
Farjana Parveen A 


AZ André Ziegler April 24, 2020 06:39 AM UTC

Is there any ETA on dark mode support for SfDataPager? I still have white pager in 18.1.0.45.

PK Pradeep Kumar Balakrishnan Syncfusion Team April 24, 2020 10:53 AM UTC

Hi Andre, 
 
Currently, we are implementing the requested feature “Theme support to SfDataPager” and it will be included in our 2020 Volume 2 release, it will be available on end of June 2020. 
 
Regards, 
Pradeep Kumar B 


Loader.
Up arrow icon