yet another design question

[chris128]

OK so I've been writing this application (see image below) using winforms for the last few months and I have decided to start to re-write it in WPF.

Winforms version:


As you can see, I basically use the TreeView on the left as the navigation menu, and when a node is clicked the related panel is loaded into the main part of the form. The way I'm doing this is by creating a UserControl for each of the sections of my app that each of the treenodes relate to, and then when a node is clicked I just remove all controls from the main container and then add a new instance of the necessary usercontrol. Probably not the most elegant solution but it works fine.

Now although I could probably get away with doing the same thing in WPF, I'm just wondering if anyone has any suggestions for a 'better' way to do this? I mean, does WPF have some navigation control that would be better suited to this than a TreeView? (I notice MDI is not supported in WPF so there goes that idea! :P ) And is there a better way than to just keep removing and adding usercontrols/panels for each of the sections?

Thanks
Chris

[DeanMc]

Maybe pages would be better suited for what you describe.

[vbNeo]

Maybe pages would be better suited for what you describe.

Exactly. Use a Frame for the content(which is currently usercontrols), and create pages instead. WPF Frames have an excellent NavigationManager(I think it might actually be static) that helps you control the show.

Be aware any Silverlight users that SL does NOT have this control, and you have to h4x your way out of it(which is very doable ).

[chris128]

So why would the Page be any better if all I am doing is just sticking a frame in it and then swapping usercontrols in and out of that frame? Or am I misunderstanding

[vbNeo]

So why would the Page be any better if all I am doing is just sticking a frame in it and then swapping usercontrols in and out of that frame? Or am I misunderstanding

You are misunderstanding. You should use the frame to navigate Pages, not usercontrols.

[DeanMc]

Remember User Controls where never meant to group functionality together in that way. They where meant for complex custom controls that need more than one piece of data from the UI to be sent to the same class. So using them the way you are using them now is a hack. One that everyone uses but a hack never the less. This is why its so awkward to navigate between user controls.Pages on the other had where built for displaying grouped functionality and made easy to navigate with the frame.

[chris128]

Ahhh I see. So I still have a window as the main container for all of this, but then inside my window I have a frame which displays different pages depending on which part of the program I am in yeah?

[chris128]

Remember User Controls where never meant to group functionality together in that way. They where meant for complex custom controls that need more than one piece of data from the UI to be sent to the same class. So using them the way you are using them now is a hack. One that everyone uses but a hack never the less. This is why its so awkward to navigate between user controls.Pages on the other had where built for displaying grouped functionality and made easy to navigate with the frame.

Tis true, I will experiment with pages now and post back

[vbNeo]

Ahhh I see. So I still have a window as the main container for all of this, but then inside my window I have a frame which displays different pages depending on which part of the program I am in yeah?

Indeed .

[DeanMc]

You could always use a listbox, it can do everything else!.......... joking! (although the listbox can pretty much do anything)

[chris128]

haha yeah they are pretty neat but not right for this situation methinks :P

So I had a quick play around and I've got my test page (Page1 - original huh!) and a Frame control on my window (Frame1!), so I can do this when I want the frame to display page1

Frame1.NavigationService.Navigate(New Page1)

Thats fine, but I dont see any reference to this "Navigation Manager" thing that was mentioned so what do I actually use to display the different options? (the equivelant of my treeview menu in the winforms version)

[chris128]

Actually I think I will just have my own custom menu/navigation control, probably a listbox that just has a few images/text items in it with a WrapPanel or something as the containter. Then I can just have it as like a 'popup' menu that appears at the left of the window. I'll post some SCREENIES tonight when I get it going

[vbNeo]

By NavigationManager I mean the NavigationService - I never stated it was a layout control , you're supposed to build your own navigational UI.

[chris128]

Yeah thats what I'm going to do I want it to be hidden and then 'slide' into view when a button is clicked or when the mouse hovers near the left side of my app (like the toolbox does in VS). But if I have problems with that part I'll post it in a new thread

[chris128]

How's this for a navigation menu thing (to replace the treeview)?



