syncfusion-winforms-metroform

Syncfusion MetroForm の実装

MetroForm は Syncfusion の Windows Forms コントロールで、デスクトップアプリケーションにフラットな外観のモダンな Metro UI スタイルを提供します。キャプションバーのラベル、画像、色、境界線など、多彩なカスタマイズオプションに加え、角を丸くする機能（Windows 11 以降）などの高度な機能を備えています。

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

次のような場合に、このスキルを使用します。

• モダンな Metro スタイルの Windows Forms アプリケーションを作成する
• ラベル、画像、カスタムカラーでウィンドウのタイトルバーをカスタマイズする
• 標準の Windows Forms をフラットでモダンな外観に置き換える
• フォームにキャプションバーの要素（ラベル、画像、アイコン）を追加する
• フォームの境界線、色、キャプションバーの高さをカスタマイズする
• キャプションバーにカスタム描画を実装する
• キャプション画像のマウスイベントを処理する
• 角が丸いフォームを作成する（Windows 11 以降）
• モダンな UI を備えたプロフェッショナルなデスクトップアプリケーションを構築する

コンポーネントの概要

MetroForm は標準の Windows Forms Form クラスを拡張し、次の機能を提供します。

• モダンな Metro UI のフラットな外観
• 高さを設定できるカスタマイズ可能なキャプションバー
• キャプションラベルと画像のサポート
• 幅広い色のカスタマイズ（境界線、キャプションバー、ボタン）
• キャプションの配置オプション（水平および垂直）
• キャプションバーの背景に適用するカスタムブラシ効果
• キャプション画像のマウスイベント処理
• 角を丸くする機能（Windows 11 以降）
• 組み込みのテーマサポート

主な機能

• 色のカスタマイズ - キャプションの背景色と前景色、コントロールボックスのボタン、境界線の色
• キャプション要素 - キャプションバーにラベルと画像を追加
• ヘルプボタンのサポート - タイトルバーに任意でヘルプボタンを追加
• 右から左へのレイアウト - RTL 言語のサポート
• 柔軟な配置 - キャプションテキストとアイコンの配置オプション
• カスタム描画 - キャプションバーを高度にカスタマイズする描画イベント
• モダンな外観 - 角を丸くするオプションを備えたフラットな Metro スタイル

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

はじめに

📄 参照: references/getting-started.md

次のような場合は、このリファレンスを参照してください。

• MetroForm を初めてインストールして設定する
• アセンブリ参照と NuGet パッケージを設定する
• MetroForm を使用する新しいプロジェクトを作成する
• 既存の Form を MetroForm に変換する
• 基本的なキャプションラベルと画像を追加する
• 初期設定のワークフローを理解する

キャプションのカスタマイズ

📄 参照: references/caption-customization.md

次のような場合は、このリファレンスを参照してください。

• デザイナーまたはコードでキャプションラベルを追加する
• デザイナーまたはコードでキャプション画像を追加する
• CaptionLabels コレクションを設定する
• CaptionImages コレクションを設定する
• ラベルのプロパティ（フォント、色、サイズ、テキスト）をカスタマイズする
• 画像のプロパティ（位置、サイズ、画像リソース）をカスタマイズする

外観とスタイル

📄 参照: references/appearance-styling.md

次のような場合は、このリファレンスを参照してください。

• 境界線の太さと色をカスタマイズする
• キャプションバーの高さとモードを設定する
• キャプションバーの色を変更する
• キャプションテキストを左、中央、右に配置する
• キャプションテキストを上、中央、下に垂直配置する
• アイコンの配置を設定する
• キャプションの前景色とフォントをカスタマイズする
• キャプションボタンのスタイルを設定する（色、ホバー時の色）

高度なカスタマイズ

📄 参照: references/advanced-customization.md

次のような場合は、このリファレンスを参照してください。

• キャプションバーの背景にカスタムブラシを適用する
• CaptionBarPaint イベントでカスタム描画を実装する
• キャプションバーにグラデーション効果を作成する
• キャプション画像のマウスイベント（MouseDown、MouseUp、MouseEnter、MouseLeave、MouseMove）を処理する
• 角を丸くする機能を有効にする（Windows 11 以降）
• 高度な視覚効果を実装する

クイックスタート

手順 1：パッケージをインストールする

