syncfusion-winforms-card-layout

在 Windows Forms 中实现 CardLayout

何时使用此技能

需要执行以下操作时，请使用此技能：

• 创建基于卡片堆栈的布局，一次显示一张卡片（控件）
• 构建可按顺序导航卡片的向导式界面
• 实现可切换卡片的属性页
• 在容器中将多个面板或控件组织为卡片
• 以编程方式在不同视图或屏幕之间导航

组件概述

CardLayout 是一种布局管理器，可将控件组织成卡片堆栈的外观。添加到布局中的每个控件都会成为一张“卡片”，并且一次只能显示一张卡片。容器充当卡片堆栈，最先添加的组件初始可见。可以为卡片配置自定义名称、图像和大小行为。

主要功能：

• 为每张卡片设置唯一名称
• 在卡片之间导航（First、Next、Previous、Last）
• 配置布局模式（Default 或 Fill）
• 保持子控件的纵横比
• 按名称或索引获取/设置选中的卡片

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 程序集和 NuGet 包安装
• 通过设计器或代码添加 CardLayout
• 创建和配置容器面板
• 将子控件添加为卡片
• 使用 Next/Previous 方法进行基本卡片导航

配置 CardLayout

📄 阅读： references/configuring-cardlayout.md

• 使用 SetCardName 设置自定义卡片名称
• 获取卡片名称和组件
• 使用卡片索引（NextCardIndex、PreviousCardIndex）
• 保持纵横比（MaintainAspectRatio）
• 布局模式：Default 与 Fill
• 设置首选大小和最小大小

卡片导航

📄 阅读： references/card-navigation.md

• 使用 SelectedCard 属性按名称选择卡片
• 导航方法：First()、Next()、Previous()、Last()
• 使用设计器中的 SmartTag 选择卡片
• 使用按钮通过代码进行导航
• 集成 ComboBox 以选择卡片
• 在运行时切换卡片

子控件配置

📄 阅读： references/child-controls.md

• 将子控件添加为布局中的卡片
• 卡片的图像设置
• PreferredSize 和 MinimumSize 配置
• 容器与子控件设置
• 设置子控件样式

快速入门示例

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);
    }
}

常见模式

模式 1：向导界面

创建一系列步骤，让用户通过卡片向前或向后导航：

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

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

模式 2：下拉列表选择卡片

允许用户从下拉列表中选择卡片：

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

模式 3：填充容器

让卡片扩展以填满整个容器：

this.cardLayout1.LayoutMode = CardLayoutMode.Fill;

主要属性

属性	类型	描述
SelectedCard	string	按名称获取/设置当前可见的卡片
LayoutMode	CardLayoutMode	获取/设置布局模式（Default 或 Fill）
NextCardIndex	int	返回下一张卡片的索引
PreviousCardIndex	int	返回上一张卡片的索引
ContainerControl	Control	获取/设置布局的容器

主要方法

方法	用途
First()	显示第一张卡片
Next()	显示下一张卡片
Previous()	显示上一张卡片
Last()	显示最后一张卡片
SetCardName(Control, string)	为卡片指定自定义名称
GetCardName(Control)	获取卡片名称
GetCardNames()	以数组形式获取所有卡片名称
GetComponentFromName(string)	按卡片名称获取控件
SetMaintainAspectRatio(Control, bool)	配置是否保持纵横比