When the mouse moves over item in the menu (which is a listbox... you know you love it Dean) that label text gets changed to the necessary description and a little animation increased the opacity of the image. You might not be able to see in the screenshot but that computer icon is a bit brighter than te others because thats the one my mouse was over (as you can see from the "Computers" label).

Oh and ignore the icons themselves, they are just placeholders for when I get some proper ones.

I'm not keen on the white background for all of the images but I tried a few other colours/gradients and they looked even worse..

[DeanMc]

Now thats nice!

[vbNeo]

I have to agree, that does look cool . Are you sure though, that you want to remove the functionality of the treeview completely?

The good thing about a treeview is that it's a Windows standard control. Now if the only reason you used it in the first place was because you could place images next to nodes, your new solution will work out great - but if the core treeview features were an integrated part of your design, maybe changing that's not a good idea?

Just throwing random thoughts at you .

[chris128]

Nah the only reason I used it was because it was an easy way to make a menu like you say with images next to the nodes. There was no code based around the treeview other than what happened when you clicked on a node, none of them were related to each other etc. So I think the new menu should be just fine
I've now made it so that its mostly hidden (and semi transparent) until you mouse over it and then it slides into view and the opacity increases
Just need to play around with the frame/page side of things a bit more now but I assume it should be fairly straight forward as only one page needs to be displayed at a time so they can all just operate in their own little self contained environment.

[chris128]

OK so I've got the menu sliding in nicely and its all working as it should but now I need to work on the actual pages that will be displayed within the frame. I need some way of indicating which section you are currently in, so I made this little 'glossy' looking title border (the "Call Logging" bit) and then you can see some placeholder content in there where the current calls are all going to be shown (with some fancy listbox action of course).
My question is, do you think having this extra title bar (the black glossy bit) is a bit over the top? I dunno, I just think when I look at it that with the main title bar at the top, then the main menu bit, then another title bar it seems too distracting and unnecessary.

Here's the example:



Oh and here's what happens when you mouse over that Main Menu bit (again, ignore the actual images!)



Any comments/suggestions?

[joebobfrank]

My only comment is that I dislike shadows. Maybe you could use shadows as a mouseover effect of something, but I'd have to say they look a little out of place.

The rest is looking pretty good though.

[vbNeo]

The content is to dark imo, other than that it looks great.

You should be aware, however, that the bitmap effects of WPF are pretty CPU intensive. I'm not sure, but I think everything's still rendered by the CPU and not the GPU.

[DeanMc]

Actually that depends on the PC, take a look at the how much eye candy can my user handle link in my sig!

[vbNeo]

Actually that depends on the PC, take a look at the how much eye candy can my user handle link in my sig!

Ahh yes, I remember reading about that somewhere. Silverlight's the one that isn't accelerated yet.

[DeanMc]

Correct and right!

[chris128]

You should be aware, however, that the bitmap effects of WPF are pretty CPU intensive. I'm not sure, but I think everything's still rendered by the CPU and not the GPU.

As Dean has pointed out, its all done by the GPU as long as its a PC that is rated Tier-2 by WPF.
However, you are correct in some respects as the BitmapEffects are resource hungry and will be removed from future versions of WPF. Which is exactly why I did not use them There are two effects in WPF that are NOT BitmapEffects, these are DropShadowEffect (which I used) and BlurEffect. Both of which are better performance wise and will be included in future versions

The content is to dark imo, other than that it looks great.

Which content are you talking about? Do you mean those example items in the listbox in the main frame - Job #2, #3 etc? If so, they are purely there as placeholders and will very very different in the finished thing.

[chris128]

Just to clarify - this is a very basic example of how the list items might end up looking:



Albeit with a little better presentation and more info but you get the idea

[DeanMc]

It looks nice, how much of the business logic is done though!? ha ha!

[chris128]

some of it... haha

Here's the latest version - what do you think? Do you think the jobs need to be separated/defined a little more as to me it is a bit too much text all in one place when you first open the app up but I dont know if thats just me..



As you can see, when you click on an item in the listbox to select it, more information is shown for that job (at the moment it just makes the "Last Update" section visible)