syncfusion-wpf-theming

Syncfusion WPF のテーマ設定

SfSkinManager を使用して、Syncfusion WPF コントロールとフレームワークコントロールに、プロフェッショナルでカスタマイズ可能なテーマを適用します。テーマ設定システムには、最新のデザイン標準（Windows 11、Fluent、Material 3、Office 2019）に準拠した組み込みテーマが用意されており、Theme Studio ユーティリティを使用して完全にカスタマイズできます。

このスキルを使用する場面

• 組み込みテーマの適用： あらかじめデザインされたテーマを選択し、アプリケーション全体または特定のコントロールに適用します
• テーマカラーのカスタマイズ： プログラムからテーマの色とフォントを変更します
• ブランドテーマの作成： アプリケーションのブランドイメージに合わせたカスタムテーマを作成します
• 視覚効果の設定： リビールアニメーション、アクリル効果、ホバー効果を有効または無効にします
• 複数ウィンドウのテーマ設定： すべてのウィンドウにグローバルにテーマを適用するか、個々のコントロールに適用します
• アクセシビリティ： キーボードフォーカスの視覚表示とハイコントラストテーマを設定します
• テーマの切り替え： 実行時の動的なテーマ切り替えに対応します

概要

主なコンポーネント：

• SfSkinManager： Syncfusion コントロールとフレームワークコントロールにテーマを適用します（XAML の添付プロパティまたは C# コード）
• 組み込みテーマ： Windows 11、Fluent、Material、Office スタイルなど、17 種類以上のあらかじめデザインされたテーマ
• カスタムテーマ： Theme Studio からエクスポートした後、カスタムテーマを登録してアプリケーションに統合します

ドキュメントとナビゲーションガイド

SfSkinManager の使用を開始する

📄 参照： references/skin-manager-setup.md

• SfSkinManager の参照とアセンブリの追加
• 個々のコントロールへのテーマの適用
• アプリケーション全体へのグローバルなテーマの適用
• テーマの継承（ウィンドウ → 子要素）の理解
• XAML と C# での基本的な実装
• ApplyThemeAsDefaultStyle プロパティの使用方法

組み込みテーマを確認する

📄 参照： references/built-in-themes.md

• 利用可能な 17 種類のテーマの完全な一覧
• ライト／ダークテーマのバリエーション
• テーマのカテゴリ：Windows 11、Fluent、Material 3、Material、Office 2019、ハイコントラスト、システム
• テーマアセンブリと NuGet パッケージの参照
• アプリケーションに適したテーマの選択
• Syncfusion コントロールとフレームワークコントロールとのテーマの互換性

テーマを作成およびカスタマイズする

📄 参照： references/theme-customization.md

• Theme Studio からカスタムテーマをエクスポートした後、このドキュメントの手順に従います
• プログラムから色とフォントをカスタマイズします
• エクスポートしたテーマプロジェクトを操作します
• テーマアセンブリを生成します
• カスタムテーマを登録して統合します
• 複数のフレームワークに対応する SDK スタイルのテーマプロジェクト（.NET 4.6.2、.NET 8.0、.NET 9.0、.NET 10.0）

高度なテーマ機能

📄 参照： references/theme-features.md

• Fluent テーマのリビールアニメーション（ホバー時と押下時の効果）
• HoverEffectMode と PressedEffectMode の設定
• ウィンドウのアクリル背景効果
• キーボードフォーカスの視覚インジケーター
• ScrollBar モード（Native、Compact）
• タッチサポートの設定

クイックスタートの例

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>
        
    </Grid>
</Window>

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();
    }
}

アプリケーション全体にテーマを適用する

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

一般的なパターン

パターン 1：実行時にテーマを切り替える

アプリケーションでユーザーがテーマを動的に切り替えられるようにします。

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

パターン 2：カスタムテーマと組み込みテーマを組み合わせる

組み込みテーマから派生したカスタムテーマを登録します。

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}"));

パターン 3：プログラムからテーマカラーをカスタマイズする

実行時に特定のテーマカラーを変更します。

// 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"));

テーマ選択ガイド

アプリケーションのスタイルで選択：

• モダン／Windows 11 ネイティブ： Windows11Light、Windows11Dark
• Microsoft Fluent Design： FluentLight、FluentDark
• Material Design： Material3Light、Material3Dark、MaterialLight、MaterialDark
• Office 風： Office2019Colorful、Office2019Black、Office2019White、Office2019DarkGray
• ハイコントラスト／アクセシビリティ： Office2019HighContrast、Office2019HighContrastWhite
• OS の設定に合わせる： SystemTheme

ライトとダーク：

• 明るい環境や日中の使用には、ライトテーマを使用します
• 暗い環境やユーザーの好みに応じて、ダークテーマを使用します
• SystemTheme と組み合わせると、OS の設定に自動的に合わせられます

主なプロパティ

プロパティ	用途	型	既定値
SfSkinManager.Theme	適用するテーマ名（XAML 添付プロパティ）	string	None
SfSkinManager.ApplicationTheme	アプリケーション全体のグローバルテーマ	Theme object	None
HoverEffectMode	ホバー時の視覚効果（Fluent テーマ）	HoverEffect enum	BackgroundAndBorder
PressedEffectMode	押下時の視覚効果（Fluent テーマ）	PressedEffect enum	Reveal
ShowAcrylicBackground	アクリルのぼかし効果を有効にします（Fluent テーマ）	bool	false
ApplyThemeAsDefaultStyle	テーマを既定のスタイルリソースとして適用します	bool	false

関連スキル

• カスタムテーマの作成とエクスポート（Theme Studio ガイド）
• キーボードアクセシビリティとフォーカスインジケーター
• テーマを適用したアプリケーションのレスポンシブデザイン