StrataFrame Forum

Soutlook Style sidebar and tabs

http://forum.strataframe.net/Topic25733.aspx

By Coolbreeze - 2/2/2010

Hello one and all

I am new here and so I am seeking your help. How would I be able to get an outlook style sidebar as attached done in strataframe? If anyone have the sample code it would be appreciated.

Also, how are tabs done in strataframe?

By Trent L. Taylor - 2/2/2010

There are a number of different approaches including using 3rd party controls.  But I would recommend looking at the ThemedLinkMenu as it was designed on this premise though it functions a little differently.   You might take a look at the ThemedLinkMenu samples.  This might get the creative juices flowing as this is a very versatile control that covers a lot of ground.
By Greg McGuffey - 2/2/2010

There is a Tab control that comes with .NET. I've not had good luck with it (it tends to rearrange the controls within itself under, as yet, unknown situations...a real pain). I'm moving to using the ThemedLinkMenu instead of tabs. It works well and looks nice/modern. It is designed to work directly with a PanelManager, so it is very easy to set it up to handle this sort of navigation.



Likely, with a bit of creative thought and some work, you could create you're own outlook control as a user control. I might try a PanelManager and a set of buttons. Making it generic (i.e. with a configurable number of buttons) and with nice designer support would likely be a bit more work, but to create one specifically for you needs might not be too bad.



Hope that sparks some ideas! BigGrin
By Teddy Jensen - 2/2/2010

I use the ThemedLinkMenu as sidebar for navigation in my applications. In the attached screenshot I have used a ThemedSplitContainer and two ThemedLinkMenus to get a somewhat similar look, and still only use the Strataframe controls.

The menu captions are in Danish, but hopefully You can get some inspiration.

/Teddy

By Greg McGuffey - 2/3/2010

As I thought about this more, using a UserControl is overkill. Then I see Teddy's post, which is very close to what I was thinking. BigGrin As Teddy suggested just build it on the form and I'd do it very similar to how Teddy is doing it.



I'd start with a ThemedPanel to hold everything else, and to make resizing of the entire set of controls easy.



Then I'd try adding how ever many labels I needed for buttons (I think I'd get more control over formatting of the labels than buttons...but buttons could work too). I'd dock these controls to the bottom.



Then I'd add a PanelManager and dock it to fill.



For each button, add a page to the Panel Manager. Add code in Click event handler of each button to show the appropriate page.



Finally, on each page add a ThemedLinkMenu and add appropriate items. Then add handlers to those items to actually do what you need done.



Hopefully that made sense and will get you started!
By Coolbreeze - 2/3/2010

Coolbreeze (02/02/2010)
Hello one and all

I am new here and so I am seeking your help. How would I be able to get an outlook style sidebar as attached done in strataframe? If anyone have the sample code it would be appreciated.

Also, how are tabs done in strataframe?

 

Hi Teddy

Yes, I can work with this. But can a tree style be added to it? I konow you may ask why I ned tree style. It is because the system will have many menu items and sub items. So  tree style is very much best for me to work with.

Give me your ideas.

Rudolph

By Trent L. Taylor - 2/3/2010

You cannot embed controls in the ThemedLinkMenu which is what I think you are getting at. However, might I suggest just using a Flow Layout Panel and the new (still beta) StrataFrame Collapsable Container. I think that this will give you exactly what you want as you can create collections of the Collapsable Containers and link them together. I will try to put a quick sample together for you.
By Coolbreeze - 2/3/2010

Thank Trent

That is much appreciated.

Rudolph

By Trent L. Taylor - 2/3/2010

Ok, here is a really quick and dirty sample, but it should at least give you an idea of how to use the Collapsible Containers.  We will release a full featured sample once this control is 100% released, but this will give you a good idea of what you can do.

By Coolbreeze - 2/3/2010

Hi Trent

Thanks for the sample. Yes, this is almost what i am looking for.
Will this be able to have the main menu items at the bottom just as the outlook style?
How soon will it released?

By Trent L. Taylor - 2/3/2010

Let's work backwards.  You can use it now and if you run across anything let us know and we will address it.  We are actually using this control extensively in our medical application and it has been working great.  We have some bells and whistles that are going to be added, but it is fair game now.  We will support it.

As for links at the bottom, you can do this using a ThemedContextMenu and get it just the way that you want it.  We also have a Popup control which allows you to put any user control in a popup like a combo drop down, but it could be anything you want.  So in this example, either would work, but the ThemedContextMenu strip would be faster.

By Teddy Jensen - 2/6/2010

As an alternative to Trents example You could expand my previous example with a PanelManager for the top panel of the ThemedSplitContainer. Link the PanelManager to the ThemedLinkMenu of the bottom panel. Create a page on the PanelManager for each link/button you have in the ThemedLinkMenu.

Then these pages can contain whatever controls you like. In the attached screenshots i have a ThemedLinkMenu for the Medarbejder (danish for Employee) page and a treeview for the Organization page. In the Page_Activated event of the PanelManager You can then set the title of the top GradientFormHeader to the selected page text.

This way You can still have the Menu items at the bottom as the Outlook style and some dynamic content in the top.

Hope that helps.

/Teddy

By Trent L. Taylor - 2/7/2010

Thanks for all of your help and comments, guys! Smile
By Coolbreeze - 2/7/2010

Thanks Teddy

Perfect. This could definately work. Also, thanks to you Tren.

Rudolph

By Coolbreeze - 2/7/2010

Hi Teddy

I been trying to design the last image you sent me with the employee tree but I am not getting it done. Could you give me some detailed instructions?

Rudolph

By Teddy Jensen - 2/7/2010

Hi Rudolph,

It is just a page on the PanelManager, that is activated when You click the Organization button on the ThemedLinkMenu.

On the page there is a TreeView with the Dock property set to Fill. You can populate the tree with what ever data you like. In my example for You, I just typed the nodes in.

/Teddy