syncfusion-maui-toolkit-segmented-control

.NET MAUI でのセグメントコントロールの実装

Syncfusion .NET MAUI Segmented Control（SfSegmentedControl）は、テキスト、アイコン、またはその両方を含む一連のセグメントを直線状に表示し、ユーザーが相互に排他的な選択肢から選べるようにします。各セグメントは独立したボタンとして機能するため、ビューの切り替え、コンテンツのフィルタリング、期間の選択を直感的に行えます。

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

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

• ビュー切り替え機能を実装する場合： 日／週／月／年のビュー、リスト／グリッドレイアウト、または異なるデータの可視化方法を切り替えます
• フィルターボタンを作成する場合： カテゴリ、種類、期間ごとにコンテンツをフィルタリングできるようにします
• タブのようなナビゲーションを構築する場合： 従来のタブを使わず、セグメントベースのナビゲーションを提供します
• 選択インターフェイスを設計する場合： ユーザーが2～7個の相互に排他的な選択肢から選べるようにします
• セグメントの外観をカスタマイズする場合： 境界線、背景、色、角の丸み、選択インジケーターをスタイル設定します
• 選択動作を構成する場合： プログラムによる選択、選択モード、カスタムインジケーターを設定します
• セグメントイベントを処理する場合： 選択の変更やセグメントのタップに応答します
• RTL レイアウトをサポートする場合： 右から左に記述する言語に対応します
• 特殊効果を適用する場合： リキッドグラス効果やカスタムアニメーションを追加します

一般的な用途：カレンダービューの切り替え、グラフの期間選択、並べ替えオプション、表示モードの切り替え、カテゴリフィルター、設定の切り替え。

コンポーネントの概要

主な機能：

• 複数の表示形式（テキスト、アイコン、またはその組み合わせ）
• 4種類の選択インジケーター（Fill、Border、TopBorder、BottomBorder）
• 項目数が多い場合にスクロール可能なセグメント
• 2種類の選択モード（Single、SingleDeselect）
• 豊富な外観カスタマイズ
• セグメントの無効化に対応
• RTL に対応
• リップル効果のアニメーション
• カスタムレイアウト用の DataTemplate に対応

パッケージ： Syncfusion.Maui.Toolkit
名前空間： Syncfusion.Maui.Toolkit.SegmentedControl
コントロールクラス： SfSegmentedControl

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

はじめに

📄 参照： references/getting-started.md

初期設定はここから始めてください。

• Syncfusion.Maui.Toolkit NuGet パッケージのインストール
• Syncfusion ハンドラーの登録（ConfigureSyncfusionToolkit）
• XAML と C# での基本的なコントロールの初期化
• 複数の IDE のセットアップ（Visual Studio、VS Code、Rider）
• 名前空間のインポートと最小限のサンプル

セグメント項目の追加

📄 参照： references/populating-items.md

コントロールにセグメントを追加する方法について説明します。

• 文字列配列で ItemsSource を使用する
• SfSegmentItem オブジェクトを作成する
• テキスト、アイコン、またはテキストとアイコンの組み合わせを追加する
• 画像ソースとフォントアイコンの設定
• 項目を動的に追加する
• データバインディングの方法

選択機能

📄 参照： references/selection.md

選択動作と外観を制御する方法について説明します。

• SelectedIndex によるプログラムでの選択
• 選択インジケーターの配置（Fill、Border、TopBorder、BottomBorder）
• 選択モード（Single、SingleDeselect）
• 選択されたセグメントの色と背景のカスタマイズ
• 選択されたセグメントの境界線のカスタマイズ
• リップル効果のアニメーション（EnableRippleEffect）
• 項目ごとの選択スタイル設定

外観のカスタマイズ

📄 参照： references/customization.md

コントロールのスタイル設定について説明します。

• 境界線の色と太さ（Stroke、StrokeThickness）
• 角の丸み（CornerRadius、SegmentCornerRadius）
• テキストのスタイル設定（TextStyle、FontAttributes、FontSize）
• セグメントの背景色
• 項目ごとのカスタマイズ
• 区切り線の表示設定（ShowSeparator）
• DataTemplate のカスタマイズ（SegmentTemplate）
• IsSelected バインディングを使用した選択項目のテンプレート

レイアウト設定

📄 参照： references/layout.md

サイズとレイアウトを制御するには：

• セグメントの幅（SegmentWidth、項目ごとの Width）
• セグメントの高さ（SegmentHeight）
• 表示するセグメント数（VisibleSegmentsCount）
• スクロール動作
• 自動サイズ調整と固定寸法

無効なセグメント

📄 参照： references/disabled-segments.md

特定のセグメントを無効にするには：

• セグメントごとに IsEnabled を設定する
• 無効状態を視覚的に示す
• ユーザー操作を防止する
• 条件に応じて無効にするケース

イベント

📄 参照： references/events.md

ユーザー操作を処理するには：

• SelectionChanged イベント
• SegmentTapped イベント
• イベント引数とセグメントデータへのアクセス
• 選択に対するプログラムによる応答
• イベント駆動型の UI 更新

高度な機能

📄 参照： references/advanced-features.md

特殊な機能：

• 右から左（RTL）のサポートと FlowDirection
• プラットフォーム固有の考慮事項