Hi,

I am developing an app which i want to have same style of GUI as the .NET
Configuarion tool. i.e menus at top,rest of dialog dialog split into two with
a tree like structure on the left and when item is selected on it, its
contents are displayed on the right hand side.

I'm not sure how to achieve this( maybe using splitter control with treeview)

I'd appreciate any suggestions that could help me do the above

Thanks In Advance
Macca

Add a TreeView to the Form and set it's Dock property to DockStyle.Left.
Add a panel or a single control that will display the properties such as a DataGrid to the Form and set it's Dock property to
DockStyle.Fill.

The splitter can be used if you want the TreeView to be resizable at runtime.

--
Dave Sexton
dave@www..jwaonline..com
-----------------------------------------------------------------------
"Macca" <(E-Mail Removed)> wrote in message news:A2580074-4BE5-4B75-9988-(E-Mail Removed)...
> Hi,
>
> I am developing an app which i want to have same style of GUI as the .NET
> Configuarion tool. i.e menus at top,rest of dialog dialog split into two with
> a tree like structure on the left and when item is selected on it, its
> contents are displayed on the right hand side.
>
> I'm not sure how to achieve this( maybe using splitter control with treeview)
>
> I'd appreciate any suggestions that could help me do the above
>
> Thanks In Advance
> Macca

Hi Dave,

Thanks for the info.

How do i syncronise the treeview and panel?

i.e when i select an option on the treeview the panel should change to the
appropriate view.

Cheers
Macca


"Dave" wrote:

> Add a TreeView to the Form and set it's Dock property to DockStyle.Left.
> Add a panel or a single control that will display the properties such as a DataGrid to the Form and set it's Dock property to
> DockStyle.Fill.
>
> The splitter can be used if you want the TreeView to be resizable at runtime.
>
> --
> Dave Sexton
> dave@www..jwaonline..com
> -----------------------------------------------------------------------
> "Macca" <(E-Mail Removed)> wrote in message news:A2580074-4BE5-4B75-9988-(E-Mail Removed)...
> > Hi,
> >
> > I am developing an app which i want to have same style of GUI as the .NET
> > Configuarion tool. i.e menus at top,rest of dialog dialog split into two with
> > a tree like structure on the left and when item is selected on it, its
> > contents are displayed on the right hand side.
> >
> > I'm not sure how to achieve this( maybe using splitter control with treeview)
> >
> > I'd appreciate any suggestions that could help me do the above
> >
> > Thanks In Advance
> > Macca
>
>
>

Handle the AfterSelect event of the tree view and perform any necessary operations on the panel in code.

// Initialize the tree view (or let the designer do this for you):

public Form1()
{
TreeView tree = new TreeView();
tree.Dock = DockStyle.Left;

// Add a handler for the AfterSelect event:
tree.AfterSelect+= new TreeViewEventHandler ( TreeNodeSelected );

Controls.Add(tree);

Panel view = new Panel();
view.Dock = DockStyle.Fill();
Controls.Add(view);
}


// Handle the AfterSelect event:

private string currentViewType = null;

private void TreeNodeSelected(object sender, TreeViewEventArgs e)
{
/*
I'm assuming that viewType1 and viewType2 are instances of UserControl-derived classes.
If you have a view for each node type, you can create a UserControl for each view that may be displayed.

I also used a global-scope variable named, "currentViewType" that keeps track of the currently displayed view.
When you add Node objects to the "tree", make sure to set the "Node.Tag" property to the appropriate view type
name to be displayed.

For simplicity I used currentViewType as a string although an enumeration would make more sense if the node
types cannot be changed at runtime.

If you need more info for each Node other than just it's view type, you can set the Tag to a custom structure or class
that holds more information about the Node.
*/

if (e.Node.Tag == currentViewType)
return;

currentViewType= e.Node.Tag as string;

// remove the current view
// here would be a good place to save any changes before the next line of code
view.Controls.Clear();

switch (currentViewType)
{
case "Type1":
view.Controls.Add(viewType1);
break;
case "Type2":
view.Controls.Add(viewType2);
break;
}
}

