syncfusion-wpf-button

Syncfusion WPF Button（ButtonAdv）の実装

ButtonAdv は、Syncfusion の拡張 WPF ボタンコントロールです。標準の WPF ボタンを拡張し、豊富なアイコンサポート（SmallIcon、LargeIcon、IconTemplate）、定義済みのサイズモード、トグル／チェック可能な動作、複数行のテキスト、MVVM コマンドバインディング、角の丸み、SfSkinManager による完全なテーマサポートを提供します。

必要なアセンブリ： Syncfusion.Shared.WPF
名前空間： Syncfusion.Windows.Tools.Controls
XAML スキーマ： http://schemas.syncfusion.com/wpf

---

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

• アプリケーションに Syncfusion WPF ボタンを追加する場合（デザイナー、XAML、C#）
• サイズモード（Small、Normal、Large）とアイコンを設定する場合
• トグル／チェック可能なボタンをセットアップする場合
• MVVM パターンを使用してコマンドをバインドする場合
• ラベル、角の丸み、アイコンサイズ、複数行テキストをカスタマイズする場合
• 組み込みテーマを適用する、またはボタンのテンプレートを編集する場合
• Click、Checked、Unchecked イベントを処理する場合

---

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• アセンブリ／NuGet のセットアップ
• デザイナー、XAML、C# で ButtonAdv を追加する方法
• Label プロパティの設定
• CornerRadius のカスタマイズ
• IsDefault モードと IsCancel モード
• アイコンの優先順位に基づく読み込み順序

サイズモードとアイコン

📄 参照： references/size-modes-and-icons.md

• SizeMode 列挙型：Small、Normal、Large
• SmallIcon と LargeIcon の使用ルール
• IconWidth／IconHeight によるサイズ指定
• IconTemplate（パスデータ、フォントアイコン、DataTemplate）
• 動的なアイコン切り替えに使用する IconTemplateSelector
• Large モードの複数行ラベルに使用する IsMultiLine

トグル状態

📄 参照： references/toggle-state.md

• IsCheckable — トグル動作を有効にします
• IsChecked — 初期のチェック状態を設定します
• Checked／Unchecked イベント
• Click イベントハンドラー

MVVM とコマンド

📄 参照： references/mvvm-and-commands.md

• Command プロパティのバインディング（ICommand）
• データを渡す CommandParameter
• DelegateCommand の実装パターン
• CanExecute と RaiseCanExecuteChanged
• ViewModel の完全な例

スタイルとテーマ

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

• SfSkinManager による組み込みテーマの適用
• Theme Studio によるカスタムテーマの作成
• Expression Blend でのテンプレート編集
• Visual Studio でのテンプレート編集

---

クイックスタート

最小限の XAML セットアップ

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" ...>
    <Grid>
        <syncfusion:ButtonAdv Label="Log in"
                              SizeMode="Normal"
                              SmallIcon="Images/user.png"
                              Width="120" Height="36"/>
    </Grid>
</Window>

最小限の C# セットアップ

using Syncfusion.Windows.Tools.Controls;

ButtonAdv button = new ButtonAdv();
button.Label = "Log in";
button.SizeMode = SizeMode.Normal;
button.SmallIcon = new BitmapImage(new Uri("Images/user.png", UriKind.RelativeOrAbsolute));
Root.Children.Add(button);

---

よくあるパターン

大きなアイコン付きボタン

<syncfusion:ButtonAdv Label="Save"
                      SizeMode="Large"
                      LargeIcon="Images/save-large.png"
                      Width="68" Height="68"/>

トグルボタン

<syncfusion:ButtonAdv Label="Bold"
                      SizeMode="Normal"
                      SmallIcon="Images/bold.png"
                      IsCheckable="True"
                      IsChecked="False"
                      Checked="OnBoldChecked"
                      Unchecked="OnBoldUnchecked"/>

MVVM コマンドバインディング

<syncfusion:ButtonAdv Label="Submit"
                      SizeMode="Normal"
                      Command="{Binding SubmitCommand}"
                      CommandParameter="SubmitAction"/>

アイコンテンプレート（ベクター／フォントアイコン）

<syncfusion:ButtonAdv Label="User" SizeMode="Normal">
    <syncfusion:ButtonAdv.IconTemplate>
        <DataTemplate>
            <Grid Width="16" Height="16">
                <Path Data="M16,0 C19.6,0 22.5,2.9 22.5,6.5 ..."
                      Fill="#FF3A3A38" Stretch="Fill"/>
            </Grid>
        </DataTemplate>
    </syncfusion:ButtonAdv.IconTemplate>
</syncfusion:ButtonAdv>

---

主なプロパティ

プロパティ	型	説明
Label	string	ユーザーに表示されるボタンのテキスト
SizeMode	SizeMode	Small（アイコンのみ）、Normal（アイコンとラベルを横に配置）、Large（アイコンの下にラベルを配置）
SmallIcon	ImageSource	Small／Normal サイズモード用のアイコン
LargeIcon	ImageSource	Large サイズモード用のアイコン
IconTemplate	DataTemplate	ベクター／フォントアイコンのテンプレート（最優先）
IconTemplateSelector	DataTemplateSelector	動的なアイコン切り替え
IconWidth	double	カスタムアイコンの幅
IconHeight	double	カスタムアイコンの高さ
CornerRadius	CornerRadius	角の丸み（既定値：3）
IsCheckable	bool	トグルボタンの動作を有効にします
IsChecked	bool	初期のトグル状態
IsMultiLine	bool	複数行ラベル（Large モードのみ）
IsDefault	bool	Enter キーで有効になります
IsCancel	bool	Escape キーで有効になります
Command	ICommand	MVVM コマンドバインディング
CommandParameter	object	コマンドハンドラーに渡されるデータ

アイコンの優先順位： IconTemplateSelector → IconTemplate → LargeIcon → SmallIcon