syncfusion-maui-toolbar

.NET MAUI でのツールバーの実装

ボタン、アイコン、メニューを通じてアクションやコマンドにすばやくアクセスできる、カスタマイズ可能な UI コンポーネントである Syncfusion .NET MAUI Toolbar（SfToolbar）の実装方法を説明します。

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

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

• ツールバーを追加する：コマンドにすばやくアクセスできるよう、.NET MAUI アプリケーションにツールバーを追加する
• ツールバー項目を設定する：アイコン、テキスト、またはカスタムビューを使用する
• テキスト書式設定ツールバーを実装する：太字、斜体、下線、配置
• ドキュメント編集ツールバーを作成する：オーバーフロー処理を含める
• ナビゲーションツールバーを追加する：横または縦のレイアウトを使用する
• 選択モードを設定する：単一、複数、切り替え
• ツールバーのイベントを処理する：タップ、選択、操作
• ツールバーの外観をカスタマイズする：色、スタイル、角の半径
• オーバーレイツールバーを実装する：コンテキストに応じたアクションに使用する
• 最新のガラス効果を適用する：ツールバーに適用する
• ツールバーでキーボードナビゲーションをサポートする
• ツールバー項目にツールチップを追加する

コンポーネントの概要

Syncfusion .NET MAUI Toolbar（SfToolbar）は、次の機能を備えた多機能コントロールです。

• 柔軟な項目表示：アイコン、テキスト、またはカスタムビュー
• 複数の向き：横および縦のレイアウト
• オーバーフロー処理：スクロール、ナビゲーションボタン、その他ボタン、複数行、拡張行
• 選択モード：単一、単一解除、複数選択
• 豊富なカスタマイズ：色、スタイル、フォント、角の半径
• イベントのサポート：タップ、長押し、タッチ操作、選択の変更
• オーバーレイツールバー：必要に応じて表示されるコンテキストツールバー
• 最新の効果：洗練された UI を実現するリキッドガラス効果
• アクセシビリティ：ツールチップ、キーボードナビゲーション、ARIA のサポート

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

はじめに

📄 参照： references/getting-started.md

参照する場面： インストール、初回セットアップ、基本的なツールバーの実装

取り上げるトピック：

• Syncfusion.Maui.Toolbar NuGet パッケージのインストール
• MauiProgram.cs での Syncfusion コアハンドラーの登録
• XAML と C# を使った初めてのツールバーの作成
• 基本的なツールバー項目の追加
• FontImageSource を使ったアイコンの設定
• Material アイコンフォントのセットアップ

ツールバー項目と表示

📄 参照： references/toolbar-items.md

参照する場面： ツールバー項目、アイコン、テキスト、カスタムビュー、区切り線、配置の設定

取り上げるトピック：

• アイコンのみのツールバー項目
• テキストのみのツールバー項目
• アイコンとテキストの組み合わせ
• アイコンのサイズとテキストの位置
• カスタム項目ビュー（ボタン、チェックボックス、エントリー）
• 視覚的な整理に使用する区切り線項目
• 項目のサイズと間隔
• 左端、右端、中央への配置
• 均等な間隔の設定
• プログラムによる選択の解除
• 識別用の項目名

レイアウトとオーバーフロー

📄 参照： references/layout-and-overflow.md

参照する場面： ツールバーの向きの設定、オーバーフロー項目の処理、スクロール／ナビゲーションモードの設定

取り上げるトピック：

• 横向きのツールバーレイアウト
• 縦向きのツールバーレイアウト
• オーバーフロー項目のスクロールモード
• 項目を順に移動するナビゲーションボタン
• ドロップダウンメニュー付きのその他ボタン
• その他ボタンの配置（自動、左、右、上、下）
• 項目を折り返す複数行表示のサポート
• 展開／折りたたみボタン付きの拡張行
• デフォルトのドロップダウンビューのキャンセル
• 幅と高さに関する考慮事項

選択と操作

📄 参照： references/selection-and-interaction.md

参照する場面： 選択動作の設定、ツールチップの有効化、ユーザー操作の処理

取り上げるトピック：

• 単一選択モード
• 単一解除モード（選択の切り替え）
• 複数選択モード
• ツールバー項目の有効化と無効化
• ツールチップテキストの設定
• ツールチップのカスタマイズ（背景、テキストスタイル、位置）
• キーボードナビゲーションのサポート
• IsEnabled 状態の管理
• ユーザー操作のパターン

イベントとコマンド

📄 参照: references/events-and-commands.md

読むタイミング: ツールバーのイベント処理、MVVM コマンドの実装、ユーザー操作への応答

対象トピック:

• Tapped イベントと TappedCommand
• ポインター操作用の ItemTouchInteraction イベント
• 長押しジェスチャ用の ItemLongPressed イベント
• オーバーフローボタン用の MoreButtonTapped イベント
• オーバーフロー項目用の MoreItemsChanged イベント
• 選択状態の追跡用の SelectionChanged イベント
• ViewModel との連携を含む MVVM コマンドパターン
• イベント引数とパラメーター
• コマンドの実行と CanExecute

カスタマイズ

📄 参照: references/customization.md

読むタイミング: ツールバー項目のスタイル設定、ボタンのカスタマイズ、色の変更、角の丸みの適用

対象トピック:

• ツールバー項目のカスタマイズ（IsEnabled、TextStyle、Color）
• 選択項目用の SelectionHighlightColor
• セパレーターのカスタマイズ（線の色、太さ）
• ナビゲーションボタンのカスタマイズ（色、背景）
• ナビゲーションボタンの DataTemplate のカスタマイズ
• More ボタンのカスタマイズ（アイコンの色、背景）
• 区切り線のカスタマイズ
• ツールバーの角の丸み
• 選択項目の角の丸み
• テーマとの統合

高度な機能

📄 参照: references/advanced-features.md

読むタイミング: オーバーレイツールバーの実装、ガラスエフェクトの適用、高度なスタイル設定

対象トピック:

• オーバーレイツールバーの実装
• オーバーレイ内の戻るアイコンのカスタマイズ
• BackIconAlignment（Start／End の位置設定）
• カスタム戻るアイコン用の BackIconTemplate
• BackIconToolTipText の設定
• リキッドガラスエフェクトのセットアップ
• ガラスエフェクト用の透明な背景
• ガラスエフェクトを使ったツールバーのグループ化レイアウト
• セパレーターの線幅によるグループ間隔の設定
• プラットフォームのサポート（macOS 26 以降、iOS 26 以降、.NET 10）