Loading...
Loading...
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.
npx skill4agent add syncfusion/winforms-ui-components-skills syncfusion-winforms-card-layoutCardLayoutusing 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);
}
}private void NextButton_Click(object sender, EventArgs e)
{
this.cardLayout1.Next();
}
private void PreviousButton_Click(object sender, EventArgs e)
{
this.cardLayout1.Previous();
}private void CardSelectionComboBox_SelectedIndexChanged(object sender, EventArgs e)
{
string selectedCardName = CardSelectionComboBox.SelectedItem.ToString();
this.cardLayout1.SelectedCard = selectedCardName;
}this.cardLayout1.LayoutMode = CardLayoutMode.Fill;| Property | Type | Description |
|---|---|---|
| string | Gets/sets the current visible card by name |
| CardLayoutMode | Gets/sets layout mode (Default or Fill) |
| int | Returns the index of the next card |
| int | Returns the index of the previous card |
| Control | Gets/sets the container for the layout |
| Method | Purpose |
|---|---|
| Display the first card |
| Display the next card |
| Display the previous card |
| Display the last card |
| Assign a custom name to a card |
| Get the name of a card |
| Get all card names as array |
| Get control by card name |
| Configure aspect ratio maintenance |