syncfusion-maui-segmented-control

.NET MAUI でセグメントコントロールを実装する

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

このスキルを使う場面

次のことが必要な場合は、このスキルを使ってください。

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

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

コンポーネントの概要

主な機能：

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

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

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

はじめに

📄 参照： references/getting-started.md

初期セットアップは、こちらから始めてください。

• Syncfusion.Maui.Buttons NuGet パッケージのインストール
• Syncfusion ハンドラーの登録（ConfigureSyncfusionCore）
• 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
• リキッドガラス効果のスタイル設定
• カスタム視覚効果
• プラットフォーム固有の考慮事項