syncfusion-winforms-button

Syncfusion Windows Forms SfButton の実装

Syncfusion Windows Forms SfButton コントロールの実装とカスタマイズに関する総合ガイドへようこそ。SfButton は、リッチテキスト、画像のサポート、豊富なカスタマイズオプション、プロフェッショナルなテーマ機能を備えた高度なボタンコントロールです。

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

次のような場合に、このスキルを使用してください。

• Windows Forms アプリケーションで操作可能なボタンを作成する
• ボタンにテキストと画像を一緒に表示する
• 状態（ホバー、押下、フォーカス、無効）ごとにボタンの外観をカスタマイズする
• ボタンにリッチテキスト書式を適用する
• ボタンにテーマとスタイルを適用する
• ボタンのクリックイベントとユーザー操作を処理する
• アイコンのみ、または画像のみのボタンを作成する
• ボタンへのホバー時にツールヒントを表示する
• フォームの Accept ボタンまたは Cancel ボタンを設定する
• ボタンにアニメーション GIF 画像を実装する

コンポーネントの概要

SfButton は、標準の Windows Forms Button よりも高度なボタンコントロールです。主な機能は次のとおりです。

• リッチコンテンツ：テキスト、画像、リッチテキスト、アニメーション GIF を表示します
• 状態に応じたカスタマイズ：ホバー、押下、フォーカス、無効の各状態の外観をカスタマイズします
• プロフェッショナルなテーマ：Office 2016 の組み込みテーマ（Colorful、White、DarkGray、Black）を利用できます
• テキスト制御：テキストの折り返し、省略記号による省略、リッチテキスト書式に対応します
• 自動サイズ調整：コンテンツに応じてボタンのサイズを自動的に変更します
• 柔軟な配置：画像とテキストの配置、位置、間隔を制御します
• イベントのサポート：クリックイベント、フォーカス処理、ユーザー操作を全面的にサポートします
• 背景のカスタマイズ：単色、グラデーション、背景画像に対応します

---

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

はじめに

📄 参照： references/getting-started.md

まずはこちらを読んで、次の内容を学びましょう。

• アセンブリの依存関係と NuGet のインストール
• SfButton をフォームに追加する方法（デザイナーとコード）
• テキストとプロパティを使った基本的なボタンの設定
• クリックイベントの処理
• 最初に動作するサンプル

ボタンの種類とコンテンツ

📄 参照： references/button-types-and-content.md

さまざまなスタイルのボタンを作成する方法を学びましょう。

• テキストボタンと画像ボタン
• 画像のみ、アイコンのみのボタン
• TextImageRelation を使用したテキストと画像の配置
• 画像サイズのカスタマイズ
• リッチテキストのサポートと書式設定
• テキストの折り返しと省略記号による省略
• コンテンツ（テキストと画像）の配置
• ボタンの自動サイズ調整

外観とスタイル

📄 参照： references/appearance-and-styling.md

ボタンのスタイル設定とカスタマイズを習得しましょう。

• 単色の背景
• グラデーションブラシの背景
• レイアウトを指定した背景画像
• ボタンの状態ごとの外観のカスタマイズ
• すべての状態における背景色と前景色
• ホバー、押下、フォーカス、無効の各状態での画像の変更
• 状態ごとの境界線のカスタマイズ
• フォーカス四角形の表示設定
• 角丸四角形ボタンの実装
• アニメーション GIF 画像

イベントと操作

📄 参照： references/events-and-interactions.md

ボタンの操作を実装しましょう。

• クリックイベントの処理
• フォームの Accept ボタン（ENTER キー）の設定
• フォームの Cancel ボタン（ESC キー）の設定
• SfToolTip によるツールヒントのサポート
• フォーカスとキーボードの処理

---

クイックスタートの例

SfButton を使い始めるための最小限の例を示します。

