Managing Lots of Overlapping Controls in Visual Studio - c#

I'm using different sets of controls on the same location on a form. By default all are visible=false and then certain subsets of the controls are set to visible as the user selects specific values in a combobox dropdown control.
From the user's perspective this works well since they only see the controls that are needed.
However, since the controls occupy the same location on the form it is difficult to manage these in Visual Studio design view.
Is there a way to group sets of these overlapping controls in Visual Studio so that I can select the entire subset of controls quickly and easily? Is there a way to hide certain controls in design view? Right now everything is stacked on top of each other when developing so it makes managing these controls difficult.

To get such a beast to work i would put every group into it's own UserControl. On your MainForm you stack all these UserControls above each other.
So at the MainForm you can't really get a good overview, but now you got for every group your individual designer view and in your main form you can hide the complete group by a single line of code userControl.Visible = false.

A TabControl can do this, works well in design mode. You just need to hide the tabs at runtime. Check my code in this thread.

You can not hide them.
However you can group them in group box
and using "Bring to front" and "Send to back" property deal with them.

First of all,
If you work with multiple components in same location, you can use groupboxes in your form. Then, to superimpose these groupboxes, you should edit each of your groupboxes on different place in your form screen. After the edit, you should input size and location data manually in your groupbox properties menu.
If you want to edit one of your groupbox after the set location, you can easily right click any of your groupboxes then click "send to back" and "bring in front" commands. I hope it helps.

Related

Change panels / views based on button click

I would like to implement the following WinForms user-interface, with two buttons at the top that allows the user to toggle between two views.
So, when I click the 1st button ("Show User Profiles"), the three panels below should show the three different user profiles (with some content fetched from database), like so...
And when I click the 2nd button ("Show Chat History"), the three panels below should show the three different chat histories (with some content fetched from database), like so...
What is a good approach (either dynamic or static) to implement this kind of structure in C# / .Net? Is there a cleaner or at least more efficient way than my crude method below:
Layout three sets of controls for the three Profiles
Layout three sets of controls for the three Chat-Histories, overlapping on top of
the Profiles' controls.
Change visibility of the controls based on which button is pressed.
For example, if 1st button is clicked, Set Visibility=false for all the controls related to Chat-History, and Set Visibility=true for all the controls related to User-Profiles.
a tab control would give you a separate set of panels. Its the obvious way to do it, but if you want to overlay panels and control the visibility you can, and its fine. I have a content viewer that displays either images or text depending on the mime type of the content, and that context switching occurs without user interaction, so it makes sense there to put the image control on top of the textbox and set it visible if the mime type is image/jpeg. Where a user is going to make the choice tho, I would use a tab control.
I assume you are using the visual ui to add controls. you can just drag a tab control to your form and it should by default appear with 2 tabs defined. You can add more in properties my modifying the tabpages collection. That's where you would also rename them to reflect your choices (profiles, chats). drag the tab control up where you want it on the form and size it appropriately, or dock it to fill the form. drag 3 panels into the first tab, then click on the 2nd tab, and drag 3 more in there. then proceed as you would have. When the user clicks on the chat tab the tab control will manage the view - hiding the first tab and its 3 panels. Of course clicking the first tab would make that tabPage visible again. no need for you to code anything.
I'll just add that I don't understand the design of having 3 profiles visible, and 3 chat history's. Unless your users are going to be limited to 3 friends. I would think you would be better off using a listbox for friends names on the profiles page, with a single profile panel that just filled the profile controls based on which friend is selected, and then the same list on the chat page, with a single chat panel that loaded the history into the textbox based on which friend was selected. That way you can have all the friends you want :)
and for completeness i'll suggest one more way, why should the user have to switch between tabs to view a users profile or chat history when you can provide them both in a single tabPage? You could programmatically create a new tab for each user and on that tab have their profile panel on the left, and their chat history on the right. Less context switching = better user experience. The tab control will allow you to scroll for tabs that don't fit on the form automagically(tm).

Create controls dynamically or create controls in a side form? C# winforms

