syncfusion-wpf-card-view

实现 CardView（WPF）

一种面板控件，可将项组织为可视化卡片，并内置分组、排序、筛选和内联编辑功能。

何时使用此技能

当用户需要执行以下操作时，请使用此技能：

• 在 WPF 应用程序中将数据项集合显示为卡片
• 启用卡片项的分组、排序或筛选
• 为卡片项添加内联编辑功能（F2 / 双击）
• 通过模板自定义卡片标题、正文或编辑界面
• 将卡片项绑定到 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() 以编程方式控制
• 自定义编辑界面样式

本地化

📄 阅读： 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	—	应用于每个卡片容器的样式