--
Dave Sexton
dave@www..jwaonline..com
-----------------------------------------------------------------------
"Macca" <(E-Mail Removed)> wrote in message news:9E17B7AF-07E6-413A-AE44-(E-Mail Removed)...
> Hi Dave,
>
> Thanks for the info.
>
> How do i syncronise the treeview and panel?
>
> i.e when i select an option on the treeview the panel should change to the
> appropriate view.
>
> Cheers
> Macca
>
>
> "Dave" wrote:
>
>> Add a TreeView to the Form and set it's Dock property to DockStyle.Left.
>> Add a panel or a single control that will display the properties such as a DataGrid to the Form and set it's Dock property to
>> DockStyle.Fill.
>>
>> The splitter can be used if you want the TreeView to be resizable at runtime.
>>
>> --
>> Dave Sexton
>> dave@www..jwaonline..com
>> -----------------------------------------------------------------------
>> "Macca" <(E-Mail Removed)> wrote in message news:A2580074-4BE5-4B75-9988-(E-Mail Removed)...
>> > Hi,
>> >
>> > I am developing an app which i want to have same style of GUI as the .NET
>> > Configuarion tool. i.e menus at top,rest of dialog dialog split into two with
>> > a tree like structure on the left and when item is selected on it, its
>> > contents are displayed on the right hand side.
>> >
>> > I'm not sure how to achieve this( maybe using splitter control with treeview)
>> >
>> > I'd appreciate any suggestions that could help me do the above
>> >
>> > Thanks In Advance
>> > Macca
>>
>>
>>

Hi Dave,

Thanks for the info. It has been very helpful. I just have a couple of
questions for you.

Each of the nodes in my treeview will give the user a different "view" in
the panel or whatever is best to display it.

Each view will consist of a number of user controls on it, such as combo
box, list views.push buttons etc.

One view will ask the user to input information into such controls which
when the user selects the appropriate button will query a database and then
produce a crystal report.(i have this database/crystal report functionality
in another app which i will use for this view).

Another view will contain text with link labels that will bring up another
page of text or a dialog.

What i would like to be able to do is design these "views" at design time
through editor and not programatically if possible.

Then i assume as i select a node in the treeview i could invoke the
appropriate view as you have showed me.

The example you showed me i assume have the "views" designed programmically.

Is what i am asking possible? Will i need to do something a bit different
from what you initially suggessted in using a panel control for the views?

Thanks In Advance
Macca


"Dave" wrote:

> Handle the AfterSelect event of the tree view and perform any necessary operations on the panel in code.
>
> // Initialize the tree view (or let the designer do this for you):
>
> public Form1()
> {
> TreeView tree = new TreeView();
> tree.Dock = DockStyle.Left;
>
> // Add a handler for the AfterSelect event:
> tree.AfterSelect+= new TreeViewEventHandler ( TreeNodeSelected );
>
> Controls.Add(tree);
>
> Panel view = new Panel();
> view.Dock = DockStyle.Fill();
> Controls.Add(view);
> }
>
>
> // Handle the AfterSelect event:
>
> private string currentViewType = null;
>
> private void TreeNodeSelected(object sender, TreeViewEventArgs e)
> {
> /*
> I'm assuming that viewType1 and viewType2 are instances of UserControl-derived classes.
> If you have a view for each node type, you can create a UserControl for each view that may be displayed.
>
> I also used a global-scope variable named, "currentViewType" that keeps track of the currently displayed view.
> When you add Node objects to the "tree", make sure to set the "Node.Tag" property to the appropriate view type
> name to be displayed.
>
> For simplicity I used currentViewType as a string although an enumeration would make more sense if the node
> types cannot be changed at runtime.
>
> If you need more info for each Node other than just it's view type, you can set the Tag to a custom structure or class
> that holds more information about the Node.
> */
>
> if (e.Node.Tag == currentViewType)
> return;
>
> currentViewType= e.Node.Tag as string;
>
> // remove the current view
> // here would be a good place to save any changes before the next line of code
> view.Controls.Clear();
>
> switch (currentViewType)
> {
> case "Type1":
> view.Controls.Add(viewType1);
> break;
> case "Type2":
> view.Controls.Add(viewType2);
> break;
> }
> }
>
> --
> Dave Sexton
> dave@www..jwaonline..com
> -----------------------------------------------------------------------
> "Macca" <(E-Mail Removed)> wrote in message news:9E17B7AF-07E6-413A-AE44-(E-Mail Removed)...
> > Hi Dave,
> >
> > Thanks for the info.
> >
> > How do i syncronise the treeview and panel?
> >
> > i.e when i select an option on the treeview the panel should change to the
> > appropriate view.
> >
> > Cheers
> > Macca
> >
> >
> > "Dave" wrote:
> >
> >> Add a TreeView to the Form and set it's Dock property to DockStyle.Left.
> >> Add a panel or a single control that will display the properties such as a DataGrid to the Form and set it's Dock property to
> >> DockStyle.Fill.
> >>
> >> The splitter can be used if you want the TreeView to be resizable at runtime.
> >>
> >> --
> >> Dave Sexton
> >> dave@www..jwaonline..com
> >> -----------------------------------------------------------------------
> >> "Macca" <(E-Mail Removed)> wrote in message news:A2580074-4BE5-4B75-9988-(E-Mail Removed)...
> >> > Hi,
> >> >
> >> > I am developing an app which i want to have same style of GUI as the .NET
> >> > Configuarion tool. i.e menus at top,rest of dialog dialog split into two with
> >> > a tree like structure on the left and when item is selected on it, its
> >> > contents are displayed on the right hand side.
> >> >
> >> > I'm not sure how to achieve this( maybe using splitter control with treeview)
> >> >
> >> > I'd appreciate any suggestions that could help me do the above
> >> >
> >> > Thanks In Advance
> >> > Macca
> >>
> >>
> >>
>
>
>

