syncfusion-winui-segmented-control

WinUI セグメントコントロールの実装

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

ユーザーが次のことを必要としている場合に、このスキルを使用します。

• セグメントコントロールまたはセグメントピッカー UI を作成する
• 相互排他的なオプション選択を実装する
• TabControl を使わずにタブのようなナビゲーションを構築する
• フィルターバーまたは表示モード切り替えを作成する
• 1 つだけ選択できる 2 つ以上の横並びのオプションを表示する
• 選択時のアニメーション遷移（スライド効果）を追加する
• カスタムセグメントスタイル（楕円、円、上部インジケーター）を作成する
• セグメント選択のキーボードナビゲーションを実装する
• 特定のセグメントを条件に応じて無効にする
• ライトテーマとダークテーマの両方に対応する

ユーザーが WinUI アプリケーションで次の言葉に言及した場合は、必ずこのスキルを適用してください。 segmented control、segment picker、option selector、filter bar、view switcher、tab selector、mutually exclusive buttons、segment-based navigation。

コンポーネントの概要

SfSegmentedControl は、2 つ以上の横並びのセグメントから選択するためのシンプルな方法を提供する Syncfusion WinUI コントロールです。各セグメントは相互排他的なオプションとして機能します。スライドアニメーション、カスタムスタイル、テーマ対応を備え、ラジオボタンやタブに代わるすっきりとした選択肢です。

名前空間： Syncfusion.UI.Xaml.Editors
NuGet パッケージ： Syncfusion.Editors.WinUI
プラットフォーム： WinUI 3 デスクトップ（.NET 5 以降、Windows App SDK 1.0 以降）

主な利点： スライドアニメーション、影の効果、幅広いカスタマイズ機能を備えた、iOS スタイルの最新のセグメントピッカーを提供します。複雑な UI を使わず、コンパクトにオプションを選択するのに最適です。

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

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ（Syncfusion.Editors.WinUI）
• 名前空間のインポート（Syncfusion.UI.Xaml.Editors）
• SfSegmentedControl の基本的な初期化
• 文字列コレクションでの項目の設定（インライン x:String 項目）
• ビジネスオブジェクトでの項目の設定（ItemsSource、DisplayMemberPath）
• カスタム UI 用の ItemTemplate（アイコン、画像、テキスト）
• ViewModel を使った最初の完全な例
• ライセンスの登録

選択機能

📄 参照： references/selection.md

• プログラムによる選択のための SelectedIndex プロパティ
• SelectedItem プロパティと双方向バインディング
• NewValue と OldValue を含む SelectionChanged イベント
• プログラムによる選択の処理（インデックス、項目、順次切り替え）

📄 参照： references/selection-styling.md

• SelectedSegmentStyle のカスタマイズ
• 選択項目への影の効果（HasShadow、ShadowColor）
• 選択アニメーション（Slide または None）と SelectionAnimationType プロパティ
• キーボードナビゲーション（矢印キー、Tab、Enter）
• 選択に関するベストプラクティス

項目の無効化

📄 参照： references/disable-items.md

• 条件に応じて無効にする SetItemEnabled メソッド
• インデックスでセグメントを無効にする
• 無効な項目の視覚的な表示
• 特定のセグメントに対するユーザー操作の防止
• 一般的なパターン（フォームの検証、条件付きの利用可否）

UI のカスタマイズ

📄 参照： references/ui-customization.md

• BorderThickness と ItemBorderThickness
• コントロールと項目の CornerRadius のカスタマイズ
• BorderBrush の色のカスタマイズ
• 項目ごとのスタイル設定に使う ItemContainerStyle
• 条件付きテンプレートに使う ItemTemplateSelector
• 条件付きスタイルに使う ItemContainerStyleSelector
• UI スタイル設定に関するベストプラクティス

📄 参照： references/custom-templates.md

• 楕円（ピル）スタイルのテンプレート
• 円形のカラースウォッチスタイルのテンプレート
• 画像とテキストを縦に並べるレイアウトのテンプレート
• 上部インジケーター（タブバー）スタイルのテンプレート
• グラデーション背景のテンプレート

テーマのサポート

📄 参照： references/themes.md

• App.xaml の RequestedTheme（Dark/Light）
• キーを使ったテーマ対応のカスタマイズ
• 完全な制御に使う 12 個のテーマリソースキー
• SyncfusionSegmentedControl* テーマキー
• ライトテーマとダークテーマの例
• ResourceDictionary.ThemeDictionaries の構造

クイックスタートの例

文字列を使った基本的なセグメントコントロール

<Window xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors">
    <Grid>
        <syncfusion:SfSegmentedControl 
            x:Name="segmentedControl"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            SelectedIndex="0">
            <x:String>Day</x:String>
            <x:String>Week</x:String>
            <x:String>Month</x:String>
            <x:String>Year</x:String>
        </syncfusion:SfSegmentedControl>
    </Grid>