Install-Package Syncfusion.Shared.Base

手順 2：アセンブリ参照を追加する

次への参照を追加します。

• Syncfusion.Shared.Base.dll

手順 3：フォームを設定する

using Syncfusion.Windows.Forms;

namespace MyApplication
{
    // Inherit from MetroForm instead of Form
    public partial class MainForm : MetroForm
    {
        public MainForm()
        {
            InitializeComponent();
            
            // Basic configuration
            this.Text = "My Metro Application";
            this.CaptionBarHeight = 40;
            this.CaptionBarColor = Color.FromArgb(17, 158, 218);
            this.CaptionForeColor = Color.White;
            this.BorderColor = Color.FromArgb(17, 158, 218);
            this.BorderThickness = 2;
        }
    }
}

Imports Syncfusion.Windows.Forms

Namespace MyApplication
    ' Inherit from MetroForm instead of Form
    Public Partial Class MainForm
        Inherits MetroForm
        
        Public Sub New()
            InitializeComponent()
            
            ' Basic configuration
            Me.Text = "My Metro Application"
            Me.CaptionBarHeight = 40
            Me.CaptionBarColor = Color.FromArgb(17, 158, 218)
            Me.CaptionForeColor = Color.White
            Me.BorderColor = Color.FromArgb(17, 158, 218)
            Me.BorderThickness = 2
        End Sub
    End Class
End Namespace

よくあるパターン

パターン 1：キャプションラベルを追加する

// Create and configure caption label
CaptionLabel captionLabel = new CaptionLabel();
captionLabel.Text = "Dashboard";
captionLabel.Font = new Font("Segoe UI", 10F, FontStyle.Regular);
captionLabel.ForeColor = Color.White;
captionLabel.Size = new Size(200, 24);

// Add to form
this.CaptionLabels.Add(captionLabel);

パターン 2：クリックハンドラー付きキャプション画像の追加

// Create and configure caption image
CaptionImage logoImage = new CaptionImage();
logoImage.Image = Properties.Resources.AppLogo;
logoImage.Location = new Point(10, 5);
logoImage.Size = new Size(32, 32);
logoImage.BackColor = Color.Transparent;

// Handle click event
logoImage.ImageMouseDown += (sender, e) =>
{
    MessageBox.Show("Logo clicked!");
};

// Add to form
this.CaptionImages.Add(logoImage);

パターン 3：カスタムキャプションバーのグラデーション

// Apply gradient brush to caption bar
this.CaptionBarBrush = new LinearGradientBrush(
    new Rectangle(0, 0, this.Width, this.CaptionBarHeight),
    Color.DarkBlue,
    Color.LightBlue,
    LinearGradientMode.Horizontal
);

// Optional: Custom paint event for more control
this.CaptionBarPaint += (sender, e) =>
{
    using (var brush = new LinearGradientBrush(
        e.ClipRectangle,
        Color.DarkBlue,
        Color.LightBlue,
        LinearGradientMode.Horizontal))
    {
        e.Graphics.FillRectangle(brush, e.ClipRectangle);
    }
};

パターン 4：角丸（Windows 11 以降）

// Enable rounded corners (Windows 11 only)
this.AllowRoundedCorners = true;
this.BorderColor = Color.FromArgb(17, 158, 218);

主なプロパティ

キャプションバーのプロパティ

• CaptionBarHeight - キャプションバーの高さ（既定値は状況によって異なります）
• CaptionBarColor - キャプションバーの背景色
• CaptionForeColor - キャプションバーのテキスト色
• CaptionFont - キャプションテキストのフォント
• CaptionAlign - 水平方向の配置（Left、Center、Right）
• CaptionVerticalAlignment - 垂直方向の配置（Top、Center、Bottom）
• CaptionBarHeightMode - 最大化時の高さの動作

境界線のプロパティ

• BorderColor - フォームの境界線の色
• BorderThickness - 境界線の太さ（ピクセル単位）
• AllowRoundedCorners - 角丸を有効にします（Windows 11 以降）

ボタンのプロパティ

• CaptionButtonColor - キャプションボタン（最小化、最大化、閉じる）の色
• CaptionButtonHoverColor - ホバー時のボタンの色

コレクション