Hi Macca,

See inline comments below.

> What i would like to be able to do is design these "views" at design time
> through editor and not programatically if possible.

You can design each view as a control that derives from UserControl (this can be added using VS.NET as "Add New Item...", "User
Control" and will provide you with a designer).

> Is what i am asking possible? Will i need to do something a bit different
> from what you initially suggessted in using a panel control for the views?

In my example following this comment

// Initialize the tree view (or let the designer do this for you):

>> Panel view = new Panel();
>> view.Dock = DockStyle.Fill();
>> Controls.Add(view);

the view that is being added was not intended to hold view-specific controls but instead to be the container for "view" controls.
It's the variable name that threw you off. It should be called, "viewContainer". I mentioned UserControl in the large comment
found in the "TreeNodeSelected" method example and I did intend for you to make UserControl's as your views. The reason for the
panel is simply for ease of docking or if you wanted to control visual aspects of the view area such as a border. When a view is to
be shown (UserControl), it must be added to Controls collection of the "view" variable and not the parent Form. Changing the name
to viewContainer as I mentioned might make things clearer.

> Then i assume as i select a node in the treeview i could invoke the
> appropriate view as you have showed me.

This requires code, but yes my example should work nicely for you. Ensure that the "TreeNodeSelected" method I gave in my original
example is a handler for your TreeView's "TreeNodeSelected" event.

The purpose of setting the Tag property of each node is to associate the node with a view. This may be overkill for your needs but
I used it in the example to be dynamic. If you want to simplify the "TreeNodeSelected" to associate nodes with specific text to
specific views, the modified code could be changed to look like this:

private void TreeNodeSelected(object sender, TreeViewEventArgs e)
{
if (e.Node.Text == currentViewType)
return;

currentViewType = e.Node.Text;

// remove the current view
// here would be a good place to save any changes before the next line of code
view.Controls.Clear();

switch (currentViewType)
{
case "Type1":
view.Controls.Add(viewType1); // viewType1 is a referene to a UserControl instance that is one of your "Views"
break;
case "Type2":
view.Controls.Add(viewType2); // viewType2 is a referene to a UserControl instance that is one of your "Views"
break;
}
}


I hope that clears up some of the confusion with my code.

GL

--
Dave Sexton
dave@www..jwaonline..com
-----------------------------------------------------------------------
"Macca" <(E-Mail Removed)> wrote in message news:FECE291A-10DB-44DD-A4FE-(E-Mail Removed)...
> Hi Dave,
>
> Thanks for the info. It has been very helpful. I just have a couple of
> questions for you.
>
> Each of the nodes in my treeview will give the user a different "view" in
> the panel or whatever is best to display it.
>
> Each view will consist of a number of user controls on it, such as combo
> box, list views.push buttons etc.
>
> One view will ask the user to input information into such controls which
> when the user selects the appropriate button will query a database and then
> produce a crystal report.(i have this database/crystal report functionality
> in another app which i will use for this view).
>
> Another view will contain text with link labels that will bring up another
> page of text or a dialog.
>
> What i would like to be able to do is design these "views" at design time
> through editor and not programatically if possible.
>
> Then i assume as i select a node in the treeview i could invoke the
> appropriate view as you have showed me.
>
> The example you showed me i assume have the "views" designed programmically.
>
> Is what i am asking possible? Will i need to do something a bit different
> from what you initially suggessted in using a panel control for the views?
>
> Thanks In Advance
> Macca
>
>
> "Dave" wrote:
>
>> Handle the AfterSelect event of the tree view and perform any necessary operations on the panel in code.
>>
>> // Initialize the tree view (or let the designer do this for you):
>>
>> public Form1()
>> {
>> TreeView tree = new TreeView();
>> tree.Dock = DockStyle.Left;
>>
>> // Add a handler for the AfterSelect event:
>> tree.AfterSelect+= new TreeViewEventHandler ( TreeNodeSelected );
>>
>> Controls.Add(tree);
>>
>> Panel view = new Panel();
>> view.Dock = DockStyle.Fill();
>> Controls.Add(view);
>> }
>>
>>
>> // Handle the AfterSelect event:
>>
>> private string currentViewType = null;
>>
>> private void TreeNodeSelected(object sender, TreeViewEventArgs e)
>> {
>> /*
>> I'm assuming that viewType1 and viewType2 are instances of UserControl-derived classes.
>> If you have a view for each node type, you can create a UserControl for each view that may be displayed.
>>
>> I also used a global-scope variable named, "currentViewType" that keeps track of the currently displayed view.
>> When you add Node objects to the "tree", make sure to set the "Node.Tag" property to the appropriate view type
>> name to be displayed.
>>
>> For simplicity I used currentViewType as a string although an enumeration would make more sense if the node
>> types cannot be changed at runtime.
>>
>> If you need more info for each Node other than just it's view type, you can set the Tag to a custom structure or class
>> that holds more information about the Node.
>> */
>>
>> if (e.Node.Tag == currentViewType)
>> return;
>>
>> currentViewType= e.Node.Tag as string;
>>
>> // remove the current view
>> // here would be a good place to save any changes before the next line of code
>> view.Controls.Clear();
>>
>> switch (currentViewType)
>> {
>> case "Type1":
>> view.Controls.Add(viewType1);
>> break;
>> case "Type2":
>> view.Controls.Add(viewType2);
>> break;
>> }
>> }
>>
>> --
>> Dave Sexton
>> dave@www..jwaonline..com
>> -----------------------------------------------------------------------
>> "Macca" <(E-Mail Removed)> wrote in message news:9E17B7AF-07E6-413A-AE44-(E-Mail Removed)...
>> > Hi Dave,
>> >
>> > Thanks for the info.
>> >
>> > How do i syncronise the treeview and panel?
>> >
>> > i.e when i select an option on the treeview the panel should change to the
>> > appropriate view.
>> >
>> > Cheers
>> > Macca
>> >
>> >
>> > "Dave" wrote:
>> >
>> >> Add a TreeView to the Form and set it's Dock property to DockStyle.Left.
>> >> Add a panel or a single control that will display the properties such as a DataGrid to the Form and set it's Dock property to
>> >> DockStyle.Fill.
>> >>
>> >> The splitter can be used if you want the TreeView to be resizable at runtime.
>> >>
>> >> --
>> >> Dave Sexton
>> >> dave@www..jwaonline..com
>> >> -----------------------------------------------------------------------
>> >> "Macca" <(E-Mail Removed)> wrote in message news:A2580074-4BE5-4B75-9988-(E-Mail Removed)...
>> >> > Hi,
>> >> >
>> >> > I am developing an app which i want to have same style of GUI as the .NET
>> >> > Configuarion tool. i.e menus at top,rest of dialog dialog split into two with
>> >> > a tree like structure on the left and when item is selected on it, its
>> >> > contents are displayed on the right hand side.
>> >> >
>> >> > I'm not sure how to achieve this( maybe using splitter control with treeview)
>> >> >
>> >> > I'd appreciate any suggestions that could help me do the above
>> >> >
>> >> > Thanks In Advance
>> >> > Macca
>> >>
>> >>
>> >>
>>
>>
>>