Syncfusion Winforms Card Layout

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

Key Methods