Loading...
Loading...
Implement Syncfusion WPF CardView for card-based data display with grouping, sorting, filtering, and editing. Use this when implementing card panels, binding data with ItemsSource, or customizing card layouts in WPF. Covers CardViewItem population, GroupCards, CanSort, CanFilter, CanEdit, EditItemTemplate, HeaderTemplate, ItemTemplate, and SfSkinManager theming.
npx skill4agent add syncfusion/wpf-ui-components-skills syncfusion-wpf-card-viewObservableCollectionNote: Grouping, sorting, filtering, and editing requiredata binding. These features do not work with declarativeItemsSourcechildren.CardViewItem
| Class | Namespace | Purpose |
|---|---|---|
| | Container panel for card items |
| | Individual card (declarative use) |
Syncfusion.Shared.WPFSyncfusion.Tools.WPFxmlns:syncfusion="http://schemas.syncfusion.com/wpf"CardViewItemItemsSourceSelectedItemIsSelectedSelectedItemChangedOrientationObservableCollectionHeaderTemplateItemTemplateEditItemTemplateItemContainerStyleItemContainerStyleSelectorFlowDirectionCanGroupGroupCards(string)ShowHeaderCanSortCanFilterShowHeaderCanEditfalseEditItemTemplateBeginEdit()EndEdit()CurrentUICulture<!-- 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>// 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 },
};
}
}| Scenario | Properties / Methods |
|---|---|
| Enable all interactive modes | |
| Programmatic group by field | |
| Programmatic edit control | |
| Hide group/sort/filter header | |
| RTL layout | |
| React to selection | Handle |
| Apply theme | |
| Property | Type | Default | Description |
|---|---|---|---|
| | | Data collection to bind |
| | | Currently selected card |
| | | Card layout direction |
| | | Enable drag-drop grouping |
| | | Enable field click sorting |
| | | Enable inline editing |
| | | Show/hide group/sort/filter header |
| | — | Card header display template |
| | — | Card body in view mode |
| | — | Card body in edit mode |
| | — | Style applied to each card container |