Getting Started with Windows Forms CardLayout

17 Nov 20217 minutes to read

This section explains how to add the CardLayout control in a Windows Forms application and overview its basic functionalities.

Assembly deployment

Refer to the Control Dependencies section to get the list of assemblies or details of NuGet package that needs to be added as reference to use the control in any application.

Refer to this documentation to find more details about installing NuGet packages in a Windows Forms application.

Adding the CardLayout control via designer

1) Create a new Windows Forms application in Visual Studio.

2) Add the CardLayout control to an application by dragging it from the toolbox to design view. The following required dependent assembly will be added automatically:

• Syncfusion.Shared.Base

3) To add the form as a container control of CardLayout, click Yes in popup, from which it appears automatically before the CardLayout is added.

Adding layout components

The child controls can be added to layout by dragging it from the toolbox to designer view.

Adding the CardLayout control via code

The CardLayout control can be created programmatically using the following steps:

1) Create a C# or VB application via Visual Studio.

2) Add the following assembly reference to the project:

• Syncfusion.Shared.Base.dll.

3) Include the required namespace.

C#

using Syncfusion.Windows.Forms.Tools;

VB

Imports Syncfusion.Windows.Forms.Tools

4) Create an instance of the CardLayout control, and then set ContainerControl as form.

C#

private Syncfusion.Windows.Forms.Tools.CardLayout cardLayout1;
this.cardLayout1 = new Syncfusion.Windows.Forms.Tools.CardLayout(this.components);
this.components = new System.ComponentModel.Container();
this.cardLayout1.ContainerControl = this;

VB

Private cardLayout1 As Syncfusion.Windows.Forms.Tools.CardLayout
Me.cardLayout1 = New Syncfusion.Windows.Forms.Tools.CardLayout(Me.components)
Me.components = New System.ComponentModel.Container()
Me.cardLayout1.ContainerControl = Me

Adding layout components

The child controls can be added to layout by simply adding it to the form since the form is its container control.

1) Add the main panel to layout by simply adding it to the form since the form is its container control.

C#

//Add main panel
private System.Windows.Forms.Panel cardLayoutPanel;
this.cardLayoutPanel = new System.Windows.Forms.Panel();

//Add properties
this.cardLayoutPanel.BackColor = System.Drawing.Color.White;
this.cardLayoutPanel.Dock = System.Windows.Forms.DockStyle.Fill;
this.cardLayoutPanel.Size = new System.Drawing.Size(800, 450);

//Add to card layout
this.cardLayout1.ContainerControl = cardLayoutPanel;

VB

'Add main panel
Private cardLayoutPanel As System.Windows.Forms.Panel
Me.cardLayoutPanel = New System.Windows.Forms.Panel()

'Add properties
Me.cardLayoutPanel.BackColor = System.Drawing.Color.White
Me.cardLayoutPanel.Dock = System.Windows.Forms.DockStyle.Fill
Me.cardLayoutPanel.Size = New System.Drawing.Size(800, 450)

'Add to card layout
Me.cardLayout1.ContainerControl = cardLayoutPanel

2) Add the child panel to layout by simply adding it to the main panel.

C#

// Create an instance of three panels
private System.Windows.Forms.Panel panel1;
private System.Windows.Forms.Panel panel2;
private System.Windows.Forms.Panel panel3;

this.panel1 = new System.Windows.Forms.Panel();
this.panel2 = new System.Windows.Forms.Panel();
this.panel3 = new System.Windows.Forms.Panel();

//Set the size and image to panel1 
this.cardLayout1.SetPreferredSize(this.panel1, new System.Drawing.Size(586, 232));
this.panel1.BackgroundImage = ((System.Drawing.Image)(resources.GetObject("panel1.BackgroundImage")));

//Set the size and image to panel2
this.panel2.BackgroundImage = ((System.Drawing.Image)(resources.GetObject("panel2.BackgroundImage")));
this.cardLayout1.SetPreferredSize(this.panel2, new System.Drawing.Size(586, 232));

//Set the size and image to panel3
this.panel3.BackgroundImage = ((System.Drawing.Image)(resources.GetObject("panel3.BackgroundImage")));
this.cardLayout1.SetPreferredSize(this.panel3, new System.Drawing.Size(586, 232));

//Add the panels into the main panel
this.cardLayoutPanel.Controls.Add(this.panel1);
this.cardLayoutPanel.Controls.Add(this.panel2);
this.cardLayoutPanel.Controls.Add(this.panel3);

VB

' Create an instance of three panels
Private panel1 As System.Windows.Forms.Panel
Private panel2 As System.Windows.Forms.Panel
Private panel3 As System.Windows.Forms.Panel

Me.panel1 = New System.Windows.Forms.Panel()
Me.panel2 = New System.Windows.Forms.Panel()
Me.panel3 = New System.Windows.Forms.Panel()

'Set the size and image to panel1 
Me.cardLayout1.SetPreferredSize(Me.panel1, New System.Drawing.Size(586, 232))
Me.panel1.BackgroundImage = (CType(resources.GetObject("panel1.BackgroundImage"), System.Drawing.Image))

'Set the size and image to panel2
Me.panel2.BackgroundImage = (CType(resources.GetObject("panel2.BackgroundImage"), System.Drawing.Image))
Me.cardLayout1.SetPreferredSize(Me.panel2, New System.Drawing.Size(586, 232))

'Set the size and image to panel3
Me.panel3.BackgroundImage = (CType(resources.GetObject("panel3.BackgroundImage"), System.Drawing.Image))
Me.cardLayout1.SetPreferredSize(Me.panel3, New System.Drawing.Size(586, 232))

'Add the panels into the main panel
Me.cardLayoutPanel.Controls.Add(Me.panel1)
Me.cardLayoutPanel.Controls.Add(Me.panel2)
Me.cardLayoutPanel.Controls.Add(Me.panel3)

3) Navigate to the next or previous card using the Next and Previous methods. At run time, a particular card can be selected using the SelectedCard property.

C#

//For moving the next card
this.cardLayout1.Next();

//For moving the previous card
this.cardLayout1.Previous();

//For selecting a card
this.cardLayout1.SelectedCard = "image1";

VB

'For moving the next card
Me.cardLayout1.Next()

'For moving the previous card
Me.cardLayout1.Previous()

'For selecting a card
Me.cardLayout1.SelectedCard = "image1"