We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ScrollBar does not change when applying the theme to SfDataGrid only.


I want to apply MaterialLight theme only to SfDataGrid. I placed the relevant fields in app.xaml as follows. SfDataGrid theme changed as requested. But SfDataGrid ScrollBar looks the same as before. Also how can I change only SfDataGrid theme to Dark in Runtime?

5 Replies 1 reply marked as answer

SB Sweatha Bharathi Syncfusion Team April 11, 2023 03:02 PM UTC

Hi Özgür ,

Find the responses to your queries below.



 But SfDataGrid Scrollbar looks the same as before

We have analyzed your query that “ScrollBar does not change when applying the theme to SfDataGrid only”. We have tried to replicate your scenario but we are unable to reproduce the reported issue from our end.

Please find the  video demo and sample from our end in the attachment.

If still you are facing the same issue, can you please share us below things?

  1. Code files related to you DataGrid and Theme Customization
  2. Brief replication procedure/video illustration of the reported issue

Also if possible, can you please revert us with the modified sample? It will help us to investigate further and provide appropriate solution at earlier.


Also how can I change only SfDataGrid theme to Dark in Runtime

Your requirement to change the theme at run time can be achieved by using “SfSkinManager.SetTheme()”.

We have prepared the sample based on your scenario and attached the sample for your reference. Please have a look at this sample and let us know if you have any concerns in this.


Attachment: DataGridDemo_1c007dc.zip

ÖZ Özgür April 12, 2023 05:50 AM UTC

I think you misunderstood my problem. I don't want to change the whole theme of the project. If I change the whole theme of the project, buttons, textboxes and many things are affected. I just want to get the SfDataGrid into the material theme. But I guess SfDataGrid and ScrollBar style are not in the same place. Therefore, there is no change in the ScrollBar.

Also is there an easy way to just change the SfDataGrid theme at runtime?

<Window x:Class="DataGrid.MainWindow"





        xmlns:local="clr-namespace:DataGrid" xmlns:syncfusion="http://schemas.syncfusion.com/wpf"


        Title="MainWindow" Height="550" Width="1000">


        <ResourceDictionary Source="/Syncfusion.Themes.MaterialLight.WPF;component/SfDataGrid/SfDataGrid.xaml" />







            <ColumnDefinition Width="auto"/>



        <syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}"


        <Button Content="Apply Theme"



                Width="90" />



SJ Sathiyathanam Jeyakumar Syncfusion Team April 13, 2023 02:10 PM UTC


After reviewing the provided code snippets, we have created a sample that includes a datagrid with default material theme settings. The sample demonstrates how to change the themes at runtime. We kindly request you to review the following code snippets and let us know if you require any further assistance.

<Window x:Class="WpfApp1.MainWindow"





        Title="SfDataGrid Demo"


        xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"

        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=MaterialLight}"



        WindowStartupLocation="CenterScreen" >



        <local:ViewModel x:Key="viewModel"/>





    <Grid Margin="0,0,2,0">     


            <ColumnDefinition Width="Auto" />

            <ColumnDefinition Width="Auto"/>


        <Syncfusion:SfDataGrid x:Name="dataGrid" 

                               ItemsSource="{Binding Orders}"







                <Syncfusion:GridTableSummaryRow ShowSummaryInRow="False">


                        <Syncfusion:GridSummaryColumn Name="PriceAmount"

                                              Format="'Total Price : {Sum:c}'"


                                              SummaryType="DoubleAggregate" />

                        <Syncfusion:GridSummaryColumn Name="ID"

                                              Format="'Total Count : {Count:d}'"


                                              SummaryType="CountAggregate" />





                <Syncfusion:GridTextColumn HeaderText="Order ID" MappingName="OrderID" />

                <Syncfusion:GridTextColumn HeaderText="Ship City"  MappingName="ShipCity"  />

                <Syncfusion:GridTextColumn   HeaderText="Unit Price" MappingName="UnitPrice"/>




        <StackPanel Orientation="Horizontal" Grid.Column="1"




            <Label Content="Choose Theme :" />

            <ComboBox ItemsSource="{Binding ThemesList,Source={StaticResource viewModel}}"

                      SelectedIndex="0" SelectionChanged="ComboBox_SelectionChanged" />





private void ComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)


    SfSkinManager.SetTheme(this,new Theme() { ThemeName = (sender as ComboBox).SelectedItem.ToString()});


If we have misunderstood your requirement, could you please share an image or video illustration? It would be helpful for better understanding.

ÖZ Özgür replied to Sathiyathanam Jeyakumar April 27, 2023 06:21 AM UTC


I've included a demo below. When I do as you mentioned in the demo, the theme changes, yes. I don't want to change theme. Because I am currently using MaterialDesignTheme. I only want to apply the theme to SfDataGrid. I don't want it applied to other objects (Button, ComboBox etc.).

Attachment: ThemeDemo_1ef768f3.rar

SD Swathi Dhatchanamoorthi Syncfusion Team May 1, 2023 05:35 PM UTC

Hi Ozgur,

Your requirement for applying the theme only for DataGrid at runtime can be achieved by setting the theme for only the SfDataGrid control. Please refer the below code snippet.

Code snippet:

       private void Button_Click(object sender, RoutedEventArgs e)


            SfSkinManager.SetTheme(this.datagrid, new Theme() { ThemeName = "MaterialDark" });


If you have any concerns, please let us know. 

Marked as answer
Live Chat Icon For mobile
Up arrow icon