syncfusion-wpf-card-view

CardView（WPF）の実装

組み込みのグループ化、並べ替え、フィルタリング、インライン編集機能を備え、項目を視覚的なカードとして整理するパネルコントロールです。

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

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

• WPF アプリケーションでデータ項目のコレクションをカードとして表示する
• カード項目のグループ化、並べ替え、フィルタリングを有効にする
• カード項目にインライン編集を追加する（F2／ダブルクリック）
• テンプレートを使用してカードのヘッダー、本文、編集 UI をカスタマイズする
• カード項目を ObservableCollection にバインドする（MVVM）
• テーマを適用する、または CardView の文字列をローカライズする

注: グループ化、並べ替え、フィルタリング、編集には、ItemsSource データバインディングが必要です。これらの機能は、宣言的な CardViewItem の子要素では動作しません。

---

コンポーネントの概要

クラス	名前空間	用途
CardView	Syncfusion.Windows.Tools.Controls	カード項目用のコンテナパネル
CardViewItem	Syncfusion.Windows.Tools.Controls	個々のカード（宣言的な使用）

必要なアセンブリ: Syncfusion.Shared.WPF + Syncfusion.Tools.WPF

XAML 名前空間:

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

---

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

はじめに

📄 参照: references/getting-started.md

• アセンブリと名前空間の設定
• デザイナー、XAML、または C# で CardView を追加する
• 宣言的な CardViewItem の使用方法
• ItemsSource データバインディングの使用方法
• SelectedItem、IsSelected、SelectedItemChanged
• Orientation（Horizontal／Vertical）
• SfSkinManager のテーマ設定

データバインディングとテンプレート

📄 参照: references/data-binding-and-templates.md

• Model + ViewModel + ObservableCollection の完全なパターン
• HeaderTemplate — カードヘッダーの表示
• ItemTemplate — 表示モードでのカード本文
• EditItemTemplate — 編集モードでのカード本文
• ItemContainerStyle と ItemContainerStyleSelector
• RTL レイアウト用の FlowDirection
• SfSkinManager のビジュアルスタイルのリファレンス

グループ化

📄 参照: references/grouping.md

• CanGroup の有効化／無効化
• フィールドをグループヘッダーにドラッグ＆ドロップする
• GroupCards(string) によるプログラムでのグループ化
• 入れ子／複数レベルのグループ化
• ShowHeader でグループ化領域を非表示にする

並べ替えとフィルタリング

📄 参照: references/sorting-and-filtering.md

• CanSort の有効化／無効化。フィールド名をクリックして並べ替え順序を切り替える
• ドロップ領域を使用して、グループ化された項目を並べ替える
• ポップアップからフィールド値を選択してフィルタリングする（ShowHeader="True" の場合に有効）
• フィルターのクリアボタンの動作
• ShowHeader で並べ替え／フィルタリングのヘッダーを非表示にする

編集

📄 参照: references/editing.md

• CanEdit の有効化／無効化（既定値は false）
• F2／ダブルクリックで編集モードに入り、Esc／Enter で終了する
• EditItemTemplate の要件とパターン
• BeginEdit()／EndEdit() によるプログラムでの制御
• 編集 UI のカスタムスタイル設定

ローカライズ

📄 参照: references/localization.md

• CurrentUICulture の設定
• リソースファイルの命名規則
• Name/Value ペアの設定
• フランス語カルチャーの例

---

クイックスタートの例

データバインディングとグループ化／並べ替えを備えた最小構成の CardView:

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <syncfusion:CardView ItemsSource="{Binding CardViewItems}"
                         CanGroup="True"
                         CanSort="True"
                         Name="cardView">
        <syncfusion:CardView.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding FirstName}"/>
            </DataTemplate>
        </syncfusion:CardView.HeaderTemplate>
        <syncfusion:CardView.ItemTemplate>
            <DataTemplate>
                <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                    <ListBoxItem>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Name: " FontWeight="Bold"/>
                            <TextBlock Text="{Binding FirstName}"/>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Age: " FontWeight="Bold"/>
                            <TextBlock Text="{Binding Age}"/>
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </DataTemplate>
        </syncfusion:CardView.ItemTemplate>
    </syncfusion:CardView>
</Window>

// ViewModel.cs
public class ViewModel : NotificationObject
{
    private ObservableCollection<Person> _items;
    public ObservableCollection<Person> CardViewItems
    {
        get => _items;
        set { _items = value; RaisePropertyChanged(nameof(CardViewItems)); }
    }
    public ViewModel()
    {
        CardViewItems = new ObservableCollection<Person>
        {
            new Person { FirstName = "Alice", LastName = "Smith", Age = 30 },
            new Person { FirstName = "Bob",   LastName = "Jones", Age = 25 },
            new Person { FirstName = "Carol", LastName = "Smith", Age = 28 },
        };
    }
}

---

一般的なパターン

シナリオ	プロパティ／メソッド
すべてのインタラクティブモードを有効にする	CanGroup="True" CanSort="True" CanEdit="True"
フィールドでプログラムからグループ化する	cardView.GroupCards("LastName")
プログラムで編集を制御する	cardView.BeginEdit() / cardView.EndEdit()
グループ化／並べ替え／フィルタリングのヘッダーを非表示にする	ShowHeader="False"
RTL レイアウト	FlowDirection="RightToLeft"
選択に応じて処理する	SelectedItemChanged イベントを処理する
テーマを適用する	SfSkinManager.SetVisualStyle(cardView, VisualStyles.FluentLight)

---

主なプロパティ

プロパティ	型	デフォルト	説明
ItemsSource	IEnumerable	null	バインドするデータコレクション
SelectedItem	object	null	現在選択されているカード
Orientation	Orientation	Horizontal	カードのレイアウト方向
CanGroup	bool	false	ドラッグ＆ドロップによるグループ化を有効にします
CanSort	bool	true	フィールドのクリックによる並べ替えを有効にします
CanEdit	bool	false	インライン編集を有効にします
ShowHeader	bool	true	グループ化／並べ替え／フィルターのヘッダーを表示または非表示にします
HeaderTemplate	DataTemplate	—	カードヘッダーの表示テンプレート
ItemTemplate	DataTemplate	—	表示モードでのカード本文
EditItemTemplate	DataTemplate	—	編集モードでのカード本文
ItemContainerStyle	Style	—	各カードコンテナーに適用するスタイル