Syncfusion Wpf Theming

Implementing Syncfusion WPF Theming

Apply professional, customizable themes to Syncfusion WPF controls and framework controls using SfSkinManager. The theming system provides built-in themes following modern design standards (Windows 11, Fluent, Material 3, Office 2019) and supports complete customization through the Theme Studio utility.

When to Use This Skill

• Applying built-in themes: Choose and apply pre-designed themes to your entire application or specific controls
• Customizing theme colors: Modify theme colors and fonts programmatically
• Creating branded themes: Build custom themes that match your application's branding
• Configuring visual effects: Enable/disable reveal animations, acrylic effects, and hover effects
• Multi-window theming: Apply themes globally across all windows or to individual controls
• Accessibility: Configure keyboard focus visuals and high-contrast themes
• Theme switching: Support dynamic theme switching at runtime

Quick Overview

Key Components:

• SfSkinManager: Applies themes to Syncfusion and Framework controls (XAML attached property or C# code)
• Built-in Themes: 17+ pre-designed themes including Windows 11, Fluent, Material, and Office styles
• Custom Themes: After exporting from Theme Studio, register custom themes and integrate into applications

Documentation and Navigation Guide

Getting Started with SfSkinManager

📄 Read: references/skin-manager-setup.md

• Adding SfSkinManager references and assemblies
• Applying themes to individual controls
• Applying themes globally to entire applications
• Understanding theme inheritance (window → child elements)
• Basic implementation in XAML and C#
• ApplyThemeAsDefaultStyle property usage

Exploring Built-in Themes

📄 Read: references/built-in-themes.md

• Complete list of 17 available themes
• Light/Dark theme variants
• Theme categories: Windows 11, Fluent, Material 3, Material, Office 2019, High Contrast, System
• Theme assembly and NuGet package references
• Choosing the right theme for your application
• Theme compatibility with Syncfusion and Framework controls

Creating and Customizing Themes

📄 Read: references/theme-customization.md

• After exporting custom theme from Theme Studio, follow the steps in this document
• Customizing colors and fonts programmatically
• Working with exported theme projects
• Generating theme assemblies
• Registering and integrating custom themes
• Multi-framework SDK-style theme projects (.NET 4.6.2, .NET 8.0, .NET 9.0, .NET 10.0)

Advanced Theme Features

📄 Read: references/theme-features.md

• Fluent theme reveal animations (hover and pressed effects)
• Configuring HoverEffectMode and PressedEffectMode
• Acrylic background effects for windows
• Keyboard focus visual indicators
• ScrollBar modes (Native, Compact)
• Touch support configuration

Quick Start Example

Apply a Built-in Theme in XAML

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=Windows11Light}">
    <Grid>
        <!-- Your controls here - theme automatically applied -->
    </Grid>
</Window>

Apply a Theme in C#

using Syncfusion.SfSkinManager;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        // Enable theme as default style
        SfSkinManager.ApplyThemeAsDefaultStyle = true;
        
        // Apply theme to this window and all child controls
        SfSkinManager.SetTheme(this, new Theme("Windows11Light"));
        
        InitializeComponent();
    }
}

Apply Theme Globally to Application

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        SfSkinManager.ApplyThemeAsDefaultStyle = true;
        SfSkinManager.ApplicationTheme = new Theme("Fluent
Dark");
        
        base.OnStartup(e);
    }
}

Common Patterns

Pattern 1: Theme Switching at Runtime

Allow users to switch themes dynamically in your application:

// Example: Switch theme when user selects from dropdown
private void OnThemeSelectionChanged(string themeName)
{
    SfSkinManager.SetTheme(this, new Theme(themeName));
}

Pattern 2: Combine Custom Theme with Built-in Theme

Register a custom theme derived from a built-in theme:

string customThemeName = "MyCustomTheme";
string baseThemeName = "Windows11Light";

// Register custom theme (assuming custom theme assembly is referenced)
SkinHelper customThemeInstance = new MyCustomThemeSkinHelper();
SfSkinManager.RegisterTheme(customThemeName, customThemeInstance);

// Apply the custom theme
SfSkinManager.SetTheme(this, new Theme($"{customThemeName};{baseThemeName}"));

Pattern 3: Customize Theme Colors Programmatically

Modify specific theme colors at runtime:

// Example: Customize Windows 11 Light theme colors
var themeSettings = new Windows11LightThemeSettings();
themeSettings.Palette = new Windows11Palette 
{ 
    PrimaryColor = Colors.Blue,
    SecondaryColor = Colors.LightBlue
};

SfSkinManager.RegisterThemeSettings("Windows11Light", themeSettings);
SfSkinManager.SetTheme(this, new Theme("Windows11Light"));

Theme Selection Guide

Choose by Application Style:

• Modern/Windows 11 Native: Windows11Light, Windows11Dark
• Microsoft Fluent Design: FluentLight, FluentDark
• Material Design: Material3Light, Material3Dark, MaterialLight, MaterialDark
• Office-like: Office2019Colorful, Office2019Black, Office2019White, Office2019DarkGray
• High Contrast/Accessibility: Office2019HighContrast, Office2019HighContrastWhite
• Follow OS: SystemTheme

Light vs. Dark:

• Use Light themes for bright environments or daytime use
• Use Dark themes for low-light environments or as a user preference
• Pair with SystemTheme to automatically match OS settings

Key Properties

Related Skills

• Custom theme creation and export (Theme Studio guide)
• Keyboard accessibility and focus indicators
• Responsive design for themed applications