Change panels / views based on button click - c#

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).

Related

Caliburn Micro active multiple user control in one page

I am new in caliburn microframework and MVVM itself in WPF. I am looking for way how to achieve activating multiple user control in one page, dependent on user selection.
As you can see in the picture below, when user clicks on the new file the window "Select calculation" will appear and in the checkboxes user can select calculation according some standards like DIN, CSN etc.
After confirmation with OK button, in the "Input parameters screen part" then appear User controls which will contain textboxes for input parameters.
Problem is that every standard has slightly different parameters for calculation. So my goal is to open only user control with input parameters textboxes and labels which are corresponding with selected standard.
So my question is: How to achieve this activating of multiple user controls in one screen part? If I use conductor I can activate only one item in time.
I thought about approach that I will load all input parameters user controls and make visible only these which corresponding with standards that user selected.
Image representing layout of application

How to add multiple tabs or pages in Win forms Application

This is UI of the app which I'm creating, So if a user clicks Home button he should be able to play with some specific controls and again if he presses Sellers button, new tools and controls should be visible on the screen!
I tried to implement this by using 4 panels with
panel_name.visible=false
in respective button click event, but the problem is each panel should take up 1/4th of the space in the form to display all of its respective tools.This makes the panel area too small!
How can I make the application such that If a user clicks Home button, he should see one page/tab and different tabs/pages for different buttons clicks?
I suggest you use the user controls: right click on your solution> add> user control
C# UserControl
How to create and use UserControl
The user controls are similar to the forms, since you can place controls on them, the difference is that instead of showing them as common forms, you drag them as a control inside the form

Managing Lots of Overlapping Controls in Visual Studio

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.

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.

How do I make a single control appear across many tab control pages?

I have a WPF tabcontrol with 3 tabs. On the top of the first page is a scrollviewer with a couple buttons which make up a menu of common tasks (save, load etc). I would like this scroll viewer to appear at the top of every tab. Is it possible to do this without simply copying and pasting the code to every tab?
You can make a custom control that contains the UI and logic for the buttons, and then include that control on each tab. The best way to do this is to create a subclass of ScrollViewer, and in the XAML define each of the buttons. On each of your tab pages you can create and create an instance of your new subclass.
This will result in a different instance of your class on each page, but the logic for the buttons will only exist in the code once.
You could implement the scroll viewer and buttons outside and on top of the tabcontrol.

Categories