syncfusion-wpf-card-view

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing CardView (WPF)

实现CardView（WPF）

A panel control that organizes items as visual cards with built-in grouping, sorting, filtering, and inline editing.

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

When to Use This Skill

适用场景

Use this skill when the user needs to:

Display a collection of data items as cards in a WPF application
Enable grouping, sorting, or filtering of card items
Add inline editing to card items (F2 / double-click)
Customize card header, body, or edit UI via templates
Bind card items to an
```
ObservableCollection
```
(MVVM)
Apply themes or localize CardView strings

Note: Grouping, sorting, filtering, and editing require
ItemsSource
data binding. These features do not work with declarative
CardViewItem
children.

当用户需要以下功能时，可使用本技能：

在WPF应用中将数据项集合以卡片形式展示
启用卡片项的分组、排序或筛选功能
为卡片项添加内联编辑（按F2键/双击）
通过模板自定义卡片的页眉、正文或编辑界面
将卡片项绑定到
```
ObservableCollection
```
（MVVM模式）
应用主题或本地化CardView字符串

注意： 分组、排序、筛选和编辑功能需要通过
ItemsSource
绑定数据。这些功能不支持声明式的
CardViewItem
子元素。

Component Overview

组件概述

Class	Namespace	Purpose
`CardView`	`Syncfusion.Windows.Tools.Controls`	Container panel for card items
`CardViewItem`	`Syncfusion.Windows.Tools.Controls`	Individual card (declarative use)

Required Assemblies:

Syncfusion.Shared.WPF

Syncfusion.Tools.WPF

XAML Namespace:

xml

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

类	命名空间	用途
`CardView`	`Syncfusion.Windows.Tools.Controls`	卡片项的容器面板
`CardViewItem`	`Syncfusion.Windows.Tools.Controls`	单个卡片（声明式使用）

所需程序集：

Syncfusion.Shared.WPF

Syncfusion.Tools.WPF

XAML命名空间：

xml

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

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Assembly and namespace setup
Add CardView via designer, XAML, or C#
Declarative
```
CardViewItem
```
approach
```
ItemsSource
```
data binding approach

SelectedItem

IsSelected

SelectedItemChanged

```
Orientation
```
(Horizontal / Vertical)
SfSkinManager theme setup

📄 阅读： references/getting-started.md

程序集和命名空间设置
通过设计器、XAML或C#添加CardView
声明式
```
CardViewItem
```
实现方式
```
ItemsSource
```
数据绑定实现方式

SelectedItem

、

IsSelected

、

SelectedItemChanged

事件

```
Orientation
```
（水平/垂直）布局
SfSkinManager主题设置

Data Binding & Templates

数据绑定与模板

📄 Read: references/data-binding-and-templates.md

Full Model + ViewModel +
```
ObservableCollection
```
pattern
```
HeaderTemplate
```
— card header display
```
ItemTemplate
```
— card body in view mode
```
EditItemTemplate
```
— card body in edit mode

ItemContainerStyle

and

ItemContainerStyleSelector

```
FlowDirection
```
for RTL layouts
SfSkinManager visual styles reference

📄 阅读： references/data-binding-and-templates.md

完整的Model + ViewModel +
```
ObservableCollection
```
模式
```
HeaderTemplate
```
—— 卡片页眉展示模板
```
ItemTemplate
```
—— 卡片正文的查看模式模板
```
EditItemTemplate
```
—— 卡片正文的编辑模式模板

ItemContainerStyle

和

ItemContainerStyleSelector

样式设置

用于RTL布局的
```
FlowDirection
```
属性
SfSkinManager视觉样式参考

Grouping

分组功能

📄 Read: references/grouping.md

```
CanGroup
```
enable/disable
Drag-drop fields to group header
```
GroupCards(string)
```
programmatic grouping
Nested / multi-level grouping
```
ShowHeader
```
to hide the grouping region

📄 阅读： references/grouping.md

```
CanGroup
```
属性启用/禁用分组
拖拽字段到分组页眉进行分组
```
GroupCards(string)
```
编程式分组方法
嵌套/多级分组
```
ShowHeader
```
属性隐藏分组区域

Sorting & Filtering

