We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to configure the CardLayout control?

Platform: WinForms |
Control: CardLayout

CardLayout is Layout container type of control that helps to arrange controls in stack order and one control will be visible at the time. These below two ways are used to configure the controls added in CardLayout.


  1. Through Designer
  2. Through Code


Through Designer


Step 1: Add the CardLayout Control on Form.


Drag and drop the CardLayout Control on Form. Please refer the below Screenshot.



Alert to add CardLayout to form


Step 2: Add Controls on Form 


Drag and drop the required controls in Form. If Form contains CardLayout Manager, dragged control will be directly added as Card.  


Please refer the below Screenshot 




Showing Radial Gauge added to Card Layout


Figure 1: Radial Gauge is added as Card1


Step 3: Set the CardName.


Need to set the Card Name based on requirement. Please refer the below Screenshot.




Showing set card name of Radial Gauge


Through Code

Need to follow the below step for CardLayout configuration Through Code.


Step 1: Need to add required Controls on Form.


Please make use of the below Code snippet.



//Initialize the TreeNavigator control
Syncfusion.Windows.Forms.Tools.TreeNavigator.HeaderCollection headerCollection1 = new Syncfusion.Windows.Forms.Tools.TreeNavigator.HeaderCollection();
this.treeNavigator1 = new Syncfusion.Windows.Forms.Tools.TreeNavigator();
//Initialize the TreeViewAdv control
Syncfusion.Windows.Forms.Tools.TreeNodeAdvStyleInfo treeNodeAdvStyleInfo1 = new Syncfusion.Windows.Forms.Tools.TreeNodeAdvStyleInfo();
this.treeViewAdv1 = new Syncfusion.Windows.Forms.Tools.TreeViewAdv();
//Initialize the XPTaskBar Control 
this.xpTaskBar1 = new Syncfusion.Windows.Forms.Tools.XPTaskBar();
//Initialize the GroupBar Control
this.groupBar1 = new Syncfusion.Windows.Forms.Tools.GroupBar();



''' <summary>
''' Initialize the TreeNavigator Control
''' </summary>
Dim headerCollection2 As New Syncfusion.Windows.Forms.Tools.TreeNavigator.HeaderCollection()
Me.treeNavigator1 = New Syncfusion.Windows.Forms.Tools.TreeNavigator()
''' <summary>
''' Initialize the TreeViewAdv Control
''' </summary>
Dim treeNodeAdvStyleInfo2 As New Syncfusion.Windows.Forms.Tools.TreeNodeAdvStyleInfo()
Me.treeViewAdv1 = New Syncfusion.Windows.Forms.Tools.TreeViewAdv()
DirectCast(Me.treeViewAdv1, System.ComponentModel.ISupportInitialize).BeginInit()
''' <summary>
''' Initialize the XPTaskBar Control
''' </summary>
Me.xpTaskBar1 = New Syncfusion.Windows.Forms.Tools.XPTaskBar()
DirectCast(Me.xpTaskBar1, System.ComponentModel.ISupportInitialize).BeginInit()
''' <summary>
''' Initialize the GroupBar Control
''' </summary>
Me.groupBar1 = New Syncfusion.Windows.Forms.Tools.GroupBar()
DirectCast(Me.groupBar1, System.ComponentModel.ISupportInitialize).BeginInit()


Step 2: Integrate into CardLayout control by assigning Card name.


Need to set the Card Name based on requirement. Please refer the below Code snippet.



//Add the TreeNavigator Control to CardLayout.
this.cardLayout1.SetCardName(this.treeNavigator1, "TreeNavigator");
//Add the TreeViewAdv Control to CardLayout.
this.cardLayout1.SetCardName(this.treeViewAdv1, "TreeView");
//Add the XPTaskBar Control to CardLayout.
this.cardLayout1.SetCardName(this.xpTaskBar1, "XPTaskBar");
//Add the GroupBar Control to CardLayout.
this.cardLayout1.SetCardName(this.groupBar1, "GroupBar");



‘Add the TreeNavigator Control to CardLayout
Me.cardLayout1.SetCardName(Me.treeNavigator1, "TreeNavigator")
‘Add the TreeViewAdv Control to CardLayout
Me.cardLayout1.SetCardName(Me.treeViewAdv1, "TreeView")
‘Add the XPTaskBar Control to CardLayout
Me.cardLayout1.SetCardName(Me.xpTaskBar1, "XPTaskBar")
‘Add the GroupBar Control to CardLayout
Me.cardLayout1.SetCardName(Me.groupBar1, "GroupBar")



C#: CardLayoutExample


VB:  CardLayoutExample

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile