Click here to Skip to main content
15,918,275 members
Please Sign up or sign in to vote.
2.50/5 (2 votes)
Hi guys!
When i create my project, i want to display a single page in a c# WinForms, same as a website, when i click on an item of navibar, other page will display. I have already tried to search but i can't find out.
Like this [^]
and http://webplantmedia.com/starter-themes/wordpresscanvas/wp-content/uploads/2014/02/Screen-Shot-2014-02-03-at-12.10.36-PM-1024x639.png[^]
Can you point me control or library extended in c# to do that, not MDI form?
Thanks!
Posted
Updated 8-Dec-14 6:15am
v3
Comments
BillWoodruff 8-Dec-14 0:43am    
Okay, the link helped me "get" that you want a WinForm app with multiple Forms.

Do you wish to have one Main Form with a menu that controls which other Form(s) are displayed, or do you wish each Form to have a menu displaying choices of all the other Forms ?

Under what circumstances does the user create new instances of Forms ?

Another option is launch a first Form that displays the Menu, and when the user clicks on the name of another Form, hide the first Form, display the other Form: when the user closes the other Form, re-open the first Form.

Or, you can display all the Forms at once, etc.

As the essay by Stovell mentions, one type of multi-form app can be a wizard where Forms are preseneted in sequence.

Details, please.
KasGuest 8-Dec-14 12:25pm    
Hi @BillWoodruff,
I want to display all Forms in a MainForm and not Wizard. It have a navbar, when i click items of it, new page will display, like this:
http://webplantmedia.com/starter-themes/wordpresscanvas/wp-content/uploads/2014/02/Screen-Shot-2014-02-03-at-12.10.36-PM-1024x639.png
In DotNetBar (devcomponent.com) has a control called page slider, slide pane can solve this, but it not perfect and difficult to use.
Have another library?
BillWoodruff 8-Dec-14 22:42pm    
Please respond to these questions and comments with a comment.

The clearer you can be about your Application design, the more rapidly you can get assistance. Remember, I can't read your mind, see your screen :)

fyi: it is generally considered bad practice to put a Form inside another Form in WinForms: in almost every case you can use UserControls (or Panels) instead and achieve the same visual and functional result.

It seems to me you want an architecture like MDI, where there's one master Form and other Container Controls appear within it, and you don't want multiple independent Windows (Forms) that can be positioned anywhere on the screen.

I don't like MDI, but I want to ask you why you chose not to use it.

Another common UI for everything-in-one-Window is to have a single Master Form with the Application window divided into two parts: in one part are the Controls for navigation, creating new child-windows, etc.; in the other part is a TabControl that displays the virtual child-windows of the specific type you have selected. Have you considered that ?

The WebPlantMedia page you linked to shows what I call a "design surface" for creating new web-pages. You could duplicate that kind of UI easily.

I don't see any control on the DotNetBar site with the name "page slider," or "slide panel." Can you be more specific ?
KasGuest 9-Dec-14 4:41am    
Thanks sir,
"It seems to me you want an architecture like MDI, where there's one master Form and other Container Controls appear within it, and you don't want multiple independent Windows (Forms) that can be positioned anywhere on the screen".
Yes, you right. Like you said, i want to create a single Master Form contain a tab control, in one tabpage divided it into two parts, like this: https://www.dropbox.com/s/13m2mho1u0qzmix/question.png?dl=0
Can you point me how to do it to show different page in a single tabpage when i click on different items in sidebar?

I don't like MDI, too. I think it's old architecture and unsuitable with modern UI.

Here is PageSlider: http://devcomponents.com/blog/?p=1052
and slide panel
Slide panel
BillWoodruff 9-Dec-14 5:28am    
Okay, I think I understand what you are after now, and I'll post a reply with some suggestions, and code.

1 solution

Here's a quick sketch of one way to go about the kind of interface you want:

1. Create a WinForm App with a Main Form named 'MainForm like this: [^].

a. add Three Panels as shown; none of them are Docked; they have their Anchor properties set so if the Form is re-sized they will re-size appropriately.

b. add a Button to the pnlMenu, 'btnInitialize, this will trigger the initial creation of the Views/UserControls as shown in the code.

2. add a Timer component to the Form, 'timer1. Set its 'Interval to 50ms.

