Advice on which controls to use

Question

I'm going to create a WinForms desktop application where I want to use a tree view on the left and some kind of panel on the right.

Every node in the tree should open a specific panel with input text, select, radio and checkbox controls and a submit button.

Which SyncFusion controls can I use best?

I was thinking about using the TreeViewAdv for the tree view. But what is the best control to use for the panels? The panels need to act like tab panels and only one panel is visible (on top) at a time.

And what container should I use?

Thanks in advance for any advice.

Mallika Kannan · Answer

Hi Paul

Thank you for contacting Syncfusion support.

Please find the details in below,

Query

Response

I'm going to create a WinForms desktop application where I want to use a tree view on the left and some kind of panel on the right.

Every node in the tree should open a specific panel with input text, select, radio and checkbox controls and a submit button.

Which SyncFusion controls can I use best?

I was thinking about using the TreeViewAdv for the tree view.

Yes, we confirm TreeViewAdv Control that will achieve this reported behavior

But what is the best control to use for the panels? The panels need to act like tab panels and only one panel is visible (on top) at a time.

And what container should I use?

We have checked this reported behavior, We have achieved your reported requirement using the CardLayout Control.

Please find the code example.

Code Example [C#]

//Set the card Name

this.cardLayout1.SetCardName(this.treeNavigator1, "TreeNavigator");

this.cardLayout1.SetCardName(this.treeView1, "TreeView");

this.cardLayout1.SetCardName(this.hubTile1, "HubTile");

this.cardLayout1.SetCardName(this.radialGauge1, "RadialGauge");

this.cardLayout1.SetCardName(this.groupBar1, "GroupBar");

//Dispaly the Selected Card as Top

this.treeViewAdv1.NodeMouseDoubleClick += new Syncfusion.Windows.Forms.Tools.TreeNodeAdvMouseClickArgs(treeViewAdv1_NodeMouseDoubleClick);

void treeViewAdv1_NodeMouseDoubleClick(object sender, Syncfusion.Windows.Forms.Tools.TreeViewAdvMouseClickEventArgs e)

{

if (this.treeViewAdv1.SelectedNode.Text == "TreeNavigator")

{

this.cardLayout1.SelectedCard = "TreeNavigator";

}

else if (this.treeViewAdv1.SelectedNode.Text == "TreeViewAdv")

{

this.cardLayout1.SelectedCard = "TreeView";

}

else if (this.treeViewAdv1.SelectedNode.Text == "HubTile")

{

this.cardLayout1.SelectedCard = "HubTile";

}

else if (this.treeViewAdv1.SelectedNode.Text == "Radialgauge")

{

this.cardLayout1.SelectedCard = "RadialGauge";

}

else if (this.treeViewAdv1.SelectedNode.Text == "GroupBar")

{

this.cardLayout1.SelectedCard = "GroupBar";

}

Screenshot

We have also prepared the sample for your reference. It can be downloaded from the below link,

Sample: https://www.syncfusion.com/downloads/support/forum/133666/ze/CardView-194398955.zip

Please refer to the below documentation will guide in requested use case

UG Link: https://help.syncfusion.com/windowsforms/layoutmanagers/cardlayout

Kindly check the above solution and let us know if it is helpful.

Regards,

Mallika

Paul Meems · Answer

Thanks Mallika,I'm glad I asked because I would never think of the card layout.I looked at your example and it works great. I do have one question.I'm not sure how to add a new card. Is this done in code or can I also do this in the design view?I've looked for an option like 'Add Card' as it is done with the tab control, but can't find it?In general I would like to know how to use the card layout on a new form. How to add cards and how to add controls to the card.

Mallika Kannan · Answer

Hi Paul

Thank you for your update.

Please find the details in below,

Query

Comments

I'm glad I asked because I would never think of the card layout.

I looked at your example and it works great.

We are glad to hear that we have helped you in this.

I'm not sure how to add a new card. Is this done in code or can I also do this in the design view?

I've looked for an option like 'Add Card' as it is done with the tab control, but can't find it?

In general I would like to know how to use the card layout on a new form. How to add cards and how to add controls to the card.

Yes, This below steps will guide in “How to configure CardView control?”

1) How to configure Card View in Design Mode?

Step 1: Create the New Form.Please refer the below Screenshot.

Screenshot

Step 2: Drag and Drop the CardLayout Control.

Please drag and drop the CardLayout Control on form.

Step 3: Add Controls in Form

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

Please refer the below Screenshot

2) How to add Programmatically?

Please make use of the below Code snippet to load controls programmatically.

Code snippet [C#]:

//Set the card Name

this.cardLayout1.SetCardName(this.treeNavigator1, "TreeNavigator");

this.cardLayout1.SetCardName(this.treeView1, "TreeView");

this.cardLayout1.SetCardName(this.hubTile1, "HubTile");

this.cardLayout1.SetCardName(this.groupBar1, "GroupBar");

this.cardLayout1.SetCardName(this.buttonAdv1, "ButtonAdv");

We have also prepared the sample Your Reference. It can be downloaded from the below link.

Sample: https://www.syncfusion.com/downloads/support/forum/133666/ze/cardLayout587796903.zip

Kindly check the above solution and let us know if it is helpful.

Regards,

Mallika

Paul Meems · Answer

Thanks for the overview.It is now much more clear to me. I will start with the implementation in my project soon.

Mallika Kannan · Answer

Hi Paul  
 
Thanks for your update. 
 
We are glad to hear that we have helped you in this. Please let us know if you need any other assistance. 
 
Regards. 
Mallika