Results 1 to 21 of 21

Thread: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Hi,

    Here is a nice Work In Progress for you: a ToolStripRenderer that will make your ToolStrip look like the Vista toolstrip equivalent.

    Screenshots:


    Comparison pic (top is mine, bottom is actual Vista):



    As you may see, there are still lots of things I have to improve on, for example the colors are still a little off, as is the white gradient from the bottom to the dark blue middle.
    Also, the size of the buttons seems to be a little small.
    Finally the actual Vista toolstrip has a blurred shadow underneath the text on the buttons. I have not figured out yet how to blur the text (does anyone know?) but once I do I can add it pretty quickly.


    The VistaToolStripRenderer class is attached.
    Usage: Add the class file to your project, then use the following code (in the Form_Load event of the form hosting the ToolStrip) to set the Renderer property of the ToolStrip:
    Code:
    MyToolStrip.Renderer = New clsVistaToolStripRenderer


    Note that this is still a WIP so I shall update this when I find the time. In the meantime, please feel free to download it and adapt it for your own use. If you manage to make it look even closer or add some new functionality don't hesitate the post it here and I will include it!
    Attached Files Attached Files

  2. #2
    PowerPoster JuggaloBrotha's Avatar
    Join Date
    Sep 2005
    Location
    Lansing, MI; USA
    Posts
    4,286

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Do you have any screen shots of it working on XP?
    Currently using VS 2015 Enterprise on Win10 Enterprise x64.

    CodeBank: All ThreadsColors ComboBoxFading & Gradient FormMoveItemListBox/MoveItemListViewMultilineListBoxMenuButtonToolStripCheckBoxStart with Windows

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    No, I have not. I might get some soon but I am almost certain that (at least in this stage) it will not look well on XP.
    The reason for that is because the 'button backgrounds' are the standard ToolStrip button backgrounds. There is no additional painting in the OnRenderButtonBackground override simply because I noticed the standard ToolStrip button background (on VISTA!) is the same as the button background the actual vista toolstrips use.

    Since the button backgrounds are probably very different on XP I am certain it will look different, and you will have to custom draw the button backgrounds aswell.

  4. #4
    Addicted Member
    Join Date
    Jun 2008
    Location
    Macedonia
    Posts
    188

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    This is on Win Xp.

  5. #5

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    As I expected, the background which is custom rendered draws fine, but the buttons render like XP renders them on default, because there is no custom drawing done there. (I didn't do that because the standard Vista ToolStripButton background is the same as the buttons used in these 'special' toolstrips (possibly even exactly the same).

    If I find the time to continue with this control (custom drawing takes a lot of patience, finding the right colors and 'sizes' and stuff.. ) I'll try to do the button backgrounds custom drawn too, that will make it work on XP better.

  6. #6
    Addicted Member
    Join Date
    Jun 2008
    Location
    Macedonia
    Posts
    188

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Any way very good project

  7. #7
    Ex-Super Mod RobDog888's Avatar
    Join Date
    Apr 2001
    Location
    LA, Calif. Raiders #1 AKA:Gangsta Yoda™
    Posts
    60,710

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Good work there Nick. Keep at it
    VB/Office Guru™ (AKA: Gangsta Yoda®)
    I dont answer coding questions via PM. Please post a thread in the appropriate forum.

    Microsoft MVP 2006-2011
    Office Development FAQ (C#, VB.NET, VB 6, VBA)
    Senior Jedi Software Engineer MCP (VB 6 & .NET), BSEE, CET
    If a post has helped you then Please Rate it!
    Reps & Rating PostsVS.NET on Vista Multiple .NET Framework Versions Office Primary Interop AssembliesVB/Office Guru™ Word SpellChecker™.NETVB/Office Guru™ Word SpellChecker™ VB6VB.NET Attributes Ex.Outlook Global Address ListAPI Viewer utility.NET API Viewer Utility
    System: Intel i7 6850K, Geforce GTX1060, Samsung M.2 1 TB & SATA 500 GB, 32 GBs DDR4 3300 Quad Channel RAM, 2 Viewsonic 24" LCDs, Windows 10, Office 2016, VS 2019, VB6 SP6

  8. #8
    New Member
    Join Date
    Jan 2006
    Posts
    5

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Not true my friend, you CAN custom paint (draw) the button backgrounds.

    To custom draw a ToolStripButton, create code in OnRenderButtonBackGround
    To custom draw a ToolStripDropDown, create code in OnRenderDropDownBackGround

    and also, I noticed in your class code that you create code in the overrides for OnRenderToolStripPanelBackground. You do realize the ToolStirpContentPanel is the ContentPanel on a ToolStripContainer right? It is not actually part of the ToolStrip itself? And that if you are not hosting the toolstrip in the ToolStripContainer that the code does nothing?

    Other usefull information:

    All toolstrip buttons, labels, progressbars, splitbuttons, et al...are all inherit ToolStripItem. If you want to create custom labels, butons, images etc... you can create a class which inherits the ToolStripItem.

    One exemption to this is the ToolStripProgress Bar which is inherits a ToolStripControlHost.

    You can custom paint any and ALL controls and the toolstrip and the ToolStrip's Container.

    If you need help, let me know,

    P.S. Rendering theese controls does NOT take a lot of time, you already have the basic Gradients understood. If you notice, the ToolStripRenderer is not the only toolstrip class you can use. Try the ToolStripProfessionalRenderer instead, it is almost identical except it allow you to round the corners of the toolstrip automatically, and it hold a color table which you can load/set values into instead of declaring custom color values through variable, also, the color table itself has a derived class you can use to create more color tables. Pretty cool.. check it out...
    Last edited by eddie74; Feb 17th, 2009 at 03:01 PM.

  9. #9

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    I know I CAN paint on the button backgrounds, but there was no need on Vista because they already look exactly the same (as far as I can tell) without custom drawing them. It's a different story in XP ofcourse.

    Obviously I did not realize the code is not doing anything, otherwise I wouldn't have put it there
    Can you explain that part further? I don't really understand?
    Do you mean that the code paints on the ToolStripContainer if the ToolStrip is hosted in one?

  10. #10
    New Member
    Join Date
    Jan 2006
    Posts
    5

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Or if you need me to post a clas file thats OK also.

  11. #11
    New Member
    Join Date
    Jan 2006
    Posts
    5

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Yes, for example the ToolStripContainer has 5 sub controls in it. The TopPanel, BottomPanel, LeftPanel and RightPanel, and the ContentPanel.
    The Top, Bottom, Left, and Right panels host ToolStrips, while the ContentPanel can host any control. This is what the Overrides sub OnRenderToolStripPanelBackground allows you to custom draw.

    The ToolStripContainer has a Renderer property exactly like the toolstrips do. You can create custom renderer for them also exactly as you have done for the ToolStrips in your clsVistaRenderers. But without actually having toolstrip in them.

    In your code, you created overrides methods for the OnRenderToolStripPanelBackground(ByVal e As System.Windows.Forms.ToolStripPanelRenderEventArgs)

    This code will ONLY get executed if you place a ToolStripContainer on your parent form and then place the toolstrip in one of the Panels on the ToolStripContainer.

    When you override this method, it overrides what ever Panel of the toolstripcontainer that houses the toolstrip you are custom rendering and then the code will execute.

    Here is the flow:

    Parent Form --> ToolStripContainer --> ToolStripPanel --> ToolStrip --> ToolStripItem.

    - OR IF YOU ARE NOT USING A ToolStripContainer -

    Parent Form --> ToolStrip --> ToolStripItem

    Believe it or not, I created an entire multimedia application from just a form and ToolStripContainers and ToolStrips in which I custom rendered everything.

    Why?

    Because if you doublebuffer the graphics on the parent form, the Custom Renderers produce alomost NO FLICKER or ARTIFACTS. It looks abaolutely beautiful!

    Another cool advantage?

    The code executes lightning fast AND you can create controls with tranceparency and alpha!

    You can also control the parent controls such as the actual toolbar, its items, and the parent form from inside the clsVistaRenderers that you created!

    For example try this.

    In your class:

    Private WithEvents ParentToolStrip as ToolStrip

    Now in the overrides sub for Initialize, the EventArgs (e) holds a reference to the toolstrip. Assign the toolstrip to your declared withevents toolstrip like this:

    (This is the code from your class)

    Protected Overrides Sub Initialize(ByVal toolStrip As System.Windows.Forms.ToolStrip)

    me.ParentToolStrip = toolstrip

    MyBase.Initialize(toolStrip)

    toolStrip.AutoSize = False
    toolStrip.Height = 32
    toolStrip.ForeColor = Color.White
    toolStrip.Padding = New Padding(5, 2, 5, 2)

    End Sub

    Now guess what? You can hook all the events from the actual toolstrip you are rendering!

    For example, you can place code in the Resize() code handler and use it to get the width of the ToolStrip to center text on your labels on the ToolStrip, create custom springing controls, center the toolbar on the parent control, resize controls to avoid them overflowing...etc.

    All of this may seem very complex but in fact if all windows controls were designed like the base classes for the ToolStripRenderer classes are, we could do amazing graphics inside of vb.

    By the way, I don't know if you are aware of this or not, but there are three classes of ToolStripRender

    they are:

    ToolStripRenderer
    ToolStripSystemRenderer
    ToolStripProfessionalRenderer

    The ProfessionalRenderer is the best bet if you want to create Vista Style Controls, because at its core it has a ColorTable property which accepts a ColorTable that hold all of the color required to render the toolstrip. This class also can be overriden and custom colors can be place into it and loaded into the ToolStripRenderer, there by allowing color changes to the toolbar at runtime exactly like Windows Media Player does.

    And yet another class the ToolStripManager accepts a Renderer also, then each toolstrip in theToolStripManager renders exactly the same, withen the entire parent form. You can also use the ToolStripManager to merge toolstrips, menu strips, context menus, etc. AND the ToolStripManager automatically saves and restores EVERYTHING about the ToolStrips, Menus, etc. (position, size, colors, renderss, text, visible / hidden items...)


    If you need any help, please let me know.
    Last edited by eddie74; Feb 19th, 2009 at 03:24 PM.

  12. #12

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Thanks for clearing all that up, but I don't see myself using it in the near future. I just wanted to make a quick start on a vista toolstrip control appearance and managed it as far as I required at the time. I decided to post the code here if anyone needed it. If I ever find the need to expand this I will probably post it here again.

  13. #13
    New Member
    Join Date
    Jan 2006
    Posts
    5

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Cool.

  14. #14
    PowerPoster JuggaloBrotha's Avatar
    Join Date
    Sep 2005
    Location
    Lansing, MI; USA
    Posts
    4,286

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Now that I've gotten into using this control for a new app I'm working on I've noticed a couple of quirks with it. If you have both Text and Image showing then the Text below the image displays fine but the image itself is squished like the ToolStrip itself has a shorter height than the standard ToolStrip.

    I've also noticed that if you have a DropDown Button on the ToolStrip the background gradient on the DropDown Menu is god-awful. Each menu item has the light green on the top half and the dark green on the bottom half, it looks weird, if they all had a solid color instead of each one with a gradient it would remove the Dark & Light green lines.

    Here's a screenshot of both issues I'm talking about:
    Attachment 75051
    The 2nd ToolStrip in that screen shot is the regular one in the Framework with the same icons and text to show how it's normally rendered.
    Last edited by JuggaloBrotha; Jun 30th, 2010 at 03:05 PM.
    Currently using VS 2015 Enterprise on Win10 Enterprise x64.

    CodeBank: All ThreadsColors ComboBoxFading & Gradient FormMoveItemListBox/MoveItemListViewMultilineListBoxMenuButtonToolStripCheckBoxStart with Windows

  15. #15

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Yeah, as I said it is stlil a work in progress, and sadly I have never finished it. I may still finish it at a later stage but it's starting to look like a dying project, sorry! But you got the code, so you can try to finish it yourself. If you do I can help you if you get stuck somewhere, and you're free to post the new version if you want!

  16. #16
    PowerPoster JuggaloBrotha's Avatar
    Join Date
    Sep 2005
    Location
    Lansing, MI; USA
    Posts
    4,286

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    I just might do that, I dunno when I'll get to it but if I do I'll post it here. Right now I'm using the Office2003Blue from your other thread in the app, it goes nicely with the clsMenuRenderer you've got in a 3rd thread here.
    Currently using VS 2015 Enterprise on Win10 Enterprise x64.

    CodeBank: All ThreadsColors ComboBoxFading & Gradient FormMoveItemListBox/MoveItemListViewMultilineListBoxMenuButtonToolStripCheckBoxStart with Windows

  17. #17

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Which menu renderer? Just so you know, I also added a customizable MenuStrip to my customizable Toolstrip submission. It works in the same way so you can have your MenuStrip use the Office2003Blue style for the MenuStrip too.

  18. #18
    Lively Member
    Join Date
    Nov 2009
    Posts
    76

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    K, Here is the Pic of what it looks like for me. How do you get it to look the way pictured at the top?

    Thanks!
    E
    Attached Images Attached Images  
    Last edited by Matchlighter; Apr 15th, 2010 at 07:57 PM. Reason: Rewording

  19. #19
    Lively Member
    Join Date
    Nov 2009
    Posts
    76

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Hey, I got my problem figured out. I also made a Couple of Improvements (I do Hope I am not stepping on your ground, Nick) Anyway, I just fixed it up so that its size does not have to be 32px. Not a large change but, I think it would be quite useful I tried fixing the Dropdown problem but to no avail.

    E
    Attached Files Attached Files
    If I helped you in any way, please add to my reputation

    Controls:
    Vista/7 Style Progress Bar

  20. #20

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Quote Originally Posted by Matchlighter View Post
    Hey, I got my problem figured out. I also made a Couple of Improvements (I do Hope I am not stepping on your ground, Nick) Anyway, I just fixed it up so that its size does not have to be 32px. Not a large change but, I think it would be quite useful I tried fixing the Dropdown problem but to no avail.

    E
    No problem, I'm posting this so anyone can use and improve it. Thanks

  21. #21
    Lively Member
    Join Date
    Nov 2009
    Posts
    76

    Re: [WIP] Custom Vista-style (blue/green) ToolStripRenderer

    Hey, I was looking through some other renders that support the other Items in the Toolstrip family. I added some more things to what I posted above including Support for Context Menus, DropDowns and MenuBars. I made the Context menus look similar to those in Vista. I also made the menu strip look like the ones in Vista. I hope you like it!

    E
    Attached Files Attached Files
    If I helped you in any way, please add to my reputation

    Controls:
    Vista/7 Style Progress Bar

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width