</Window>

ビジネスオブジェクトと ViewModel を使う場合

// ViewModel
public class SegmentedViewModel
{
    public ObservableCollection<PeriodModel> Periods { get; set; }
    
    public SegmentedViewModel()
    {
        Periods = new ObservableCollection<PeriodModel>
        {
            new PeriodModel { Name = "Day" },
            new PeriodModel { Name = "Week" },
            new PeriodModel { Name = "Month" },
            new PeriodModel { Name = "Year" }
        };
    }
}

public class PeriodModel
{
    public string Name { get; set; }
}

<syncfusion:SfSegmentedControl 
    ItemsSource="{Binding Periods}"
    DisplayMemberPath="Name"
    SelectedIndex="2"/>

よくあるパターン

1. 表示モード切り替え

<syncfusion:SfSegmentedControl SelectedIndex="0" SelectionChanged="ViewMode_Changed">
    <x:String>List</x:String>
    <x:String>Grid</x:String>
    <x:String>Timeline</x:String>
</syncfusion:SfSegmentedControl>

private void ViewMode_Changed(object sender, SegmentSelectionChangedEventArgs e)
{
    string selectedMode = e.NewValue as string;
    UpdateViewMode(selectedMode);
}

使用する場面： 異なる表示モードやレイアウトを切り替える場合。

2. 選択機能付きフィルターバー

<syncfusion:SfSegmentedControl 
    ItemsSource="{Binding FilterOptions}"
    DisplayMemberPath="Label"
    SelectedIndex="{Binding SelectedFilterIndex, Mode=TwoWay}"/>

使用する場面： 選択状態を表示しながら、カテゴリでデータを絞り込む場合。

3. ItemTemplate を使ったカスタムアイコンのセグメント

<syncfusion:SfSegmentedControl ItemsSource="{Binding Items}">
    <syncfusion:SfSegmentedControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Path Data="{Binding Icon}" Fill="{Binding IconColor}" Width="16" Height="16"/>
                <TextBlock Text="{Binding Name}" Margin="6,0,0,0"/>
            </StackPanel>
        </DataTemplate>
    </syncfusion:SfSegmentedControl.ItemTemplate>
</syncfusion:SfSegmentedControl>

使用する場面： 視覚的な認識を高めるため、アイコンや画像を含むセグメントを使う場合。

4. 使用できないオプションのセグメントを無効化

segmentedControl.SetItemEnabled(2, false); // Disable "Premium" option
segmentedControl.SetItemEnabled(3, false); // Disable "Enterprise" option

使用する場面： ユーザー権限やアプリの状態に応じて、オプションを条件付きで無効にする場合。

5. 影を使ったカスタム選択スタイル

<syncfusion:SfSegmentedControl SelectedIndex="1">
    <syncfusion:SfSegmentedControl.SelectedSegmentStyle>
        <Style TargetType="syncfusion:SelectedSegmentBorder">
            <Setter Property="Background" Value="#6C58EA"/>
            <Setter Property="HasShadow" Value="True"/>
            <Setter Property="ShadowColor" Value="#6C58EA"/>
            <Setter Property="CornerRadius" Value="8"/>
        </Style>
    </syncfusion:SfSegmentedControl.SelectedSegmentStyle>
</syncfusion:SfSegmentedControl>

使用する場面： 選択中のセグメントに視覚的な奥行きとモダンな外観を加える場合。

6. 選択時のアニメーションを無効化

<syncfusion:SfSegmentedControl 
    SelectionAnimationType="None"
    SelectedIndex="0">
    <x:String>Option 1</x:String>
    <x:String>Option 2</x:String>
    <x:String>Option 3</x:String>
</syncfusion:SfSegmentedControl>

使用する場面： スライドアニメーションが遅すぎる、または頻繁な選択の妨げになる場合。

主なプロパティ

プロパティ	型	デフォルト	説明
ItemsSource	IEnumerable	null	セグメントとして表示する項目のコレクションです。
DisplayMemberPath	string	null	ビジネスオブジェクトから表示するプロパティのパスです。
ItemTemplate	DataTemplate	null	各セグメント項目の描画に使うカスタムテンプレートです。
SelectedIndex	int	0	現在選択されているセグメントのインデックス（0 始まり）です。
SelectedItem	object	null	ItemsSource から現在選択されている項目です。
SelectionAnimationType	SegmentSelectionAnimationType	Slide	選択時の遷移に使うアニメーションの種類（Slide または None）です。
SelectedSegmentStyle	Style	Default	選択中のセグメントの枠線に適用するスタイルです（SelectedSegmentBorder が対象です）。
ItemContainerStyle	Style	Default	各 SfSegmentedItem コンテナーに適用するスタイルです。
ItemTemplateSelector	DataTemplateSelector	null	項目テンプレートを条件付きで選択するためのセレクターです。
ItemContainerStyleSelector	StyleSelector	null	項目スタイルを条件付きで選択するためのセレクターです。
BorderThickness	Thickness	1	コントロールの枠線の太さです。
ItemBorderThickness	Thickness	0,0,1,0	セグメント項目間の枠線の太さです。
CornerRadius	CornerRadius	0	コントロールの角の半径です。
BorderBrush	Brush	Default	コントロールの枠線の色です。