• CaptionLabels - CaptionLabel オブジェクトのコレクション
• CaptionImages - CaptionImage オブジェクトのコレクション

アイコンのプロパティ

• IconAlign - フォームアイコンの配置（Left、Center、Right）

詳細プロパティ

• CaptionBarBrush - キャプションバーの背景に使用するカスタムブラシ

一般的な使用例

使用例 1：ダッシュボードアプリケーション

キャプションバーにカスタムブランディングを施したモダンなダッシュボードを作成します。

this.Text = "Analytics Dashboard";
this.CaptionBarHeight = 50;
this.CaptionBarColor = Color.FromArgb(41, 128, 185);

// Add company logo
CaptionImage logo = new CaptionImage
{
    Image = Resources.CompanyLogo,
    Location = new Point(10, 10),
    Size = new Size(30, 30)
};
this.CaptionImages.Add(logo);

// Add title label
CaptionLabel title = new CaptionLabel
{
    Text = "Real-Time Analytics",
    Font = new Font("Segoe UI Semibold", 11F),
    ForeColor = Color.White
};
this.CaptionLabels.Add(title);

使用例 2：設定ダイアログ

シンプルで見やすい設定ダイアログを作成します。

this.Text = "Settings";
this.CaptionBarHeight = 35;
this.CaptionBarColor = Color.FromArgb(52, 73, 94);
this.CaptionForeColor = Color.White;
this.BorderColor = Color.FromArgb(52, 73, 94);
this.BorderThickness = 1;
this.FormBorderStyle = FormBorderStyle.FixedDialog;
this.MaximizeBox = false;
this.MinimizeBox = false;

使用例 3：カスタム外観のメインアプリケーションウィンドウ

グラデーションのキャプションとカスタムコントロールを備えたメインウィンドウを作成します。

// Gradient caption bar
this.CaptionBarBrush = new LinearGradientBrush(
    new Rectangle(0, 0, this.Width, this.CaptionBarHeight),
    Color.FromArgb(44, 62, 80),
    Color.FromArgb(52, 152, 219),
    LinearGradientMode.Horizontal
);

// Caption buttons
this.CaptionButtonColor = Color.White;
this.CaptionButtonHoverColor = Color.FromArgb(231, 76, 60);

// Add user info to caption
CaptionLabel userLabel = new CaptionLabel
{
    Text = "Welcome, John Doe",
    ForeColor = Color.White,
    Font = new Font("Segoe UI", 9F),
    Location = new Point(100, 10)
};
this.CaptionLabels.Add(userLabel);

イベント

キャプションバーのイベント

• CaptionBarPaint - キャプションバーの再描画が必要なときに発生します（カスタム描画用）

キャプション画像のイベント（画像ごと）

• ImageMouseDown - キャプション画像上でマウスボタンが押されたときに発生します
• ImageMouseUp - キャプション画像上でマウスボタンが離されたときに発生します
• ImageMouseEnter - マウスがキャプション画像の領域に入ったときに発生します
• ImageMouseLeave - マウスがキャプション画像の領域から離れたときに発生します
• ImageMouseMove - キャプション画像の領域内でマウスが移動したときに発生します

トラブルシューティング

フォームが Metro スタイルで表示されない

• Form ではなく MetroForm を継承していることを確認します
• Syncfusion.Shared.Base.dll が参照されていることを確認します
• 名前空間 Syncfusion.Windows.Forms がインポートされていることを確認します

キャプションラベル／画像が表示されない

• CaptionBarHeight がコンテンツに対して十分な高さであることを確認します
• 前景色とキャプションバーの色のコントラストを確認します
• Size プロパティが適切に設定されていることを確認します

角丸が機能しない

• 角丸が機能するのは Windows 11 以降のみです
• AllowRoundedCorners = true を設定します
• 注意：角丸が有効な場合、境界線と影は OS によって描画されます

デザイナーのエラー

• ソリューションをクリーンアップして再ビルドします
• Visual Studio を再起動します
• NuGet パッケージが正しく復元されていることを確認します

関連コンポーネント

• Office2007Form - Office 2007 スタイルのフォーム
• OfficeForm - リボンをサポートする Office スタイルのフォーム
• Form - 標準の Windows Forms（比較用）

追加リソース

• MetroForm API リファレンス
• コントロールの依存関係
• NuGet インストールガイド