I have a form full of controls, and there is no room for other controls. On the bottom of the form I have a panel with some controls on it.
My goal is that when a certain button is clicked, the original panel on the bottom will be replaced with another panel that contains controls which could be created before the program starts, meaning these controls in the panel do not need to be created dynamically. The replace action would be executed by setting each panel's visible field to it's matched value.
I have thought of two ways of doing this - either creating the new panel (and it's controls) dynamically and adding it to the form instead of the original, or creating the new panel in another form and when the relevant button is clicked the panel being taken from that form and added to the required form (by creating an instance of the new form and making it's panel's modifier public). The "side form"'s purpose is only to create that panel, it has no functionality of it's own.
The advantages of creating the new panel dynamically:
There is no need to create a zero-functionality form.
The advantages of creating the new panel in a side form:
It's very clear which controls are added to the new panel and their positions.
It's very easy to set the location and other fields of the controls in the new panel.
Which way is better?
Thanks!
Have you considered TabControl? That seems a good fit for your needs. Other controls I can think of are StackPanel (Can be fairly easily done for Windows Forms) or OutlookBar like control (again a user control).
Simplest and quickest way seems to be TabControl.
Edit:
SideForm is a different windows form I suppose. So if you are thinking to make controls public and then change their visibility etc, please don't. Use delegates to handle SideForm's events in MainForm.
As you mentioned, there is no room for more controls, I would suggest more screens rather than just one. Having said that I do not know much about your current UI design and functionality so it's up to you.
I would say having the controls hidden and just playing with the Visibility is fine. This means that you do not have to worry about positioning of controls, anchoring and docking at runtime. The problem could well be loading of form. Having huge number of controls having a lot of data associated with them may slow things down.
IMO the best way would be to utilise user controls for this purpose. Simply create one user control per panel you wish to show/hide and place your controls inside. This way you will have both: the designer and the "extra form" you wanted.

what could be the possible reasons for TabIndex not working properly

so I have started from 0 and defining tabindex for the controls on my form but at run time it is all messed up. the form is a little complex tho. it has horizontal and vertical splitters and panels, group boxes and some older VB 6.0 activeX controls which is a Tree control inside them. even if i do it programmatically and read previewkeydown eventg and say if it is TAB then control2.Focus() it is still working wrong. so frustrating. any thoughts? ..there are also labels on the form which do not need tab so I have defined 0 for their index.
How are you setting it?
If you are in visual studio with the form in design view select view -> tab order and then click on each item in the order you want them.
Usually works for me.
The reason is that the controls are in different Containers. Suppose you've got panel1.TabIndex = 0 and panel2.TabIndex = 1, then in panel2, textBox1.TabIndex = 0, in panel1, textBox2.TabIndex = 1. At runtime, textBox1 comes before textBox2 because its panel comes first!
As kerry said, use view->tab order to see the complete hierarchy of tab orders.
I'm mentioning this because I haven't seen it in any of the winforms tab order threads that I have found on stackoverflow.
If you have multiple panels, you change your panel tab order by clicking on the Panel, going to properties, and then you change the TabIndex to whatever you want. This will allow you to navigate from panel to panel in the order that you want. Then within each panel, follow the recommended steps listed above using view > tab order and click on each cell in the order that you want to set.
Follow the steps below:
Set the TabIndex property to DIRECT CHILD containers and controls in your form or container, either using the View > TabOrder utility or directly from the properties window. Completely ignore the TabStop property of containers, which defaults to false even it's very important.
Repeat step 1 with each container.

Building Controls at Runtime

I have a section of a form where the controls (text boxs, labels etc) need to be built at run time depending on options a user has selected. There will probably be about 7 - 10 different layouts in all.
What's the best way to go about creating and maintaining them?
Cheers
Luke
It would be helpful to know more about the specifics of your situation (what kind of options are we talking about?)
But off the top of my head, I'd guess you probably want to create a set of Panels which would contain the appropriate controls then hide or show them depending on the options.
I have actually had to do just this. I did it with a set of panels (as #David suggests) and also a TreeView. Using the tree view, I customized the visuals to make them mimic an options menu in Microsoft Office, and then I show the appropriate panel based on the user's selection of nodes. If you'd like to see code samples let me know.
All WinForms controls has corresponding classes (Button, Link, EditBox etc.) You can create any controls you want and attach them to form.
Inside the form Init you can add new controls into Controls collection.
public void Init()
{
this.Controls.Add(new TextBox());
}
Some more details in MSDN:
http://msdn.microsoft.com/en-us/library/0h5y8567.aspx

Creating Options Menu with overlapping panels

I'm trying to create an options menu in a C# forms project, and I'm curious if there's a less ugly way to do this. I have a ListBox that has the different categories of options, and when you select a category, the options for that category appear in a panel on the right. Basically, something identical to the options menu in Visual Studio itself.
Obviously, different controls have to use the same real estate here, as every category has different options which need to be displayed in the same area of my form. So when you select a category, the controls for every other category must become hidden.
I'm currently using a different Panel object for each category (13 currently), but designing each panel is a headache because i need to drag the other 12 panels out of the way each time I need to alter one. Is there a better way to do this? I'm open to any suggestions, whether its a complete change in the implementation, or even just a Visual Studio tip for working with 1 of 13 panels that all overlap.
If all else fails I could use a TabControl rendered horizontally, but I don't like how that looks.
Thanks in advance.
I can think of three alternate approaches:
(Ok) Use a tab control that doesn't display the headers for the user.
(Better) Create user controls for each option page, so you have different designer files for each.
(Better yet?) Dynamically generate the UI based on some descriptive information, so there are no designer files to deal with at all.
Take a look at the UserControl class. You can design on it with the Forms Designer, than programatically place it to the right of your ListBox when items are selected. Create a different UserControl for each category of options that you have.
First you should know when you are in Design Mode that there is a drop down menu from the Properties Windows (View->Prpoerties Menu), that allows you to select a control. So you don't need to move other controls out of the way encesarily.
Second, I would make the options panel for each category it's own user or custom control. This way you can edit the panel itself seperately. Then you have the option of showing/hiding that custom control when it's category is selected, or even dynamically creating the control.

Categories