排序与筛选

📄 Read: references/sorting-and-filtering.md

```
CanSort
```
enable/disable; click field name to cycle sort order
Sorting grouped items via drop region
```
CanFilter
```
enable/disable; popup-based field value filter
Clear Filter button behavior
```
ShowHeader
```
to hide sorting/filtering header

📄 阅读： references/sorting-and-filtering.md

```
CanSort
```
属性启用/禁用排序；点击字段名切换排序顺序
通过拖拽区域对分组项进行排序
```
CanFilter
```
属性启用/禁用筛选；基于弹出框的字段值筛选
清除筛选按钮的行为
```
ShowHeader
```
属性隐藏排序/筛选页眉

Editing

编辑功能

📄 Read: references/editing.md

```
CanEdit
```
enable/disable (default
```
false
```
)
F2 / double-click to enter edit mode; Esc/Enter to exit
```
EditItemTemplate
```
requirement and pattern
```
BeginEdit()
```
/
```
EndEdit()
```
programmatic control
Custom edit UI styling

📄 阅读： references/editing.md

```
CanEdit
```
属性启用/禁用编辑（默认值
```
false
```
）
按F2键/双击进入编辑模式；按Esc/Enter键退出
```
EditItemTemplate
```
模板的要求与实现模式
```
BeginEdit()
```
/
```
EndEdit()
```
编程式编辑控制
自定义编辑界面样式

Localization

本地化

📄 Read: references/localization.md

```
CurrentUICulture
```
setup
Resource file naming convention
Name/Value pair configuration
French culture example

📄 阅读： references/localization.md

```
CurrentUICulture
```
设置
资源文件命名规范
键值对配置
法语区域设置示例

Quick Start Example

快速入门示例

Minimal CardView with data binding and grouping/sorting:

xml

<!-- MainWindow.xaml -->
<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>

csharp

// 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 },
        };
    }
}

具备数据绑定和分组/排序功能的极简CardView：

xml

<!-- MainWindow.xaml -->
<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>

csharp

// 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 },
        };
    }
}

Common Patterns

常见模式

Scenario	Properties / Methods
Enable all interactive modes	`CanGroup="True" CanSort="True" CanFilter="True" CanEdit="True"`
Programmatic group by field	`cardView.GroupCards("LastName")`
Programmatic edit control	`cardView.BeginEdit()` / `cardView.EndEdit()`
Hide group/sort/filter header	`ShowHeader="False"`
RTL layout	`FlowDirection="RightToLeft"`
React to selection	Handle `SelectedItemChanged` event
Apply theme	`SfSkinManager.SetVisualStyle(cardView, VisualStyles.FluentLight)`

场景	属性/方法
启用所有交互模式	`CanGroup="True" CanSort="True" CanFilter="True" CanEdit="True"`
编程式按字段分组	`cardView.GroupCards("LastName")`
编程式控制编辑	`cardView.BeginEdit()` / `cardView.EndEdit()`
隐藏分组/排序/筛选页眉	`ShowHeader="False"`
RTL布局	`FlowDirection="RightToLeft"`
响应选择事件	处理 `SelectedItemChanged` 事件
应用主题	`SfSkinManager.SetVisualStyle(cardView, VisualStyles.FluentLight)`

Key Properties

关键属性

Property	Type	Default	Description
`ItemsSource`	`IEnumerable`	`null`	Data collection to bind
`SelectedItem`	`object`	`null`	Currently selected card
`Orientation`	`Orientation`	`Horizontal`	Card layout direction
`CanGroup`	`bool`	`false`	Enable drag-drop grouping
`CanSort`	`bool`	`true`	Enable field click sorting
`CanEdit`	`bool`	`false`	Enable inline editing
`ShowHeader`	`bool`	`true`	Show/hide group/sort/filter header
`HeaderTemplate`	`DataTemplate`	—	Card header display template
`ItemTemplate`	`DataTemplate`	—	Card body in view mode
`EditItemTemplate`	`DataTemplate`	—	Card body in edit mode
`ItemContainerStyle`	`Style`	—	Style applied to each card container

属性	类型	默认值	描述
`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`	—	应用于每个卡片容器的样式