syncfusion-winforms-card-layout

Q: How do I install syncfusion-winforms-card-layout?

Run npx skills add https://github.com/syncfusion/winforms-ui-components-skills --skill syncfusion-winforms-card-layout in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-winforms-card-layout/ (personal) or .claude/skills/syncfusion-winforms-card-layout/ (project).

by syncfusionFrontend & Design

Implement stack-based card layout management in Windows Forms applications using Syncfusion CardLayout to organize controls as visible cards, navigate between cards, and configure layout modes for wizard controls and property pages.

Installs: 77
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/winforms-ui-components-skills --skill syncfusion-winforms-card-layout

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-winforms-card-layout automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing CardLayout in Windows Forms

When to Use This Skill

Use this skill when you need to:

Create a stack-based card layout that displays one card (control) at a time
Build wizard-style interfaces with sequential card navigation
Implement property pages with card switching
Organize multiple panels or controls as cards within a container
Navigate programmatically between different views or screens

Component Overview

CardLayout is a layout manager that organizes controls in a stack-of-cards appearance. Each control added to the layout becomes a "card," and only one card is visible at a time. The container acts as a stack of cards, with the first component added being initially visible. Cards can be configured with custom names, images, and sizing behavior.

Key Capabilities:

Set unique names for each card
Navigate between cards (First, Next, Previous, Last)
Configure layout modes (Default or Fill)
Maintain aspect ratio for child controls
Get/set selected card by name or index

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Assembly and NuGet package installation
Adding CardLayout via designer or code
Creating and configuring container panel
Adding child controls as cards
Basic card navigation with Next/Previous methods

Configuring CardLayout

📄 Read: references/configuring-cardlayout.md

Setting custom card names with SetCardName
Getting card names and components
Working with card indices (NextCardIndex, PreviousCardIndex)
Aspect ratio maintenance (MaintainAspectRatio)
Layout modes: Default vs Fill
Setting preferred and minimum sizes

Card Navigation

📄 Read: references/card-navigation.md

Selecting cards by name using SelectedCard property
Navigation methods: First(), Next(), Previous(), Last()
Using SmartTag in designer for card selection
Code-based navigation with buttons
ComboBox integration for card selection
Runtime card switching

Child Controls Configuration

📄 Read: references/child-controls.md

Adding child controls as cards to the layout
Image settings for cards
PreferredSize and MinimumSize configuration
Container and child control setup
Styling child controls

Quick Start Example

using Syncfusion.Windows.Forms.Tools;
using System.Windows.Forms;

public class CardLayoutForm : Form
{
    private CardLayout cardLayout1;
    private Panel cardLayoutPanel;
    private Panel card1;
    private Panel card2;

    public CardLayoutForm()
    {
        // Initialize CardLayout
        cardLayout1 = new CardLayout();
        cardLayoutPanel = new Panel();
        cardLayoutPanel.BackColor = Color.White;
        cardLayoutPanel.Dock = DockStyle.Fill;

        // Set container
        cardLayout1.ContainerControl = cardLayoutPanel;

        // Create cards (panels)
        card1 = new Panel();
        card1.BackColor = Color.LightBlue;
        card1.Controls.Add(new Label { Text = "Card 1", AutoSize = true });

        card2 = new Panel();
        card2.BackColor = Color.LightGreen;
        card2.Controls.Add(new Label { Text = "Card 2", AutoSize = true });

        // Add cards to the main panel
        cardLayoutPanel.Controls.Add(card1);
        cardLayoutPanel.Controls.Add(card2);

        // Set card names
        cardLayout1.SetCardName(card1, "FirstCard");
        cardLayout1.SetCardName(card2, "SecondCard");

        // Navigate between cards
        cardLayout1.SelectedCard = "FirstCard";
        cardLayout1.Next(); // Display SecondCard

        // Add to form
        this.Controls.Add(cardLayoutPanel);
    }
}

Common Patterns

Pattern 1: Wizard Interface

Create sequential steps where users navigate forward/backward through cards:

private void NextButton_Click(object sender, EventArgs e)
{
    this.cardLayout1.Next();
}

private void PreviousButton_Click(object sender, EventArgs e)
{
    this.cardLayout1.Previous();
}

Pattern 2: Dropdown Card Selection

Allow users to select cards from a dropdown list:

private void CardSelectionComboBox_SelectedIndexChanged(object sender, EventArgs e)
{
    string selectedCardName = CardSelectionComboBox.SelectedItem.ToString();
    this.cardLayout1.SelectedCard = selectedCardName;
}

Pattern 3: Fill Container

Make cards stretch to fill the entire container:

this.cardLayout1.LayoutMode = CardLayoutMode.Fill;

Key Properties

Property	Type	Description
`SelectedCard`	string	Gets/sets the current visible card by name
`LayoutMode`	CardLayoutMode	Gets/sets layout mode (Default or Fill)
`NextCardIndex`	int	Returns the index of the next card
`PreviousCardIndex`	int	Returns the index of the previous card
`ContainerControl`	Control	Gets/sets the container for the layout

Key Methods

Method	Purpose
`First()`	Display the first card
`Next()`	Display the next card
`Previous()`	Display the previous card
`Last()`	Display the last card
`SetCardName(Control, string)`	Assign a custom name to a card
`GetCardName(Control)`	Get the name of a card
`GetCardNames()`	Get all card names as array
`GetComponentFromName(string)`	Get control by card name
`SetMaintainAspectRatio(Control, bool)`	Configure aspect ratio maintenance

FAQ

What does the syncfusion-winforms-card-layout skill do?

How do I install syncfusion-winforms-card-layout?

Run npx skills add https://github.com/syncfusion/winforms-ui-components-skills --skill syncfusion-winforms-card-layout in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-winforms-card-layout/ (personal) or .claude/skills/syncfusion-winforms-card-layout/ (project).

Which AI agents can use syncfusion-winforms-card-layout?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-winforms-card-layout safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-winforms-card-layout?

It is published by syncfusion in syncfusion/winforms-ui-components-skills. It has 77 recorded installs.