)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to configure the CardLayout control?

Platform: WinForms |
Control: CardLayout |
Published Date: November 15, 2017 |
Last Revised Date: May 22, 2019

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.

 

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 

 

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.

 

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.

 

C#

//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();
 
this.Controls.Add(this.treeNavigator1);
 
//Initialize the TreeViewAdv control
 
Syncfusion.Windows.Forms.Tools.TreeNodeAdvStyleInfo treeNodeAdvStyleInfo1 = new Syncfusion.Windows.Forms.Tools.TreeNodeAdvStyleInfo();
 
this.treeViewAdv1 = new Syncfusion.Windows.Forms.Tools.TreeViewAdv();
 
this.Controls.Add(this.treeViewAdv1);
 
//Initialize the XPTaskBar Control 
 
this.xpTaskBar1 = new Syncfusion.Windows.Forms.Tools.XPTaskBar();
 
((System.ComponentModel.ISupportInitialize)(this.xpTaskBar1)).BeginInit();
 
this.Controls.Add(this.xpTaskBar1);
           
//Initialize the GroupBar Control
 
this.groupBar1 = new Syncfusion.Windows.Forms.Tools.GroupBar();
 
((System.ComponentModel.ISupportInitialize)(this.groupBar1)).BeginInit();
 
this.Controls.Add(this.groupBar1);
 
 

 

VB

''' <summary>
''' Initialize the TreeNavigator Control
''' </summary>
Dim headerCollection2 As New Syncfusion.Windows.Forms.Tools.TreeNavigator.HeaderCollection()
Me.treeNavigator1 = New Syncfusion.Windows.Forms.Tools.TreeNavigator()
 
Me.Controls.Add(Me.treeNavigator1)
 
 
''' <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()
Me.Controls.Add(Me.treeViewAdv1)
 
''' <summary>
''' Initialize the XPTaskBar Control
''' </summary>
Me.xpTaskBar1 = New Syncfusion.Windows.Forms.Tools.XPTaskBar()
DirectCast(Me.xpTaskBar1, System.ComponentModel.ISupportInitialize).BeginInit()
 
Me.Controls.Add(Me.xpTaskBar1)
 
''' <summary>
''' Initialize the GroupBar Control
''' </summary>
Me.groupBar1 = New Syncfusion.Windows.Forms.Tools.GroupBar()
DirectCast(Me.groupBar1, System.ComponentModel.ISupportInitialize).BeginInit()
 
Me.Controls.Add(Me.groupBar1)      
 
 

 

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.

 

C#

//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");
 

 

VB

‘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")

 

Sample:

C#: CardLayoutExample

 

VB:  CardLayoutExample

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
ADD COMMENT
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
Live Chat Icon