Articles in this section
Category / Section

How to configure the CardLayout control?

6 mins read

WinForms Card Layout 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 in WinForms Card Layout


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 in WinForms


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 in WinForms Card Layout


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

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment