How to do non-linear page navigation in WPF & C#? - c#

I'm not even sure if I'm using the right terms for what I'm trying to do. But basically I have a personal organizer program with content that changes depending on what task you're doing, a calendar vs. contact list vs. todo list etc.
My searches keep bringing up "Navigation" but I'm not sure that this is what I'm after, as I don't want to be stuck going forwards and backwards between pages. I want the user to be able to click on a link or button and be able to jump to any point in the program. Am I better off just removing all the controls and adding the new ones each time? I'd like to keep it all within one window if possible.

If I were in your situation, I would use tabs. Set up an individual tab for each each "task" (calender, contact list, todo list). This way users are one click away from any task they want to navigate to.

You want to use user controls. Each user control is like a sub-page of controls. Then you keep the same master page and just switch user controls based on what you want to show. You can put the user controls on separate tabs if you like or you can put them one after the other and make them visible/invisible or you can load them dynamically with code like
myBorder.Child = new MyUserControl();

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

Load User Controls dynamically based on other control events

I have a "cross section" of variables that I need to use to generate a set of user controls dynamically. In the center of the page I have a Telerik multitab/page. I have a custom tree menu and a custom menubar, based on the combination of menu input each of the tabs should load a user control relevant to that cross section of data.
For clarity, almost each tab, treeview, menubar combination needs a unique control.
My problem is that all the postback/loading happens well before the "OnMenuChanged" event triggers, so I'm one "set" of user controls behind. Even if I were to use session/viewstate they wouldn't get assigned until after I needed the value stored in them.
Currently what is happening is the default user controls are loaded in the "pageviewcreated" event, then in the onMenuItemChanged I go back and reload the user controls. It seems very inefficient and is complicating up the approach for selecting the right .ascx.
How do I manage this?
If I understand what you're trying to do could you not use a placeholder control and inject your needed usercontrol into that inside of the events you're managing? Try doing something like this inside of the "OnMenuSelected" event.
WebUserControl1 uc = (WebUserControl1) Page.LoadControl("WebUserControl1.ascx");
PlaceHolder1.Controls.Add(uc);

How to dynamically add a dataentry form in asp.net webforms

I have to create a data entry form in asp.net webforms where the user could enter several member details. Each member detail will have about twenty data items such as FirstName, Lastname, DateOfBirth etc. The number of members entered can be anywhere from one to say twenty.
Once all the members entered or during the entry process, they should be able to go to the previous or next entry and make changes. Essentially there should be a Next and Previous buttons which will traverse the pages. At the end when the Save button is clicked all the entered data should be saved.
I have created a UserControl, which has all the textboxes to enter data. I have created five hardcoded panels which display the usercontrol five times. This makes the total members that could entered as five.
I would like to replace this hardcoded model with a dynamically added panel, when the next button is clicked.
Please let me know how this could be achieved. Or if there is a better architecture please let me know. I tried the wizard control, but it was too cumbersome in maintaining the previously entered values and traversing data using Next and Previous buttons.
Thanks
You could add the controls dynamically to the page using:
Page.Controls.Add(new MyControl());
You'll have to find a temporary store for the data entered in the controls though such as Session.
Session["addedControls"] = myControls;
You can track the number of controls they add and then loop though and save all the data to whatever permanent store you're using.
There's an example of this here: http://howto.jamescarnley.com/2008/05/adding-fields-dynamically-in-aspnet.html
Storing the entire control in session does have it's drawbacks such as the overhead involved, you could just store the data which is more efficient but is a tiny bit more effort to implement.
This will also only work if they have cookies enabled.
Alternatively you could have a drop down list for them to select the number of entries they wish to make and display that number of controls by calling Page.Controls.Add the number of required times. Then just save them all in bulk at the end.
You could dynamically add the controls you need to input a new member easily enough in javascript. What you propose sounds like a nightmare to me. I'd put up a page with the controls to add a member and an 'Add Member' button. When the Add Member button is clicked - I would save the member to the database, retrieve a list of members added in this session - and display the names of the members in a list to the right of the 'Add Member' area of the page. If they want to review a member they can click on their name and you can show that member ready to be edited. Or they can add another member until they have finished. What you are trying to do is going to be a nightmare to manage and won't be any easier for the user to use.
Using dynamic controls will be very difficult and not user friendly as it may require refresh the page or using update panel
in your case, I would recommend doing it all from JavaScript using Knockout, This is a full sample Knockout Grid
Make sure after adding or editing the grid, you will serialize the JavaScript objects into string using JSON.Stringify and add this text to a hidden field.
On form submission, just get the hidden field value, use newtonsoft json library to convert the string into an object and fee free to use the object which will be a list of your model (ex: Order).
Compared to dynamic controllers, this is more manageable and user friendly

