syncfusion-maui-button について
Syncfusion .NET MAUI SfButton の実装とカスタマイズを支援するドキュメントスキルです。MAUI 開発者向けに、コンテンツ、スタイル、状態、イベント、トラブルシューティングを扱います。
主な機能
- 01アウトライン、フラット、円形、アイコンスタイル
- 02アイコン、背景画像、カスタムビュー
- 03ホバー、押下、チェック、無効状態
- 04クリックイベント処理
- 05RTL と Liquid Glass のサポート
活用シーン
- 01アイコンまたは画像ボタンの作成
- 02トグル式・チェック可能なボタンの構築
- 03操作状態に応じたボタンのスタイル設定
- 04ボタンの設定やレイアウトの問題解決
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-buttonインストール後、Claude Code で/syncfusion-maui-buttonを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/advanced-features.mdcustomization.mdgetting-started.mdtroubleshooting.mdvisual-states.md詳細
.NET MAUI Button の実装
Syncfusion .NET MAUI Button(SfButton)コントロールを実装およびカスタマイズするための包括的なスキルです。SfButton には、アイコン、背景画像、Visual State、角の丸み、カスタムコンテンツのサポートなど、豊富なカスタマイズオプションが用意されています。
このスキルを使う場面
次のような場合に、このスキルを使用します。
- .NET MAUI プロジェクトに SfButton をインストールして設定する
- テキストやアイコンを使った基本的なボタンやカスタマイズしたボタンを作成する
- Visual State(通常、ホバー、押下、チェック済み、無効)を実装する
- ボタンに背景画像やカスタムコンテンツを追加する
- ボタンのクリックイベントを処理する
- トグルボタン/チェック可能なボタンを作成する
- RTL(右から左へ)をサポートする
- Liquid Glass エフェクトを使ったモダンなスタイルを実装する
- ボタンの外観(色、フォント、境界線、パディング)をカスタマイズする
- ボタン関連の問題をトラブルシューティングする
コンポーネントの概要
Syncfusion .NET MAUI Button(SfButton)は、標準の MAUI ボタンを拡張し、高度な UI カスタマイズ機能を備えたカスタムボタンコントロールです。
主な機能:
- 柔軟なスタイル設定: アウトライン、フラット、円形、アイコンボタンの各タイプ
- 豊富なコンテンツ: アイコン、背景画像、カスタムビュー
- Visual State: ホバー、押下、チェック済み、無効状態を標準でサポート
- モダンなエフェクト: 最新の UI デザインに対応する Liquid Glass のサポート
- アクセシビリティ: RTL サポートとキーボードナビゲーション
- 簡単な統合: XAML または C# で簡単に実装可能
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
参照する場面:インストール、初期設定、初回の実装
- NuGet パッケージのインストール(
Syncfusion.Maui.Buttons) MauiProgram.csでのハンドラー登録- XAML と C# による基本的なボタンの実装
ImageSourceとShowIconを使ったボタンアイコンの追加BackgroundImageSourceを使った背景画像の設定- 最小限の動作例
カスタマイズとスタイル設定
📄 参照: references/customization.md
参照する場面:外観のカスタマイズ、ボタンのスタイル設定、レイアウトの制御
- テキストのカスタマイズ(色、サイズ、フォント、配置)
- 背景色と境界線のスタイル設定
- 角の丸みとパディングの調整
- サイズの制御(幅、高さ)
- 画像の幅と配置
- 配置オプション(水平、垂直)
- スタイル設定の完全な例
Visual State
📄 参照: references/visual-states.md
参照する場面:状態に応じたスタイル設定、ホバーエフェクト、トグルボタン、操作へのフィードバック
- Visual State の概要(Normal、Hovered、Pressed、Checked、Disabled)
- VisualStateManager の実装
IsCheckableを使ったチェック可能なボタン/トグルボタンの作成- 各状態の外観のカスタマイズ
- 状態遷移の処理
- 状態管理の完全な例
高度な機能
📄 参照: references/advanced-features.md
参照する場面:RTL サポート、モダンなエフェクト、カスタムコンテンツ、イベント、移行
- 右から左へ(RTL)の言語サポート
- Liquid Glass エフェクトの実装
- ボタン内へのカスタムコンテンツビューの追加
- クリックイベント(
Clickedイベント)の処理 - 高度なシナリオと組み合わせ
- 旧バージョンからの移行
トラブルシューティング
📄 参照: references/troubleshooting.md
参照する場面:問題、エラー、予期しない動作、ベストプラクティス
- よくある問題と解決方法
- ハンドラー登録エラー
- 画像の読み込みに関する問題
- レイアウトとサイズに関する問題
- Visual State が更新されない
- プラットフォーム固有の注意事項