-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+{% tabs %}
+{% highlight xaml %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- ~~~
+
+{% endhighlight %}
+{% endtabs %}
2. Add XmlDataProvider for the above XML document.
- ~~~xaml
+{% tabs %}
+{% highlight xaml %}
-
- ~~~
+{% endhighlight %}
+{% endtabs %}
3. Set ItemsSource property for the MenuAdv.
-
- ~~~xaml
-
-
-
-
-
-
-
-
-
- ~~~
+{% tabs %}
+{% highlight xaml %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
This will create the following MenuAdv control.
diff --git a/wpf/Pdf-Viewer/Organize-Pages.md b/wpf/Pdf-Viewer/Organize-Pages.md
index fd383cec0b..a9d67e85f4 100644
--- a/wpf/Pdf-Viewer/Organize-Pages.md
+++ b/wpf/Pdf-Viewer/Organize-Pages.md
@@ -251,6 +251,7 @@ Insert page feature allows users to choose where to add pages using the **Insert
In the window, there are three options **First**, **Last**, and **Page**. Selecting **First** inserts pages at the document's beginning, while **Last** adds them at the end. The **Page** option lets users specify a position using **Location** **Before** adds pages before the selected page, and **After** inserts them after.
N> The **Location** is accessible only when the **Page** radio button is selected.
+
### From file
When users want to insert pages using the **From File** option, a browser window will open to select a PDF. Once selected, all pages from the PDF are inserted into the document based on the customization in the **Insert Pages** window.
diff --git a/wpf/Release-notes/v30.1.38.md b/wpf/Release-notes/v30.1.38.md
new file mode 100644
index 0000000000..5716cf5033
--- /dev/null
+++ b/wpf/Release-notes/v30.1.38.md
@@ -0,0 +1,56 @@
+---
+title: Essential Studio for WPF Weekly Nuget Release Release Notes
+description: Essential Studio for WPF Weekly Nuget Release Release Notes
+platform: WPF
+documentation: ug
+---
+
+# Essential Studio for WPF Release Notes
+
+{% include release-info.html date="July 02, 2025" version="v30.1.38" passed="176022" failed="0" %}
+
+{% directory path: _includes/release-notes/v30.1.38 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| CheckListBox | 150 | 150 | 0 | All Passed |
+| ChromelessWindow | 152 | 152 | 0 | All Passed |
+| ColorPicker | 114 | 114 | 0 | All Passed |
+| ColorPickerPalette | 104 | 104 | 0 | All Passed |
+| ComboBoxAdv | 117 | 117 | 0 | All Passed |
+| DateTimeEdit | 169 | 169 | 0 | All Passed |
+| DockingManager | 1085 | 1085 | 0 | All Passed |
+| DoubleTextBox | 345 | 345 | 0 | All Passed |
+| EditControl | 193 | 193 | 0 | All Passed |
+| GanttControl | 2067 | 2067 | 0 | All Passed |
+| PdfViewer | 2997 | 2997 | 0 | All Passed |
+| PropertyGrid | 134 | 134 | 0 | All Passed |
+| Ribbon | 1738 | 1738 | 0 | All Passed |
+| SfBulletGraph | 147 | 147 | 0 | All Passed |
+| SfCirculargauge | 305 | 305 | 0 | All Passed |
+| SfDataGrid | 4743 | 4743 | 0 | All Passed |
+| SfDatePicker | 118 | 118 | 0 | All Passed |
+| SfImageEditor | 177 | 177 | 0 | All Passed |
+| SfMaskedEdit | 104 | 104 | 0 | All Passed |
+| SfMultiColumnDropDownControl | 187 | 187 | 0 | All Passed |
+| SfScheduler | 4905 | 4905 | 0 | All Passed |
+| SfSpreadsheet | 2682 | 2682 | 0 | All Passed |
+| SfTextInputLayout | 333 | 333 | 0 | All Passed |
+| SfTimePicker | 125 | 125 | 0 | All Passed |
+| SfTreeGrid | 2157 | 2157 | 0 | All Passed |
+| SfTreeMap | 742 | 742 | 0 | All Passed |
+| SfTreeView | 1211 | 1211 | 0 | All Passed |
+| TabControlExt | 131 | 131 | 0 | All Passed |
+| TileViewControl | 131 | 131 | 0 | All Passed |
+| TreeViewAdv | 285 | 285 | 0 | All Passed |
+| UpDown | 294 | 294 | 0 | All Passed |
+| DocIO | 38659 | 38659 | 0 | All Passed |
+| PDF | 14268 | 14268 | 0 | All Passed |
+| Presentation | 50968 | 50968 | 0 | All Passed |
+| XlsIO | 43985 | 43985 | 0 | All Passed |
\ No newline at end of file
diff --git a/wpf/Release-notes/v30.1.39.md b/wpf/Release-notes/v30.1.39.md
new file mode 100644
index 0000000000..4915bb7aea
--- /dev/null
+++ b/wpf/Release-notes/v30.1.39.md
@@ -0,0 +1,57 @@
+---
+title: Essential Studio for WPF Weekly Nuget Release Release Notes
+description: Essential Studio for WPF Weekly Nuget Release Release Notes
+platform: WPF
+documentation: ug
+---
+
+# Essential Studio for WPF Release Notes
+
+{% include release-info.html date="July 08, 2025" version="v30.1.39" passed="179490" failed="0" %}
+
+{% directory path: _includes/release-notes/v30.1.39 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| CheckListBox | 150 | 150 | 0 | All Passed |
+| ChromelessWindow | 152 | 152 | 0 | All Passed |
+| ColorPicker | 114 | 114 | 0 | All Passed |
+| ColorPickerPalette | 104 | 104 | 0 | All Passed |
+| ComboBoxAdv | 118 | 118 | 0 | All Passed |
+| DateTimeEdit | 169 | 169 | 0 | All Passed |
+| DockingManager | 1084 | 1084 | 0 | All Passed |
+| DoubleTextBox | 345 | 345 | 0 | All Passed |
+| EditControl | 193 | 193 | 0 | All Passed |
+| FastLineChart | 191 | 191 | 0 | All Passed |
+| GanttControl | 2059 | 2059 | 0 | All Passed |
+| PdfViewer | 2997 | 2997 | 0 | All Passed |
+| PropertyGrid | 141 | 141 | 0 | All Passed |
+| Ribbon | 1854 | 1854 | 0 | All Passed |
+| SfBulletGraph | 147 | 147 | 0 | All Passed |
+| SfChart | 1309 | 1309 | 0 | All Passed |
+| SfCirculargauge | 305 | 305 | 0 | All Passed |
+| SfDataGrid | 4720 | 4720 | 0 | All Passed |
+| SfDatePicker | 118 | 118 | 0 | All Passed |
+| SfImageEditor | 177 | 177 | 0 | All Passed |
+| SfMaskedEdit | 104 | 104 | 0 | All Passed |
+| SfMultiColumnDropDownControl | 188 | 188 | 0 | All Passed |
+| SfScheduler | 5786 | 5786 | 0 | All Passed |
+| SfSpreadsheet | 2682 | 2682 | 0 | All Passed |
+| SfTextInputLayout | 333 | 333 | 0 | All Passed |
+| SfTimePicker | 125 | 125 | 0 | All Passed |
+| SfTreeGrid | 2157 | 2157 | 0 | All Passed |
+| SfTreeMap | 742 | 742 | 0 | All Passed |
+| SfTreeView | 1211 | 1211 | 0 | All Passed |
+| TileViewControl | 131 | 131 | 0 | All Passed |
+| TreeViewAdv | 249 | 249 | 0 | All Passed |
+| UpDown | 295 | 295 | 0 | All Passed |
+| DocIO | 39729 | 39729 | 0 | All Passed |
+| PDF | 14275 | 14275 | 0 | All Passed |
+| Presentation | 50971 | 50971 | 0 | All Passed |
+| XlsIO | 44065 | 44065 | 0 | All Passed |
\ No newline at end of file
diff --git a/wpf/Themes/Skin-Manager-Classic.md b/wpf/Themes/Skin-Manager-Classic.md
new file mode 100644
index 0000000000..2e177b9dc0
--- /dev/null
+++ b/wpf/Themes/Skin-Manager-Classic.md
@@ -0,0 +1,548 @@
+---
+layout: post
+title: WPF Skin Manager | Apply Themes for Syncfusion WPF controls
+description: Learn about how to apply the themes for Syncfusion WPF controls and Framework controls using the skin manager.
+platform: wpf
+control: Themes
+documentation: ug
+---
+# WPF Skin Manager Classic
+
+The Classic Skin Manager in WPF applies themes by merging style definitions from theme assemblies into the application's visual tree. Each theme assembly contains resource dictionaries with styles for controls. When the `Theme` property is set, the Skin Manager merges the appropriate theme resources into the resource dictionary of the target element or into `Application.Current.Resources`, ensuring consistent styling across the element and its descendants.
+
+N> Theme Studio-based themes provide improved consistency and uniqueness among various controls when compared to other themes. It is preferable to use Theme Studio-based themes in the application over other themes.
+
+## Themes list
+
+The following table lists the available themes as well as the assembly or NuGet reference to be used in the application.
+
+
+
+
+Styles
+Assembly
+NuGet package
+
+
+Metro
+Syncfusion.Themes.Metro.Wpf.dll
+{{'[Syncfusion.Themes.Metro.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Metro.WPF/)'| markdownify }}
+
+
+
+Lime
+Syncfusion.Themes.Lime.Wpf.dll
+{{'[Syncfusion.Themes.Lime.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Lime.WPF/)'| markdownify }}
+
+
+
+Saffron
+Syncfusion.Themes.Saffron.Wpf.dll
+{{'[Syncfusion.Themes.Saffron.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Saffron.WPF/)'| markdownify }}
+
+
+
+Blend
+Syncfusion.Themes.Blend.Wpf.dll
+{{'[Syncfusion.Themes.Blend.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Blend.WPF/)'| markdownify }}
+
+
+
+Office2013White
+Syncfusion.Themes.Office2013White.Wpf.dll
+{{'[Syncfusion.Themes.Office2013White.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2013White.WPF/)'| markdownify }}
+
+
+
+Office2013LightGray
+Syncfusion.Themes.Office2013LightGray.Wpf.dll
+{{'[Syncfusion.Themes.Office2013LightGray.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2013LightGray.WPF/)'| markdownify }}
+
+
+
+Office2013DarkGray
+Syncfusion.Themes.Office2013DarkGray.Wpf.dll
+{{'[Syncfusion.Themes.Office2013DarkGray.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2013DarkGray.WPF/)'| markdownify }}
+
+
+
+VisualStudio2013
+Syncfusion.Themes.VisualStudio2013.Wpf.dll
+{{'[Syncfusion.Themes.VisualStudio2013.WPF](https://www.nuget.org/packages/Syncfusion.Themes.VisualStudio2013.WPF/)'| markdownify }}
+
+
+
+Office2010Black
+Syncfusion.Themes.Office2010Black.Wpf.dll
+{{'[Syncfusion.Themes.Office2010Black.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2010Black.WPF/)'| markdownify }}
+
+
+
+Office2010Blue
+Syncfusion.Themes.Office2010Blue.Wpf.dll
+{{'[Syncfusion.Themes.Office2010Blue.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2010Blue.WPF/)'| markdownify }}
+
+
+
+Office2010Silver
+Syncfusion.Themes.Office2010Silver.Wpf.dll
+{{'[Syncfusion.Themes.Office2010Silver.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2010Silver.WPF/)'| markdownify }}
+
+
+
+Office365
+Syncfusion.Themes.Office365.Wpf.dll
+{{'[Syncfusion.Themes.Office365.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office365.WPF/)'| markdownify }}
+
+
+
+Office2016Colorful
+Syncfusion.Themes.Office2016Colorful.Wpf.dll
+{{'[Syncfusion.Themes.Office2016Colorful.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2016Colorful.WPF/)'| markdownify }}
+
+
+
+Office2016White
+Syncfusion.Themes.Office2016White.Wpf.dll
+{{'[Syncfusion.Themes.Office2016White.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2016White.WPF/)'| markdownify }}
+
+
+
+Office2016DarkGray
+Syncfusion.Themes.Office2016DarkGray.Wpf.dll
+{{'[Syncfusion.Themes.Office2016DarkGray.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2016DarkGray.WPF/)'| markdownify }}
+
+
+
+VisualStudio2015
+Syncfusion.Themes.VisualStudio2015.Wpf.dll
+{{'[Syncfusion.Themes.VisualStudio2015.WPF](https://www.nuget.org/packages/Syncfusion.Themes.VisualStudio2015.WPF/)'| markdownify }}
+
+
+
+The following table lists alternative theme studio themes suggestions to be used in the application.
+
+
+
+
+Styles
+Alternative theme studio themes suggestion to use
+
+
+Metro
+FluentLight, Office2019Colorful
+
+
+Lime
+FluentLight, Office2019Colorful
+
+
+Saffron
+FluentLight, Office2019Colorful
+
+
+Blend
+FluentDark, MaterialDark, Office2019Black
+
+
+Office2013White
+Office2019White
+
+
+Office2013LightGray
+Office2019Colorful
+
+
+Office2013DarkGray
+Office2019DarkGray
+
+
+VisualStudio2013
+-
+
+
+Office2010Black
+-
+
+
+Office2010Blue
+-
+
+
+Office2010Silver
+-
+
+
+Office365
+Office2019Colorful
+
+
+Office2016Colorful
+Office2019Colorful
+
+
+Office2016White
+Office2019White
+
+
+Office2016DarkGray
+Office2019DarkGray
+
+
+VisualStudio2015
+-
+
+
+### Set theme
+
+Themes will be applied to both Syncfusion® and Framework controls by using [Theme](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html#Syncfusion_SfSkinManager_SfSkinManager_ThemeProperty) attached property of the [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html).
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% highlight C# %}
+
+SfSkinManager.SetTheme(this, new Theme("Windows11Light"));
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
+
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/wpf-themes-demo-using-skinmanager).
+
+## Apply a theme globally in the application
+
+By default, [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) merges the required resource files from the theme assembly to the element to which the theme is applied. To apply a theme globally in an application, set the `ApplyStylesOnApplication` property to `True`. It merges all the theme resource files to `Application.Current.Resources`.
+
+N> The `SfSkinManager.ApplyStylesOnApplication` static property should be set before `InitializeComponent` of the window or during application start up, when applying for multiple windows.
+
+{% tabs %}
+
+{% highlight C# %}
+
+SfSkinManager.ApplyStylesOnApplication = true;
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
+## Apply themes to the controls derived from Syncfusion® controls
+
+To apply themes to the derived control using `SfSkinManager`, call [SetResourceReference](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement.setresourcereference?view=windowsdesktop-8.0) method and, pass the `StyleProperty` and derived control type as parameters.
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+{% tabs %}
+
+{% highlight C# %}
+
+ public class SfDataGridExt : SfDataGrid
+ {
+ public SfDataGridExt()
+ {
+ SetResourceReference(StyleProperty, typeof(SfDataGrid));
+ }
+ }
+
+{% endhighlight %}
+
+{% endtabs %}
+
+## How to
+
+### Customize theme in application level
+
+To customize the Syncfusion® theme at application level, merge the theme into ResourceDictionary and override the style using 'BasedOn' property.
+
+In 'ResourceDictionary', mention the style path which needs to be overridden, in 'BasedOn', mention the key stated in the table.
+
+We can customize or override the theme styles by following the steps outlined below.
+
+
+**Step 1**: Merge the resource dictionaries of the controls which need to be customized. In this example, we have merged the Framework Button‘s resource dictionary.
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+**Step 2**: Declare style for the control with 'BasedOn' key. Here style of the button has been declared and its key is used in 'BasedOn'. Button's Background, Foreground, FontFamily, BorderBrush have been overridden.
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+**Step 3**: Now, utilize the customized styles in our application using the 'Style' property. This step adds custom styles of Buttons in WPF application.
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
+
+### Change visual style at runtime
+
+Themes for application can be changed at runtime by changing `VisualStyle` property. Make sure that the new theme assembly is attached as reference in the application when applying theme.
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% highlight C# %}
+
+SfSkinManager.SetVisualStyle(this, (VisualStyles)Enum.Parse(typeof(VisualStyles), comboVisualStyle.SelectedItem.ToString()));
+
+{% endhighlight %}
+
+{% endtabs %}
+
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/change-themes-at-runtime-using-skinmanager).
+
+### Switch theme with custom styles
+
+To change a theme dynamically with custom styles, utilize the resource dictionary and override the style using the 'BasedOn' property.
+
+We have provided an example that demonstrates switching between the Window11Light and Windows11Dark themes using the SfGrid control. In this example, we customize the foreground color of the GridTableSummaryCell to green in **Window 11 Light** and red in **Windows 11 Dark**.
+
+* **Step 1**: In this example, we have an SfDataGrid and a RadioButton which is used to switching theme and we need to add resource dictionaries with paths in merged dictionaries in view model or code behind. The following code can be used to effortlessly switch themes.
+
+{% tabs %}
+
+{% highlight C# %}
+
+ private void RadioButton_Click(object sender, RoutedEventArgs e)
+ {
+ var themeName = (sender as RadioButton).Content.ToString();
+ string syncfusionTheme = string.Empty;
+ if (themeName == "Dark")
+ {
+ syncfusionTheme = "Windows11Dark";
+ SfSkinManager.SetTheme(Application.Current.MainWindow, new Theme("Windows11Dark"));
+ }
+ else if (themeName == "Light")
+ {
+ syncfusionTheme = "Windows11Light";
+ SfSkinManager.SetTheme(Application.Current.MainWindow, new Theme("Windows11Light"));
+ }
+
+ MergeResourceDictionary(syncfusionTheme);
+ MergeCustomResourceDictionary(themeName);
+ }
+
+ private void MergeResourceDictionary(string syncfusionTheme)
+ {
+ Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
+ {
+ Source = new Uri($"/Syncfusion.Themes.{syncfusionTheme}.WPF;component/MSControl/Window.xaml", UriKind.RelativeOrAbsolute)
+ });
+ Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
+ {
+ Source = new Uri($"/Syncfusion.Themes.{syncfusionTheme}.WPF;component/MSControl/ComboBox.xaml", UriKind.RelativeOrAbsolute)
+ });
+ Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
+ {
+ Source = new Uri($"/Syncfusion.Themes.{syncfusionTheme}.WPF;component/SfDataGrid/SfDataGrid.xaml", UriKind.RelativeOrAbsolute)
+ });
+ }
+
+ private void MergeCustomResourceDictionary(object selectedTheme)
+ {
+ Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
+ {
+ Source = new Uri($"/WpfApp1;component/Themes/{selectedTheme}.xaml", UriKind.RelativeOrAbsolute)
+ });
+ }
+
+{% endhighlight %}
+
+{% endtabs %}
+
+* **Step 2**: Customize the foreground color and font weight of the table summary row in both light and dark themes.
+
+**Light Theme**
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+**Dark Theme**
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+**Output Screenshots**
+
+Light Theme:
+
+
+
+Dark Theme:
+
+
diff --git a/wpf/Themes/Skin-Manager.md b/wpf/Themes/Skin-Manager.md
index 14677c5562..4e5613ed5f 100644
--- a/wpf/Themes/Skin-Manager.md
+++ b/wpf/Themes/Skin-Manager.md
@@ -8,9 +8,7 @@ documentation: ug
---
# Getting Started with WPF Skin Manager
-The [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) helps you to apply the themes for both Syncfusion® and Framework controls. There are 27 built-in themes that can be applied using the `SfSkinManager` for a rich user interface experience. Some of the built-in themes color derivations can be customized using [WPF Theme Studio](https://help.syncfusion.com/wpf/themes/theme-studio).
-
-N> Theme Studio-based themes provide improved consistency and uniqueness among various controls when compared to other themes. It is preferable to use Theme Studio-based themes in the application over other themes.
+The [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) helps you to apply the themes for both Syncfusion® and Framework controls.
## Themes list
@@ -50,11 +48,13 @@ Syncfusion.Themes.FluentDark.Wpf.dll
Material3Light
Syncfusion.Themes.Material3Light.Wpf.dll
+{{'[Syncfusion.Themes.Material3Light.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Material3Light.WPF/)'| markdownify }}
Material3Dark
Syncfusion.Themes.Material3Dark.Wpf.dll
+{{'[Syncfusion.Themes.Material3Dark.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Material3Dark.WPF/)'| markdownify }}
@@ -122,284 +122,13 @@ SystemTheme
Syncfusion.Themes.SystemTheme.Wpf.dll
{{'[Syncfusion.Themes.SystemTheme.WPF](https://www.nuget.org/packages/Syncfusion.Themes.SystemTheme.WPF/)'| markdownify }}
-
-
-Metro
-Syncfusion.Themes.Metro.Wpf.dll
-{{'[Syncfusion.Themes.Metro.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Metro.WPF/)'| markdownify }}
-
-
-
-Lime
-Syncfusion.Themes.Lime.Wpf.dll
-{{'[Syncfusion.Themes.Lime.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Lime.WPF/)'| markdownify }}
-
-
-
-Saffron
-Syncfusion.Themes.Saffron.Wpf.dll
-{{'[Syncfusion.Themes.Saffron.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Saffron.WPF/)'| markdownify }}
-
-
-
-Blend
-Syncfusion.Themes.Blend.Wpf.dll
-{{'[Syncfusion.Themes.Blend.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Blend.WPF/)'| markdownify }}
-
-
-
-Office2013White
-Syncfusion.Themes.Office2013White.Wpf.dll
-{{'[Syncfusion.Themes.Office2013White.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2013White.WPF/)'| markdownify }}
-
-
-
-Office2013LightGray
-Syncfusion.Themes.Office2013LightGray.Wpf.dll
-{{'[Syncfusion.Themes.Office2013LightGray.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2013LightGray.WPF/)'| markdownify }}
-
-
-
-Office2013DarkGray
-Syncfusion.Themes.Office2013DarkGray.Wpf.dll
-{{'[Syncfusion.Themes.Office2013DarkGray.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2013DarkGray.WPF/)'| markdownify }}
-
-
-
-VisualStudio2013
-Syncfusion.Themes.VisualStudio2013.Wpf.dll
-{{'[Syncfusion.Themes.VisualStudio2013.WPF](https://www.nuget.org/packages/Syncfusion.Themes.VisualStudio2013.WPF/)'| markdownify }}
-
-
-
-Office2010Black
-Syncfusion.Themes.Office2010Black.Wpf.dll
-{{'[Syncfusion.Themes.Office2010Black.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2010Black.WPF/)'| markdownify }}
-
-
-
-Office2010Blue
-Syncfusion.Themes.Office2010Blue.Wpf.dll
-{{'[Syncfusion.Themes.Office2010Blue.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2010Blue.WPF/)'| markdownify }}
-
-
-
-Office2010Silver
-Syncfusion.Themes.Office2010Silver.Wpf.dll
-{{'[Syncfusion.Themes.Office2010Silver.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2010Silver.WPF/)'| markdownify }}
-
-
-
-Office365
-Syncfusion.Themes.Office365.Wpf.dll
-{{'[Syncfusion.Themes.Office365.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office365.WPF/)'| markdownify }}
-
-
-
-Office2016Colorful
-Syncfusion.Themes.Office2016Colorful.Wpf.dll
-{{'[Syncfusion.Themes.Office2016Colorful.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2016Colorful.WPF/)'| markdownify }}
-
-
-
-Office2016White
-Syncfusion.Themes.Office2016White.Wpf.dll
-{{'[Syncfusion.Themes.Office2016White.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2016White.WPF/)'| markdownify }}
-
-
-
-Office2016DarkGray
-Syncfusion.Themes.Office2016DarkGray.Wpf.dll
-{{'[Syncfusion.Themes.Office2016DarkGray.WPF](https://www.nuget.org/packages/Syncfusion.Themes.Office2016DarkGray.WPF/)'| markdownify }}
-
-
-
-VisualStudio2015
-Syncfusion.Themes.VisualStudio2015.Wpf.dll
-{{'[Syncfusion.Themes.VisualStudio2015.WPF](https://www.nuget.org/packages/Syncfusion.Themes.VisualStudio2015.WPF/)'| markdownify }}
-
-
-
-The following table lists the available themes supported in theme studio and alternative themes suggestions to be used in the application.
-
-
-
-
-Styles
-Supported in ThemeStudio
-Alternative theme suggestion to use
-
-
-Windows11Light
-Yes
--
-
-
-Windows11Dark
-Yes
--
-
-
-FluentLight
-Yes
--
-
-
-FluentDark
-Yes
--
-
-
-Material3Light
-Yes
--
-
-
-Material3Dark
-Yes
--
-
-
-MaterialLight
-Yes
--
-
-
-MaterialDark
-Yes
--
-
-
-MaterialLightBlue
-Yes
--
-
-
-MaterialDarkBlue
-Yes
--
-
-
-Office2019Colorful
-Yes
--
-
-
-Office2019Black
-Yes
--
-
-
-Office2019White
-Yes
--
-
-
-Office2019DarkGray
-Yes
--
-
-
-Office2019HighContrast
-Yes
--
-
-
-Office2019HighContrastWhite
-Yes
--
-
-
-SystemTheme
-Yes
--
-
-
-Metro
--
-FluentLight, Office2019Colorful
-
-
-Lime
--
-FluentLight, Office2019Colorful
-
-
-Saffron
--
-FluentLight, Office2019Colorful
-
-
-Blend
--
-FluentDark, MaterialDark, Office2019Black
-
-
-Office2013White
--
-Office2019White
-
-
-Office2013LightGray
--
-Office2019Colorful
-
-
-Office2013DarkGray
--
-Office2019DarkGray
-
-
-VisualStudio2013
--
--
-
-
-Office2010Black
--
--
-
-
-Office2010Blue
--
--
-
-
-Office2010Silver
--
--
-
-
-Office365
--
-Office2019Colorful
-
-
-Office2016Colorful
--
-Office2019Colorful
-
-
-Office2016White
--
-Office2019White
-
-
-Office2016DarkGray
--
-Office2019DarkGray
-
-
-VisualStudio2015
--
--
## Apply a theme to a control
### Add SkinManager reference
-There are several ways for including the Syncfusion® [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) reference in the Visual Studio WPF project. The following steps will help you to add by `XAML` Code:
+There are several ways to include the Syncfusion® [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) reference in the Visual Studio WPF project. The following steps will help you to add `XAML` Code:
1) Add a reference to the `Syncfusion.SfSkinManager.WPF` assembly or [Syncfusion.SfSkinManager.WPF nuget package](https://www.nuget.org/packages/Syncfusion.SfSkinManager.WPF/) to the project.
2) Import Syncfusion® WPF schema `http://schemas.syncfusion.com/wpf` or the assembly namespace `Syncfusion.SfSkinManager` into a XAML page.
@@ -422,14 +151,14 @@ There are several ways for including the Syncfusion® [SfSkinManag
### Add a theme assembly reference
-The [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) supports to apply themes listed in [themes list](https://help.syncfusion.com/wpf/themes/skin-manager#themes-list). To use a theme in the application, add Reference to the corresponding theme assembly. For example, to apply `MaterialDark` theme, attach `Syncfusion.Themes.MaterialDark.Wpf` assembly or [NuGet](https://www.nuget.org/packages/Syncfusion.Themes.MaterialDark.WPF/) reference to the project. While applying a theme to a Window, SkinManager inherits the same theme to all the elements inside the Window.
+The [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) supports to apply themes listed in [themes list](https://help.syncfusion.com/wpf/themes/skin-manager#themes-list). To use a theme in the application, add Reference to the corresponding theme assembly. For example, to apply `Windows11Light` theme, attach `Syncfusion.Themes.Windows11Light.Wpf` assembly or [NuGet](https://www.nuget.org/packages/Syncfusion.Themes.Windows11Light.WPF/) reference to the project. While applying a theme to a Window, SkinManager inherits the same theme to all the elements inside the Window.
-
+
### Set theme
-Themes will be applied to both Syncfusion® and Framework controls by using [Theme](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html#Syncfusion_SfSkinManager_SfSkinManager_ThemeProperty) attached property of the [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html). The theme assemblies have resource dictionaries with styles of controls. Thus, when the `Theme` property is set, the skin manager merges the theme resource dictionaries of an element to which the theme is applied and its descendants into the resource dictionary of the element to which the theme is applied or `Application.Current.Resource`.
+Themes will be applied to both Syncfusion® and Framework controls by using [Theme](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html#Syncfusion_SfSkinManager_SfSkinManager_ThemeProperty) attached property of the [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html). Also Ensure that the `ApplyThemeAsDefaultStyle` property is set to `true` before calling the SetTheme method
N> While applying the theme to a Window or any element, `SkinManager` inherits the same theme to all its descendants.
@@ -437,7 +166,7 @@ N> While applying the theme to a Window or any element, `SkinManager` inherits t
{% highlight XAML %}
- While applying the theme to a Window or any element, `SkinManager` inherits t
Icon="App.ico"
Title="Getting Started"
WindowStartupLocation="CenterScreen"
- syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=MaterialDark}">
+ syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=Windows11Light}">
While applying the theme to a Window or any element, `SkinManager` inherits t
ItemsSource="{Binding EmployeeDetails}">
-
+
{% endhighlight %}
{% highlight C# %}
-SfSkinManager.SetTheme(this, new Theme("MaterialDark"));
+SfSkinManager.ApplyThemeAsDefaultStyle = true;
+
+SfSkinManager.SetTheme(this, new Theme("Windows11Light"));
{% endhighlight %}
{% endtabs %}
-
+
N> [View sample in GitHub](https://github.com/SyncfusionExamples/wpf-themes-demo-using-skinmanager).
-## Apply a theme globally in the application
-
-By default, [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) merges the required resource files from the theme assembly to the element to which the theme is applied. To apply a theme globally in an application, set the `ApplyStylesOnApplication` property to `True`. It merges all the theme resource files to `Application.Current.Resources`.
-
-N> The `SfSkinManager.ApplyStylesOnApplication` static property should be set before `InitializeComponent` of the window or during application start up, when applying for multiple windows.
-
-{% tabs %}
-
-{% highlight C# %}
-
-SfSkinManager.ApplyStylesOnApplication = true;
-
-{% endhighlight %}
-
-{% endtabs %}
-
## Customize theme colors and fonts in the application
To customize the theme colors and fonts in the application, call [RegisterThemeSettings](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html#Syncfusion_SfSkinManager_SfSkinManager_RegisterThemeSettings_System_String_Syncfusion_SfSkinManager_IThemeSetting_) method and pass the theme name and respective theme setting instance as parameters.
-Each theme supported by the theme studio has its own theme settings class, which begins with the prefix of the themes' name. For example, if the theme name is `MaterialDark`, then there will be theme settings class called `MaterialDarkThemeSettings`.
+Each theme supported by the theme studio has its own theme settings class, which begins with the prefix of the themes' name. For example, if the theme name is `Windows11Light`, then there will be theme settings class called `Windows11LightThemeSettings`.
-N> Need to register theme settings before setting respective theme for window or control.
+N> Need to register theme settings before setting respective themes for window or control.
Please find the complete list of theme names, respective theme settings class, and supported palette.
@@ -659,7 +374,7 @@ Customize theme colors and fonts in the application
{% highlight C# %}
-FluentDarkThemeSettings themeSettings = new FluentDarkThemeSettings();
+Windows11LightThemeSettings themeSettings = new Windows11LightThemeSettings();
themeSettings.PrimaryBackground = new SolidColorBrush(Colors.Red);
themeSettings.PrimaryForeground = new SolidColorBrush(Colors.AntiqueWhite);
themeSettings.BodyFontSize = 15;
@@ -669,13 +384,14 @@ themeSettings.TitleFontSize = 17;
themeSettings.SubTitleFontSize = 16;
themeSettings.BodyAltFontSize = 15;
themeSettings.FontFamily = new FontFamily("Callibri");
-SfSkinManager.RegisterThemeSettings("FluentDark", themeSettings);
+SfSkinManager.RegisterThemeSettings("Windows11Light", themeSettings);
+SfSkinManager.SetTheme(this, new Theme("Windows11Light"));
{% endhighlight %}
{% endtabs %}
-
+
Customize theme colors using the predefined palette
@@ -683,9 +399,9 @@ Customize theme colors using the predefined palette
{% highlight C# %}
-FluentDarkThemeSettings themeSettings = new FluentDarkThemeSettings();
+Windows11LightThemeSettings themeSettings = new Windows11LightThemeSettings();
themeSettings.Palette = FluentPalette.PinkRed;
-SfSkinManager.RegisterThemeSettings("FluentDark", themeSettings);
+SfSkinManager.RegisterThemeSettings("Windows11Light", themeSettings);
{% endhighlight %}
@@ -693,128 +409,6 @@ SfSkinManager.RegisterThemeSettings("FluentDark", themeSettings);
N> [View sample in GitHub](https://github.com/SyncfusionExamples/customize-themes-using-theme-settings).
-## Apply themes to the specific controls
-
-To apply themes for specific controls in application and exclude some of the controls in window visual tree, provide control names list parameter in constructor of [Theme](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.Theme.html) class.
-
-This controls list option enables to merge the specific controls theme resource dictionary xaml files to window resources or application resources immediately instead of traversing the window visual tree and applying the theme for those controls in visual tree only.
-
-N> For framework controls, theme will be applied by default on setting the `Theme` property and cannot be skipped by using above option.
-
-For example, we have skipped applying style for `ComboBoxAdv` in below snippet by providing control names `ButtonAdv` and `ChromelessWindow` only in control names list parameter of `Theme` class.
-
-{% tabs %}
-
-{% highlight XAML %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-
-{% endtabs %}
-
-{% tabs %}
-
-{% highlight C# %}
-
-public partial class MainWindow : ChromelessWindow
-{
- public MainWindow()
- {
- SfSkinManager.SetTheme(this, new Theme("MaterialDark", new string[] { "ButtonAdv", "ChromelessWindow" }));
- InitializeComponent();
- }
-}
-
-{% endhighlight %}
-
-{% endtabs %}
-
-
-
-## Apply themes to the controls derived from Syncfusion® controls
-
-To apply themes to the derived control using `SfSkinManager`, call [SetResourceReference](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement.setresourcereference?view=windowsdesktop-8.0) method and, pass the `StyleProperty` and derived control type as parameters.
-
-{% tabs %}
-
-{% highlight XAML %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-
-{% endtabs %}
-
-{% tabs %}
-
-{% highlight C# %}
-
- public class SfDataGridExt : SfDataGrid
- {
- public SfDataGridExt()
- {
- SetResourceReference(StyleProperty, typeof(SfDataGrid));
- }
- }
-
-{% endhighlight %}
-
-{% endtabs %}
-
-## Clearing SkinManager instance in an application
-
-The `SfSkinManager` will hold some instances to use it further when applying the theme. However, this can be cleared using the function named `Dispose(object)`, which must be called when the theme applied by `SfSkinManager` is to be cleared, as shown in the following code. **Object** refers to the element whose instance needs to be cleared.
-
-
-{% tabs %}
-
-{% highlight C# %}
-
-private void Window_Closed(object sender, EventArgs e)
-{
- SfSkinManager.Dispose(this);
-}
-
-{% endhighlight %}
-
-{% endtabs %}
-
## Resource Key List
### Framework Controls
@@ -871,6 +465,8 @@ private void Window_Closed(object sender, EventArgs e)
Control Name Key Name
AutoComplete SyncfusionAutoCompleteStyle
+AssistView SyncfusionChatStyle
+AvartarView SyncfusionAvatarViewStyle
BusyIndicator SyncfusionBusyIndicatorStyle
ButtonAdv SyncfusionButtonAdvStyle
CalendarEdit SyncfusionCalendarEditStyle
@@ -974,266 +570,188 @@ private void Window_Closed(object sender, EventArgs e)
WizardControl SyncfusionWizardControlStyle
+## Apply themes to the controls derived from Syncfusion® controls
-## How to
-
-### Apply customized theme from Theme Studio
-
-Create custom themes by modifying the existing themes from Theme studio. To apply a custom theme in the application by using the following reference.
+To apply themes to a derived control using `SfSkinManager`, assign the base control type to the DefaultStyleKey property in the constructor of your derived control.
{% tabs %}
{% highlight XAML %}
-xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLightGreen}"
+
+
+
+
+
+
+
+
+
{% endhighlight %}
+{% endtabs %}
+
+{% tabs %}
+
{% highlight C# %}
-SfSkinManager.SetTheme(this, new Theme("FluentLightGreen"));
+ public class SfDataGridExt : SfDataGrid
+ {
+ public SfDataGridExt()
+ {
+ this.DefaultStyleKey = typeof(SfDataGrid);
+ }
+ }
{% endhighlight %}
{% endtabs %}
+### Apply customized theme from Theme Studio
-### Customize theme in application level
-
-To customize the Syncfusion® theme in application level, merge the theme in ResourceDictionary and override the style using 'BasedOn' property.
-
-In 'ResourceDictionary', mention the style path which need to be override, in 'BasedOn', mention the key stated in the table.
-
-We can customize or override the theme styles by following the steps outlined below.
-
+Create custom themes by [modifying the existing themes from Theme studio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme). To apply a custom theme in the application by using the following reference.
-**Step 1**: Merge the resource dictionaries of the controls which need to customize. In this example, we have merged the Framework Button‘s resource dictionary.
{% tabs %}
{% highlight XAML %}
-
-
-
+xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
+xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
+syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=Windows11LightYellow}"
{% endhighlight %}
-{% endtabs %}
-
-**Step 2**: Declare style for the control with 'BasedOn' key. Here style of the button has been declared and its key is used in 'BasedOn'. Button's Background, Foreground, FontFamily, BorderBrush has been overridden.
-
-{% tabs %}
-
-{% highlight XAML %}
+{% highlight C# %}
-
+SfSkinManager.SetTheme(this, new Theme("Windows11LightYellow"));
{% endhighlight %}
{% endtabs %}
-**Step 3**: Now, utilize the customized styles in our application using the 'Style' property. This step adds custom styles of Buttons in WPF application.
+### Apply custom style to active theme
+
+You can customize the theme by setting the `ApplyThemeAsDefaultStyle` property to `true`, which applies the theme based on each control’s default style.
{% tabs %}
-{% highlight XAML %}
+{% highlight C# %}
-
-
-
-
+SfSkinManager.ApplyThemeAsDefaultStyle = true;
{% endhighlight %}
{% endtabs %}
-
+N>The `SfSkinManager.ApplyThemeAsDefaultStyle` static property should be set before `InitializeComponent` of the window or during application start up.
-### Change visual style at runtime
+Enabling this setting allows you to override default theme styles. Follow the steps below to implement this behavior:
-Themes for application can be changed at runtime by changing `VisualStyle` property. Make sure that the new theme assembly is attached as reference in the application when applying theme.
+**Step 1:** In your MainWindow constructor, set the `ApplyThemeAsDefaultStyle` API to `true`:
{% tabs %}
-{% highlight XAML %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-
{% highlight C# %}
-SfSkinManager.SetVisualStyle(this, (VisualStyles)Enum.Parse(typeof(VisualStyles), comboVisualStyle.SelectedItem.ToString()));
+public partial class MainWindow : Window
+{
+ public MainWindow()
+ {
+ SfSkinManager.ApplyThemeAsDefaultStyle = true;
+ InitializeComponent();
+ }
+}
{% endhighlight %}
{% endtabs %}
-N> [View sample in GitHub](https://github.com/SyncfusionExamples/change-themes-at-runtime-using-skinmanager).
+**Step 2:** Declare styles for the controls you wish to customize. Below is an example of a Button style override.
-### Switch theme with custom styles
-
-To change a theme dynamically with custom styles, utilize the resource dictionary and override the style using the 'BasedOn' property.
-
-We have provided an example that demonstrates switching between the Window11Light and Windows11Dark themes using the SfGrid control. In this example, we customize the foreground color of the GridTableSummaryCell to green in **Window 11 Light** and red in **Windows 11 Dark**.
-
-* **Step 1**: In this example, we have an SfDataGrid and a RadioButton which is used to switching theme and we need to add resource dictionaries with paths in merged dictionaries in view model or code behind. The following code can be used to effortlessly switch themes.
-
{% tabs %}
-{% highlight C# %}
+{% highlight XAML %}
- private void RadioButton_Click(object sender, RoutedEventArgs e)
- {
- var themeName = (sender as RadioButton).Content.ToString();
- string syncfusionTheme = string.Empty;
- if (themeName == "Dark")
- {
- syncfusionTheme = "Windows11Dark";
- SfSkinManager.SetTheme(Application.Current.MainWindow, new Theme("Windows11Dark"));
- }
- else if (themeName == "Light")
- {
- syncfusionTheme = "Windows11Light";
- SfSkinManager.SetTheme(Application.Current.MainWindow, new Theme("Windows11Light"));
- }
-
- MergeResourceDictionary(syncfusionTheme);
- MergeCustomResourceDictionary(themeName);
- }
-
- private void MergeResourceDictionary(string syncfusionTheme)
- {
- Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
- {
- Source = new Uri($"/Syncfusion.Themes.{syncfusionTheme}.WPF;component/MSControl/Window.xaml", UriKind.RelativeOrAbsolute)
- });
- Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
- {
- Source = new Uri($"/Syncfusion.Themes.{syncfusionTheme}.WPF;component/MSControl/ComboBox.xaml", UriKind.RelativeOrAbsolute)
- });
- Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
- {
- Source = new Uri($"/Syncfusion.Themes.{syncfusionTheme}.WPF;component/SfDataGrid/SfDataGrid.xaml", UriKind.RelativeOrAbsolute)
- });
- }
-
- private void MergeCustomResourceDictionary(object selectedTheme)
- {
- Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
- {
- Source = new Uri($"/WpfApp1;component/Themes/{selectedTheme}.xaml", UriKind.RelativeOrAbsolute)
- });
- }
+
{% endhighlight %}
{% endtabs %}
-* **Step 2**: Customize the foreground color and font weight of the table summary row in both light and dark themes.
-
-**Light Theme**
+**Step 3:** You can now add controls to your `XAML`. The applied theme along with the custom style modifications will be applied to all instances of the target control type
{% tabs %}
{% highlight XAML %}
-
-
-
-
+
+
+
+
{% endhighlight %}
{% endtabs %}
-**Dark Theme**
+
-{% tabs %}
+You can also change a theme dynamically with custom styles.
-{% highlight XAML %}
+In the following example, a ComboBox is used to toggle between the Windows11Light and Windows11Dark themes. Here we customize the foreground color of the Button to red.
+
+{% tabs %}
-
+{% highlight C# %}
-
-
-
+private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
+{
+ switch (combo.SelectedIndex)
+ {
+ case 0: SfSkinManager.SetTheme(this, new Theme("Windows11Light"));
+ break;
+ case 1: SfSkinManager.SetTheme(this, new Theme("Windows11Dark"));
+ break;
+ }
+ }
{% endhighlight %}
{% endtabs %}
+At runtime, the applied theme along with any custom style modifications will reflect on the Button control
+
**Output Screenshots**
Light Theme:
-
+
Dark Theme:
-
+
+
+## Clearing SkinManager instance in an application
+
+The `SfSkinManager` will hold some instances to use it further when applying the theme. However, this can be cleared using the function named `Dispose(object)`, which must be called when the theme applied by `SfSkinManager` is to be cleared, as shown in the following code. **Object** refers to the element whose instance needs to be cleared.
+
+
+{% tabs %}
+
+{% highlight C# %}
+
+private void Window_Closed(object sender, EventArgs e)
+{
+ SfSkinManager.Dispose(this);
+}
+
+{% endhighlight %}
+
+{% endtabs %}
\ No newline at end of file
diff --git a/wpf/Themes/Skin-Manager_images/Add-Windows11Light-Theme-Assembly-Reference.png b/wpf/Themes/Skin-Manager_images/Add-Windows11Light-Theme-Assembly-Reference.png
new file mode 100644
index 0000000000..706bd4af18
Binary files /dev/null and b/wpf/Themes/Skin-Manager_images/Add-Windows11Light-Theme-Assembly-Reference.png differ
diff --git a/wpf/Themes/Skin-Manager_images/Applied-SkinManager-Theme-Window-DataGrid.png b/wpf/Themes/Skin-Manager_images/Applied-SkinManager-Theme-Window-DataGrid.png
new file mode 100644
index 0000000000..8cb06a171f
Binary files /dev/null and b/wpf/Themes/Skin-Manager_images/Applied-SkinManager-Theme-Window-DataGrid.png differ
diff --git a/wpf/Themes/Skin-Manager_images/Custom-Theme-Window-DataGrid.png b/wpf/Themes/Skin-Manager_images/Custom-Theme-Window-DataGrid.png
new file mode 100644
index 0000000000..9e6fe51d4c
Binary files /dev/null and b/wpf/Themes/Skin-Manager_images/Custom-Theme-Window-DataGrid.png differ
diff --git a/wpf/Themes/Skin-Manager_images/Customizing-theme-styles-for-buttons.png b/wpf/Themes/Skin-Manager_images/Customizing-theme-styles-for-buttons.png
new file mode 100644
index 0000000000..981d357f59
Binary files /dev/null and b/wpf/Themes/Skin-Manager_images/Customizing-theme-styles-for-buttons.png differ
diff --git a/wpf/Themes/Skin-Manager_images/Switching-theme-at-runtime-Dark.png b/wpf/Themes/Skin-Manager_images/Switching-theme-at-runtime-Dark.png
new file mode 100644
index 0000000000..8a9a6347b6
Binary files /dev/null and b/wpf/Themes/Skin-Manager_images/Switching-theme-at-runtime-Dark.png differ
diff --git a/wpf/Themes/Skin-Manager_images/Switching-theme-at-runtime-Light.png b/wpf/Themes/Skin-Manager_images/Switching-theme-at-runtime-Light.png
new file mode 100644
index 0000000000..0f199f2ed3
Binary files /dev/null and b/wpf/Themes/Skin-Manager_images/Switching-theme-at-runtime-Light.png differ
diff --git a/wpf/Themes/Theme-Studio.md b/wpf/Themes/Theme-Studio.md
index 828531a34b..1970278fb6 100644
--- a/wpf/Themes/Theme-Studio.md
+++ b/wpf/Themes/Theme-Studio.md
@@ -9,11 +9,11 @@ documentation: ug
# Getting Started with WPF Theme Studio
-The Theme Studio helps users to transform their visual presentation into a new theme in minutes. End-users can select an appropriate base theme, change its primary color, preview and export it as a theme project, and utilize it in their applications for a rich user interface experience.
+The Theme Studio enables users to transform their application's visual presentation into a new theme within minutes. Users can choose a base theme, change its primary color, preview the changes, and export the result as a theme project, ready to be integrated into their applications for a rich and engaging user interface experience.
## Supported themes
-The WPF Theme Studio comes with the following set of themes:
+The WPF Theme Studio includes the following built-in themes:
* Windows 11 Light
@@ -51,7 +51,7 @@ The WPF Theme Studio comes with the following set of themes:
## Supported palettes
-The WPF Theme Studio comes with various set of palettes for each theme variant.
+The WPF Theme Studio comes with various sets of palettes for each theme variant.
@@ -230,7 +230,7 @@ The theme studio application has been divided into two sections: the controls pr
**Step 3**
-To apply predefined themes, select the appropriate themes from Themes List Drop-down available in the top left corner.
+To apply predefined themes, select the appropriate themes from Themes List Drop-down available in the top right corner.

@@ -250,7 +250,7 @@ N> The WPF theme studio groups both Syncfusion® and Framework con
### Exporting theme project
-Let us see the step-by-step procedure for exporting theme project from theme studio.
+Let us see the step-by-step procedure for exporting theme project from a theme studio.
**Step 1**
@@ -266,7 +266,7 @@ Now, the Export dialog box appears with the option to select either the entire c
**Step 3**
-Provide the theme name, in which the theme should be exported and select the required folder for Theme Export to be selected. When you export the download theme, it will come as a theme project with color codes for the selected Syncfusion® WPF controls.
+Provide the theme name, in which the theme should be exported, and select the required folder for Theme Export to be selected. When you export the download theme, it will come as a theme project with color codes for the selected Syncfusion® WPF controls.

@@ -274,13 +274,15 @@ Provide the theme name, in which the theme should be exported and select the req

+N> When running the exported project in .NET 8.0 or .NET 9.0 environments, you may encounter reference issues due to missing or incompatible assemblies. To resolve this, manually add references to the required assemblies from the appropriate framework installation path or NuGet packages. Refer path location: C:\Program Files (x86)\Syncfusion\Essential Studio\WPF\ {product version}\precompiledassemblies\ {targetframework}\
+
### Generating theme assembly
-Let us see the step-by-step procedure for ensuring theme assembly generation for exported theme project.
+Let us see the step-by-step procedure for ensuring theme assembly generation for exported theme projects.
**Step 1**
-The following exported theme project should be attached for corresponding target frameworks used in the WPF application.
+The following exported theme project should be attached to corresponding target frameworks used in the WPF application.
@@ -289,31 +291,23 @@ Target Framework
Solution Project
-.Net 6.0
-Syncfusion.Themes.MaterialDarkYellow.WPF_NET60.csproj
+.Net 9.0
+Syncfusion.Themes.Windows11LightYellow.WPF_NET90.csproj
-.Net Framework 4.6
-Syncfusion.Themes.MaterialDarkYellow.WPF_2015.csproj
-
-
-.Net Framework 4.5.1
-Syncfusion.Themes.MaterialDarkYellow.WPF_2013.csproj
-
-
-.Net Framework 4.5
-Syncfusion.Themes.MaterialDarkYellow.WPF_2012.csproj
+.Net 8.0
+Syncfusion.Themes.Windows11LightYellow.WPF_NET80.csproj
+
-.Net Framework 4.0
-Syncfusion.Themes.MaterialDarkYellow.WPF_2010.csproj
+.Net Framework 4.6.2
+Syncfusion.Themes.Windows11LightYellow.WPF_2017.csproj
-
**Step 2**
-The exported theme project should be rebuild in `Release` mode to generate theme assembly.
+Rebuild the exported theme project in `Release` mode to generate the theme assembly.
The export theme project has default `ThemeStudio.snk` key pair. If it is not required, use the already created private key pair by referring to the export theme project inside the application properties or [Create a new key pair](https://docs.microsoft.com/en-us/dotnet/standard/assembly/create-public-private-key-pair) using Visual Studio if the private key pair was not created externally.
@@ -325,7 +319,7 @@ Ensure whether the `Sign the assembly` checkbox is clicked or not, to use the pr
The [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html) control helps to apply the built-in themes to the Syncfusion® UI controls for WPF.
-Let us see the step-by-step procedure for adding exported theme project as assembly(.dll) and witness the custom theme set for Docking Manager.
+Let us see the step-by-step procedure for adding exported theme project as assembly(.dll) and apply the custom theme to the DockingManager.
**Step 1**
@@ -353,13 +347,13 @@ Add reference of **Syncfusion.SfSkinManager.Wpf.dll** to the WPF application and
The appearance of any Syncfusion® UI controls for WPF can be customized by using the [Theme](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html#Syncfusion_SfSkinManager_SfSkinManager_ThemeProperty) attached property of the [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html).
-Now, use the [RegisterTheme](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html#Syncfusion_SfSkinManager_SfSkinManager_RegisterTheme_System_String_Syncfusion_SfSkinManager_SkinHelper_) method to register the instance of generated MaterialDarkYellow (`Syncfusion.Themes.MaterialDarkYellow.WPF`) assembly from the exported theme project for demonstration purposes, passing the exported custom theme name and respective theme assembly instance as parameters.
+Now, use the [RegisterTheme](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html#Syncfusion_SfSkinManager_SfSkinManager_RegisterTheme_System_String_Syncfusion_SfSkinManager_SkinHelper_) method to register the instance of generated Windows11LightYellow (`Syncfusion.Themes.Windows11LightYellow.WPF`) assembly from the exported theme project for demonstration purposes, passing the exported custom theme name and respective theme assembly instance as parameters.
{% tabs %}
{% highlight C# %}
-string style = "MaterialDarkYellow";
+string style = "Windows11LightYellow";
SkinHelper styleInstance = null;
var skinHelpterStr = "Syncfusion.Themes." + style + ".WPF." + style + "SkinHelper, Syncfusion.Themes." + style + ".WPF";
Type skinHelpterType = Type.GetType(skinHelpterStr);
@@ -367,7 +361,7 @@ if (skinHelpterType != null)
styleInstance = Activator.CreateInstance(skinHelpterType) as SkinHelper;
if (styleInstance != null)
{
- SfSkinManager.RegisterTheme("MaterialDarkYellow", styleInstance);
+ SfSkinManager.RegisterTheme("Windows11LightYellow", styleInstance);
}
{% endhighlight %}
@@ -376,9 +370,9 @@ if (styleInstance != null)
**Step 4**
-Now, set the `SfSkinManager` attached property `Theme` as `MaterialDarkYellow;MaterialDark` for the Docking Manager control since the MaterialDarkYellow (`Syncfusion.Themes.MaterialDarkYellow.WPF`) assembly has been generated from the exported theme project for demonstration purposes.
+Now, set the `SfSkinManager` attached property `Theme` as `Windows11LightYellow;Windows11Light` for the Docking Manager control since the Windows11LightYellow (`Syncfusion.Themes.Windows11LightYellow.WPF`) assembly has been generated from the exported theme project for demonstration purposes.
-N> Custom theme name is provided in this format: `CustomTheme1;BaseThemeName`, where `CustomTheme1` denotes the custom theme name and `BaseThemeName` denotes the theme name from which it is derived. For example, `MaterialDarkYellow;MaterialDark`.
+N> Custom theme name is provided in this format: `CustomTheme1;BaseThemeName`, where `CustomTheme1` denotes the custom theme name and `BaseThemeName` denotes the theme name from which it is derived. For example, `Windows11LightYellow;Windows11Light`.
{% tabs %}
{% highlight XAML %}
@@ -409,7 +403,7 @@ N> Custom theme name is provided in this format: `CustomTheme1;BaseThemeName`, w
{% endhighlight %}
{% highlight C# %}
-string style = "MaterialDarkYellow";
+string style = "Windows11LightYellow";
SkinHelper styleInstance = null;
var skinHelpterStr = "Syncfusion.Themes." + style + ".WPF." + style + "SkinHelper, Syncfusion.Themes." + style + ".WPF";
Type skinHelpterType = Type.GetType(skinHelpterStr);
@@ -417,9 +411,9 @@ if (skinHelpterType != null)
styleInstance = Activator.CreateInstance(skinHelpterType) as SkinHelper;
if (styleInstance != null)
{
- SfSkinManager.RegisterTheme("MaterialDarkYellow", styleInstance);
+ SfSkinManager.RegisterTheme("Windows11LightYellow", styleInstance);
}
-SfSkinManager.SetTheme(this, new Theme("MaterialDarkYellow;MaterialDark"));
+SfSkinManager.SetTheme(this, new Theme("Windows11LightYellow;Windows11Light"));
{% endhighlight %}
{% endtabs %}
@@ -428,4 +422,4 @@ SfSkinManager.SetTheme(this, new Theme("MaterialDarkYellow;MaterialDark"));
Compile and run the WPF application and witness the custom theme being applied to Docking Manager control at run-time.
-
\ No newline at end of file
+
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-Add-Reference.png b/wpf/Themes/ThemeStudio_images/ThemeStudio-Add-Reference.png
index 6cec227b75..fb855fa0ca 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-Add-Reference.png and b/wpf/Themes/ThemeStudio_images/ThemeStudio-Add-Reference.png differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-Color-Selection.png b/wpf/Themes/ThemeStudio_images/ThemeStudio-Color-Selection.png
index b879ca8126..29b759c91f 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-Color-Selection.png and b/wpf/Themes/ThemeStudio_images/ThemeStudio-Color-Selection.png differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-CustomColor-Change.png b/wpf/Themes/ThemeStudio_images/ThemeStudio-CustomColor-Change.png
index b5f6cfa7fb..31ebcd315e 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-CustomColor-Change.png and b/wpf/Themes/ThemeStudio_images/ThemeStudio-CustomColor-Change.png differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-DockingManager-AppliedTheme.PNG b/wpf/Themes/ThemeStudio_images/ThemeStudio-DockingManager-AppliedTheme.PNG
index d938904614..af9c9123b8 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-DockingManager-AppliedTheme.PNG and b/wpf/Themes/ThemeStudio_images/ThemeStudio-DockingManager-AppliedTheme.PNG differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-Export-Button.png b/wpf/Themes/ThemeStudio_images/ThemeStudio-Export-Button.png
index 268501da45..7d77342ea1 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-Export-Button.png and b/wpf/Themes/ThemeStudio_images/ThemeStudio-Export-Button.png differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-Export.PNG b/wpf/Themes/ThemeStudio_images/ThemeStudio-Export.PNG
index c06cdfdaf8..1537fc4743 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-Export.PNG and b/wpf/Themes/ThemeStudio_images/ThemeStudio-Export.PNG differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-ExportName.png b/wpf/Themes/ThemeStudio_images/ThemeStudio-ExportName.png
index 180a60164e..0e44290e51 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-ExportName.png and b/wpf/Themes/ThemeStudio_images/ThemeStudio-ExportName.png differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-GettingStarted.png b/wpf/Themes/ThemeStudio_images/ThemeStudio-GettingStarted.png
index e4f1a6f540..c84a6906db 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-GettingStarted.png and b/wpf/Themes/ThemeStudio_images/ThemeStudio-GettingStarted.png differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-LaunchPage.PNG b/wpf/Themes/ThemeStudio_images/ThemeStudio-LaunchPage.PNG
index d738432129..9cfdcda398 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-LaunchPage.PNG and b/wpf/Themes/ThemeStudio_images/ThemeStudio-LaunchPage.PNG differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-Palette.gif b/wpf/Themes/ThemeStudio_images/ThemeStudio-Palette.gif
index 2e07dc3361..c3ab913ec2 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-Palette.gif and b/wpf/Themes/ThemeStudio_images/ThemeStudio-Palette.gif differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-Theme-Selection.png b/wpf/Themes/ThemeStudio_images/ThemeStudio-Theme-Selection.png
index a3dd668a44..61a4d2455d 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-Theme-Selection.png and b/wpf/Themes/ThemeStudio_images/ThemeStudio-Theme-Selection.png differ
diff --git a/wpf/Themes/ThemeStudio_images/ThemeStudio-Themes-Folder.PNG b/wpf/Themes/ThemeStudio_images/ThemeStudio-Themes-Folder.PNG
index 04fd379963..66131996de 100644
Binary files a/wpf/Themes/ThemeStudio_images/ThemeStudio-Themes-Folder.PNG and b/wpf/Themes/ThemeStudio_images/ThemeStudio-Themes-Folder.PNG differ