using Syncfusion.WinForms.Controls;
using System.Windows.Forms;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        
        // Create and configure SfButton
        SfButton sfButton1 = new SfButton();
        sfButton1.Text = "Click Me";
        sfButton1.Font = new System.Drawing.Font("Segoe UI", 10F);
        sfButton1.Location = new System.Drawing.Point(50, 50);
        sfButton1.Size = new System.Drawing.Size(120, 40);
        
        // Add click event
        sfButton1.Click += SfButton1_Click;
        
        // Add to form
        this.Controls.Add(sfButton1);
    }
    
    private void SfButton1_Click(object sender, System.EventArgs e)
    {
        MessageBox.Show("Button clicked!");
    }
}

---

よく使われるパターン

パターン 1：画像とテキストを含むボタン

sfButton1.Text = "Save";
sfButton1.Image = Image.FromFile(@"save-icon.png");
sfButton1.TextImageRelation = TextImageRelation.ImageBeforeText;
sfButton1.ImageSize = new Size(20, 20);

パターン 2：アイコンのみのボタン

sfButton1.Text = "";  // Empty text
sfButton1.Image = Image.FromFile(@"icon.png");
sfButton1.ImageSize = new Size(24, 24);
sfButton1.Style.BackColor = Color.White;
sfButton1.Style.Border = null;

パターン 3：状態に応じて色が変わるボタン

sfButton1.Style.BackColor = Color.LightBlue;
sfButton1.Style.ForeColor = Color.Black;
sfButton1.Style.HoverBackColor = Color.Blue;
sfButton1.Style.HoverForeColor = Color.White;
sfButton1.Style.PressedBackColor = Color.DarkBlue;
sfButton1.Style.PressedForeColor = Color.White;

パターン 4：自動サイズ調整されるボタン

sfButton1.Text = "Variable Length Content";
sfButton1.AutoSize = true;  // Auto-adjust to content
sfButton1.Font = new Font("Segoe UI", 11F);

パターン 5：テーマを適用したボタン

// In Program.cs Main():
SfSkinManager.LoadAssembly(typeof(Office2016Theme).Assembly);

// In form:
sfButton1.ThemeName = "Office2016Colorful";

---

主なプロパティ一覧

プロパティ	型	用途
Text	string	ボタンに表示するテキスト
Image	Image	ボタンの画像／アイコン
ImageSize	Size	表示する画像のサイズ
TextImageRelation	TextImageRelation	テキストに対する画像の位置
TextAlign	ContentAlignment	ボタン内のテキストの配置
ImageAlign	ContentAlignment	ボタン内の画像の配置
AutoSize	bool	内容に合わせてボタンのサイズを自動調整
AllowWrapText	bool	テキストの折り返しを有効化
AutoEllipsis	bool	省略されたテキストに省略記号を表示
AllowRichText	bool	リッチテキスト形式を有効化
BackgroundImage	Image	背景の塗りつぶし画像
FocusRectangleVisible	bool	フォーカスインジケーターの四角形を表示
ThemeName	string	組み込みテーマを適用
Style	ButtonVisualStyle	外観のカスタマイズにアクセス

---

一般的な使用例

1. 保存／送信ボタン：アイコン付きテキスト、色付き背景、ホバー効果
2. アイコンツールバー：画像のみのボタンを行に並べる
3. テーマ付きダイアログボタン：一貫したテーマの承認／キャンセルボタン
4. リッチテキストボタン：カスタムカラーで書式設定したテキスト
5. 動的ボタン：状態に応じて外観が変化するボタン
6. フォームコントロールボタン：承認ボタン（ENTER）、キャンセルボタン（ESC）
7. 複数コンテンツボタン：カスタム配置で画像の上または下にテキストを配置

---

次のステップ

1. ✅ はじめにガイドを確認して、最初の SfButton をセットアップします
2. ✅ UI に合ったボタンスタイルをボタンの種類とコンテンツから選択します
3. ✅ プロフェッショナルな外観になるよう、外観とスタイル設定からスタイルを適用します
4. ✅ イベントとインタラクションの内容に沿って操作を実装します

---

アセンブリの依存関係

SfButton に必要なアセンブリ：

• Syncfusion.Core.WinForms（SfButton を含むメインアセンブリ）
• Syncfusion.Shared.Base（共有ベースライブラリ）
• Syncfusion.Office2016Theme.WinForms（テーマ用）

NuGet の詳細なインストール手順については、はじめにのリファレンスを参照してください。