C# Winform Question

I'm just getting started with winforms in C# and things are going well, except I want to learn how to do something like:
if user presses "proceed" button, it will run some code, and change the form, so that there are more options available to the user on the form. In other words, I want to make my forms more than one "page". I hope that all makes sense. Any help would be appreciated, thanks!
You could have a tab control with separate tabs that you move through that are disabled until they are needed. Each one could have its own controls, etc... You could have the controls disabled on the main form and then enable them, etc... There are myriad ways that you could approach this problem.
For winforms:
private void button1_Click(object sender, EventArgs e)
{
textBox1.Visible = true;
}
One easy way of doing that is to add a container control, for example a GroupBox that contains a selection of controls that belongs together and then you make that GroupBox invisible. Then in the button click handler you make it visible again.
That way all the related controls are shown/hidden together and if needed you can move them around the screen without needing to worry about their locations related to each other.
I want to make my forms more than one "page"
When I do that, I normally build each "page" as custom control. This let's me separate the navigation elements from what it is you're navigating to, so that I can easily play with different ideas later. For example, do I want to use a tab control to host each page inside a separate tab? No bid deal - just drop one my controls on each tab. Swap out different pages on the same form? It's only one control to replace. Move between completely different forms? Still easy.
As a basic starting point, if you want to run some code when the user clicks the button just handle the Click event. Just double click the button to get to the code-behind and place your code in there.
In terms of exposing extra functionality when the user clicks proceed there are various options available to you, its really up to you to figure out which is best suited to your application. One simple option would be to perhaps have a Panel or GroupBox and place all the extra options on there and make it disabled, then enable when you see fit.

trying to determine best user interface for layouts - winform button that shows dropdown

I am adding layout management to my winforms GUI which really just means that you can "Save" the current column settings with a "Key"
so for example you can have "View 1" or "View 2".
anyway, i dont have much real estate on the screen but i am trying to figure out the best way to:
Allow you to save the current layout as a "Saved Layout"
Allow you to select another layout and apply it.
Right now i have:
Save Icon
Combobox that has a list of saved layouts
Apply Icon
It works ok but it look a little unclear because the dropdown combobox is available and doesn't necessarly correspond to the view you are looking at.
I thought one idea was to instead of showing the combo, to just have two buttons:
Save layout
Apply existing layout.
when you clicked #2, this would then turn into a dropdown and show the other layouts.
thoughts or any other suggestions on a clear way to visualize this?
When space is tight, I'm a big fan of the LinkLabel and the ContextMenuStrip controls.
Save would pop up another form or something for entering the name of the current layout (or this could be set automatically), and Load displays the saved layouts in a popup menu that can then be clicked to select the desired layout.
LinkLabels take up less room than Buttons and ComboBoxes, and there's never any confusion about how they work.
I like your second idea, with one button to save and one generating a dropdown + apply
from my experience it's sometimes better to separate such logic into own modal window to select what to do and near your layout would be an icon suggesting for "advanced usage"
always try to "comment around" the components (use hints as much as possible) to tell the user what can be done with specific functionality
alt text http://www.talkingtext.com/wordpress_en/wp-content/uploads/2008/04/googleproduct.jpg
I try to keep the UI as uncluttered as I can, particularly when it comes to functionality that is of a more ancillary nature. To that end, if I can utilize something like a context menu that the user can right-click to pull up, I will. From the context menu, I generally provide a dialog box to support the functionality needed.
If the saving of the layout is a primary function of the form you are displaying to the user, it might warrant UI elements like a button or combo box that has dedicated real estate. Otherwise, I'd think seriously about putting the controls that provide that functionality on another pop-up dialog and using a mechanism like a context menu to bring up that dialog.
The downside to the context menu idea, initially, is that the user needs to "know" that the functionality exists. That might be solved by training or by tooltip hints or other means. Typically once the user "knows" that controls like ListViews, TreeViews and DataGridViews can have context menus, they don't have problems finding the functionality.
Just my two cents.

Categories