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

[Özgür]

Hello,

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?

[Sweatha Bharathi]

Hi Özgür ,

Find the responses to your queries below.

Queries	Responses
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? Code files related to you DataGrid and Theme Customization 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.

Regards,
Sweatha.B

Attachment: DataGridDemo_1c007dc.zip

[Özgür]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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

        mc:Ignorable="d"

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

    <Window.Resources>

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

    </Window.Resources>

    <Window.DataContext>

        <local:ViewModel/>

    </Window.DataContext>

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="auto"/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

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

                               AllowFiltering="True"/>

        <Button Content="Apply Theme"

                Grid.Column="2"

                Height="50"

                Width="90" />

    </Grid>

</Window>

[Sathiyathanam Jeyakumar]

Özgür,

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"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        

        xmlns:Syncfusion="http://schemas.syncfusion.com/wpf"

        xmlns:local="clr-namespace:WpfApp1"

        Title="SfDataGrid Demo"

        xmlns:b="http://schemas.microsoft.com/xaml/behaviors"

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

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

        Width="790"

        Height="550"

        WindowStartupLocation="CenterScreen" >

 

    <Window.Resources>

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

    </Window.Resources>

    <Window.DataContext>

        <local:ViewModel/>

    </Window.DataContext>

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

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto" />

            <ColumnDefinition Width="Auto"/>

        </Grid.ColumnDefinitions>

        <Syncfusion:SfDataGrid x:Name="dataGrid" 

                               ItemsSource="{Binding Orders}"

                               HorizontalAlignment="Center"

                               VerticalAlignment="Center"

                               AllowFiltering="True"

                               AutoGenerateColumns="False"

                               AllowEditing="True">

            <Syncfusion:SfDataGrid.TableSummaryRows>

                <Syncfusion:GridTableSummaryRow ShowSummaryInRow="False">

                    <Syncfusion:GridSummaryRow.SummaryColumns>

                        <Syncfusion:GridSummaryColumn Name="PriceAmount"

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

                                              MappingName="UnitPrice"

                                              SummaryType="DoubleAggregate" />

                        <Syncfusion:GridSummaryColumn Name="ID"

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

                                              MappingName="OrderID"

                                              SummaryType="CountAggregate" />

                    </Syncfusion:GridSummaryRow.SummaryColumns>

                </Syncfusion:GridTableSummaryRow>

            </Syncfusion:SfDataGrid.TableSummaryRows>

            <Syncfusion:SfDataGrid.Columns>

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

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

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

            </Syncfusion:SfDataGrid.Columns>

        </Syncfusion:SfDataGrid>

 

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

                   

                    HorizontalAlignment="Center"

                    VerticalAlignment="Center">

            <Label Content="Choose Theme :" />

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

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

        </StackPanel>

    </Grid>

</Window>

C#

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.

[Özgür]

Hello,

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

[Swathi Dhatchanamoorthi]

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.