主なイベント

イベント	説明
SelectionChanged	選択が変更されたときに発生します。SegmentSelectionChangedEventArgs で NewValue と OldValue を取得できます。

主なメソッド

メソッド	説明
SetItemEnabled(int index, bool isEnabled)	指定したインデックスのセグメント項目を有効または無効にします。

よくある使用例

表示切り替え

• リスト／グリッド／タイムライン表示の切り替え
• カレンダーの表示モード（日／週／月／年）
• 地図の表示タイプ（標準／衛星／ハイブリッド）
• グラフの種類（折れ線／棒／円）

おすすめの方法： 文字列項目、または DisplayMemberPath と SelectionChanged イベントハンドラーを使います。

フィルターバー

• ステータスフィルター（すべて／アクティブ／完了／アーカイブ済み）
• 優先度フィルター（低／中／高／緊急）
• カテゴリフィルター（ドキュメント／画像／動画／音声）
• 期間フィルター（今日／週／月／年）

おすすめの方法： ObservableCollection にバインドし、SelectedIndex には双方向バインディングを使います。

設定の切り替え

• プライバシーレベル（公開／友達／非公開）
• 通知設定（すべて／重要／なし）
• 言語の選択（英語／スペイン語／フランス語）
• テーマの選択（自動／ライト／ダーク）

おすすめの方法： SelectionChanged を使って、アプリの設定をすぐに更新します。

タブ形式のナビゲーション

• コンパクトなセクションナビゲーション（情報／詳細／レビュー）
• フォームのステップ表示（個人情報／住所／支払い）
• プロフィールのタブ（投稿／概要／写真）

おすすめの方法： アイコンにはカスタム ItemTemplate を使い、すぐに切り替えられるようアニメーションを無効にします。

ダッシュボードのコントロール

• 日付範囲セレクター（1D/1W/1M/3M/1Y）
• データソースの切り替え（Local/Cloud/All）
• レポートタイプのセレクター
• 比較モードの切り替え

推奨される方法： 影の効果を有効にし、ダッシュボードのテーマに合ったカスタムカラーを使用します。

実装のヒント

1. 項目数： セグメントは2～7個が最適です。項目がそれ以上になる場合は、スクロールや別のコントロールが必要になることがあります。

2. 選択の処理： すぐに反応させるにはSelectionChangedイベントを使用します。MVVMではSelectedIndexをバインドします。

3. 無効な項目： ItemsSourceの設定後にSetItemEnabled()を使用します。ViewModelにバインドする場合は、Loadedイベント内で呼び出します。

4. カスタムスタイル： 均等な間隔にはItemContainerStyleを設定します。選択時の外観にはSelectedSegmentStyleを使用します。

5. アニメーション： スライドアニメーション（既定）を使用すると、滑らかに遷移します。フォームで選択を即時に切り替えるにはNoneを使用します。

6. キーボード操作： 矢印キーで移動し、Enterキーで選択します。適切なフォーカス移動のためにTabIndexが設定されていることを確認します。

7. テーマのサポート： Resourcesでテーマキーを使用すると、Light/Darkテーマの外観を一貫させることができます。

8. ItemTemplate： アイコン、画像、または複雑なレイアウトに使用します。パフォーマンスを保つため、テンプレートはシンプルにしてください。

9. 境界線のカスタマイズ： セグメントをシームレスにつなげるには、ItemBorderThickness="0"を設定します。外側の境界線にはBorderThicknessを使用します。

10. CornerRadius： 角丸の外観を一貫させるため、コントロールと項目のCornerRadiusを一致させます。

関連ドキュメント

• はじめに： セットアップと基本的な使い方については、references/getting-started.mdを参照してください
• 選択プロパティとイベント： SelectedIndex、SelectedItem、SelectionChanged、およびプログラムによる選択については、references/selection.mdを参照してください
• 選択時のスタイルとキーボード操作： SelectedSegmentStyle、影、アニメーション、キーボードナビゲーション、およびベストプラクティスについては、references/selection-styling.mdを参照してください
• 項目の無効化： 条件に応じたセグメントの無効化については、references/disable-items.mdを参照してください
• UIのカスタマイズ： 境界線、角、セレクター、およびベストプラクティスについては、references/ui-customization.mdを参照してください
• カスタムテンプレート： 楕円、円、画像＋テキスト、上部インジケーター、およびグラデーションのテンプレートについては、references/custom-templates.mdを参照してください
• テーマ： テーマのサポートとカスタマイズキーについては、references/themes.mdを参照してください