3. Create a UserControl, 'ucType1Child1, size 560,508, background-color Alice-Blue. Put a TextBox on it, 'textBox1.

Code for the MainForm:
C#
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Windows.Forms;

namespace Dec12_PageSlider
{
    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
        }

        // keep track of the current and next views
        private ucType1Child1 currentUC;
        private ucType1Child1 nextUC;

        // keep track of link between Navigator Panel and Content Panel UserControl
        private Dictionary<Button, ucType1Child1> dctBtnToUc = new Dictionary<Button, ucType1Child1>();

        // the Button the user clicked in the Navigator Panel
        private Button clickedButton;

        private void btnInitialize_Click(object sender, EventArgs e)
        {
            // to play again: clear the current controls
            if (pnlContent.Controls.Count > 0)
            {
                pnlContent.Controls.Clear();
                dctBtnToUc.Clear();
            }

            // create #5 views for testing
            for (int i = 0; i < 5; i++)
            {
                // create the view
                ucType1Child1 uc1 = new ucType1Child1 {Anchor = AnchorStyles.None, Dock = DockStyle.None};
                
                // stick something in its TextBox to identify it for testing
                uc1.setText("View " + (i + 1));

                // add the new instance of the UserControl to the Content Panel
                pnlContent.Controls.Add(uc1);

                // position the new View/UserControl outside the Content Panel
                uc1.Left = -uc1.Width - 6;
                uc1.Top = 1;

                // create the Button for the Navigator Panel
                Button btn = new Button {BackColor = Color.GhostWhite, Text = string.Format("View {0}", (i+ 1).ToString())};
                
                // add the new instance of the Button to the Navigator Panel
                pnlNavigator.Controls.Add(btn);
                
                // position the Button
                btn.Left = 50;
                btn.Top = (i*65) + 26;

                // assign the Button's ClickHandler
                btn.Click += viewBtn_Click;

                // add the new entries to the Dictionary
                dctBtnToUc.Add(btn, uc1);

                // get started: slide-in the first UserControl
                dctBtnToUc.Keys.First().PerformClick();
            }
        }

        // note this Click EventHandler is assigned to every
        // View/UserControl created
        private void viewBtn_Click(object sender, EventArgs e)
        {
            // look up the associated View/UserControl
            nextUC = dctBtnToUc[sender as Button];

            // quit here if the view did not change
            if (currentUC == nextUC) return;

            // if you uncomment this, then the pnlContent background
            // will show for a moment before the animation begins
            //if (currentUC != null) currentUC.Left = -currentUC.Width - 6;

            // make sure the next View starts outside of the Content Panel
            // probably not needed ?
            if (nextUC.Left > 0) nextUC.Left = -nextUC.Width - 6;
            
            // bring it in front
            nextUC.BringToFront();
            
            // long live the new View !
            currentUC = nextUC;

            // start the animation
            timer1.Start();
        }

        private void timer1_Tick(object sender, EventArgs e)
        {
            currentUC.Left += 50;

            if (currentUC.Left >= 3)
            {
                timer1.Stop();
                currentUC.Left = 3;
            }
        }
    }
}
The UserControl, 'ucChild1Type1 is very simple:
C#
using System.Windows.Forms;

namespace Dec12_PageSlider
{
    public partial class ucType1Child1 : UserControl
    {
        public ucType1Child1()
        {
            InitializeComponent();
        }

        public void setText(string text)
        {
            textBox1.Text = text;
        }
    }
}
Here's what it looks like running after 'button1 has been clicked and the five views are created: here I've just clicked on the 'View 5" Button and that view has scrolled into view in the Content Panel: [^].

Comments:

1. Of course, there are a lot of things here that would need to be worked out to go beyond just a prototype showing proof-of-concept.

2. all those hard-coded offsets for positioning would need to be transformed into calculated offsets.

3. the issue of re-sizing the view/usercontrol when the Form is re-sized is not addressed here, although that's not technically difficult.

Remember this is example is primarily meant be for educational purposes, the standards one would want for "production code" are not even attempted here.
 
Share this answer
 
v2
Comments
KasGuest 9-Dec-14 20:50pm    
Thanks @BillWoodruff, it worked!
BillWoodruff 9-Dec-14 21:19pm    
Glad to hear that !

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900