Results 1 to 7 of 7

Thread: Outlook Navigation Bar - With Design-time support and custom Renderers

  1. #1

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

    Outlook Navigation Bar - With Design-time support and custom Renderers

    Hi,

    I have always wanted to create an Outlook style navigation bar but never really got around to doing it. Recently I found this excellent project by someone called Star Vega. I've not been able to contact him, so if you happen to read this: thanks!

    I used the control I linked to as a 'template' for my control. It has no design-time editing, and does not show different panels so you need to handle that all yourself. I mainly used the drawing code of that control and then built a completely new control from that.

    My control does give you a rich design-time experience. When you add a button, it automatically adds a panel above the buttons to which you can add any control you like during design-time. You can click the buttons (during design-time too) and the corresponding panel will be shown. So it behaves more or less like a TabControl, except that it looks quite different.




    As you can see the OutlookBar can draw itself in different ways. It has a RendererPreset property which you can set to Office2003Blue or Office2007Blue, which are the two styles shown in screenshot above.
    However, that is not all. You can completely customize the OutlookBar in two ways:
    (1) By creating a custom OutlookBarRenderer
    (2) By creating a custom Office2003ColorTable or Office2007ColorTable.

    Option (1) gives you complete control on drawing everything.
    Option (2) gives you the option of only changing the colors that an Office2003 or Office2007 style renderer uses. This is a much easier approach if you want some minor customization, but it is also limited because you cannot change shapes / sizes of anything (use option 1 for that!).

    Click the links for a guide on how to do this.



    When the dropdown icon is clicked, a ContextMenuStrip is shown with some options, such as the Navigation Pane Options window:



    By the way, the ContextMenuStripRenderer property allows you to specify a custom ToolStripRenderer for this context menu so you can match its looks to the correct color scheme if you want.



    I think that is about it. I invite you to take a look at the source. It's not littered with comments, but the more difficult parts have some clarifying comments in them. Also, all objects are in their own namespace. Controls are in the OutlookBarLibrary.Controls namespace, Renderers in the Renderers namespace, etc, so it should all be easy to find.

    I have not had an awful lot of time to debug this so I'm sure there are some bugs. If you find any, please report them in this thread and I'll see if I can take care of them.

    VS2005 users: the project is a VS2008 project so you won't be able to open it (I think). You could try to add the files to a new (Windows Forms Control Library) project manually, but I think I may have used some VS2008-only stuff like Option Infer here and there. If you get any errors you cannot solve yourself, again leave a post here and I'll try to help.


    Usage:
    Download the attached project. Add it to a solution you want to use it in. Build the solution. Find the OutlookBar control in your toolbox and drag it to your form.

    Enjoy!!
    Attached Files Attached Files

  2. #2

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

    Re: Outlook Navigation Bar - With Design-time support and custom Renderers

    Creating your own OutlookBarRenderer
    To create a completely custom renderer for the OutlookBar control, follow the following steps:

    1. Create a new class and have it inherit OutlookBarRenderer.
    You will notice immediately that there are some properties and methods that you must override and write your own implementation for:
    vb.net Code:
    1. Public Class CustomRenderer
    2.     Inherits OutlookBarLibrary.Renderers.OutlookBarRenderer
    3.  
    4.     Public Overrides ReadOnly Property ButtonHeight() As Integer
    5.         Get
    6.  
    7.         End Get
    8.     End Property
    9.  
    10.     Public Overrides ReadOnly Property DropdownIcon() As System.Drawing.Icon
    11.         Get
    12.  
    13.         End Get
    14.     End Property
    15.  
    16.     Public Overrides ReadOnly Property Font() As System.Drawing.Font
    17.         Get
    18.  
    19.         End Get
    20.     End Property
    21.  
    22.     Public Overrides ReadOnly Property GripHeight() As Integer
    23.         Get
    24.  
    25.         End Get
    26.     End Property
    27.  
    28.     Public Overrides ReadOnly Property GripIcon() As System.Drawing.Icon
    29.         Get
    30.  
    31.         End Get
    32.     End Property
    33.  
    34.     Public Overrides ReadOnly Property SmallButtonContainerLeftMargin() As Integer
    35.         Get
    36.  
    37.         End Get
    38.     End Property
    39.  
    40.     Public Overrides ReadOnly Property SmallButtonWidth() As Integer
    41.         Get
    42.  
    43.         End Get
    44.     End Property
    45.  
    46.     Public Overrides Sub DrawBottomLine(ByVal g As System.Drawing.Graphics)
    47.  
    48.     End Sub
    49.  
    50.     Public Overrides Sub DrawButton(ByVal g As System.Drawing.Graphics, ByVal item As OutlookBarLibrary.Controls.OutlookBarItem, Optional ByVal isLargeLast As Boolean = False)
    51.  
    52.     End Sub
    53.  
    54.     Public Overrides Sub DrawDropdownRectangle(ByVal g As System.Drawing.Graphics)
    55.  
    56.     End Sub
    57.  
    58.     Public Overrides Sub DrawGripRectangle(ByVal g As System.Drawing.Graphics)
    59.  
    60.     End Sub
    61.  
    62.     Public Overrides Sub DrawSmallButtonContainer(ByVal g As System.Drawing.Graphics, ByVal rect As System.Drawing.Rectangle)
    63.  
    64.     End Sub
    65.  
    66. End Class


    2. Let the properties return the values you require. For example, if you need your buttons to be only 5 pixels high, you return 5 in the ButtonHeight property.

    3. Write your own drawing implementation in the Draw___ methods. Use the graphics object provided (g) to do the drawing. Some methods pass some more information. For example, the DrawButton method, which should draw the button corresponding to some item, will pass the item to draw, and a value whether the button is large or small at that time.

    Note: if you need some more information from the parent OutlookBar control, the OutlookBarRenderer has an OutlookBar field that you can use. For example:
    vb.net Code:
    1. Public Overrides Sub DrawSmallButtonContainer(ByVal g As System.Drawing.Graphics, ByVal rect As System.Drawing.Rectangle)
    2.         If Me.OutlookBar.SelectedButton Is Nothing Then
    3.             '...
    4.         End If
    5.     End Sub


    The following image will help you determine which values to return for the properties, and what parts you need to draw in the drawing methods. This image is also included in the download in the first post.



    4. When finished, assign a new instance of your renderer class to the Renderer property of the OutlookBar, preferably in the form constructor or Form_Load event:
    vb.net Code:
    1. Public Class Form1
    2.  
    3.     Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    4.         OutlookBar1.Renderer = New CustomRenderer
    5.     End Sub
    6.  
    7. End Class

    5. That's it!

  3. #3

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

    Re: Outlook Navigation Bar - With Design-time support and custom Renderers

    Creating a custom Office2003/2007ColorTable

    If you like the Office2003 or Office2007 renderers, but you want to change the colors used, then you don't need to create a completely custom renderer. All you need to do is create a ColorTable and pass it to the constructor of the provided Office2003/2007Renderers.

    To create a new ColorTable, follow these steps:

    1. Create a new class and have it implement the IOffice200xColorTable interface, where x is the version you like (3 or 7). The only difference between 2003 and 2007 is the highlighting on the buttons: in 2003 each button has only two colors, where in 2007 there are four colors.

    You will notice that you'll need to implement a large set of color properties:
    vb.net Code:
    1. Public Class CustomColorTable
    2.     Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable
    3.  
    4.     Public ReadOnly Property GripColorBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.GripColorBottom
    5.         Get
    6.  
    7.         End Get
    8.     End Property
    9.  
    10.     Public ReadOnly Property GripColorTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.GripColorTop
    11.         Get
    12.  
    13.         End Get
    14.     End Property
    15.  
    16.     Public ReadOnly Property GripTopLineColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.GripTopLineColor
    17.         Get
    18.  
    19.         End Get
    20.     End Property
    21.  
    22.     Public ReadOnly Property HoveringButtonBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.HoveringButtonBottom
    23.         Get
    24.  
    25.         End Get
    26.     End Property
    27.  
    28.     Public ReadOnly Property HoveringButtonTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.HoveringButtonTop
    29.         Get
    30.  
    31.         End Get
    32.     End Property
    33.  
    34.     Public ReadOnly Property HoveringSelectedButtonBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.HoveringSelectedButtonBottom
    35.         Get
    36.  
    37.         End Get
    38.     End Property
    39.  
    40.     Public ReadOnly Property HoveringSelectedButtonTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.HoveringSelectedButtonTop
    41.         Get
    42.  
    43.         End Get
    44.     End Property
    45.  
    46.     Public ReadOnly Property LineColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.LineColor
    47.         Get
    48.  
    49.         End Get
    50.     End Property
    51.  
    52.     Public ReadOnly Property PassiveButtonBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.PassiveButtonBottom
    53.         Get
    54.  
    55.         End Get
    56.     End Property
    57.  
    58.     Public ReadOnly Property PassiveButtonTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.PassiveButtonTop
    59.         Get
    60.  
    61.         End Get
    62.     End Property
    63.  
    64.     Public ReadOnly Property SelectedButtonBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.SelectedButtonBottom
    65.         Get
    66.  
    67.         End Get
    68.     End Property
    69.  
    70.     Public ReadOnly Property SelectedButtonTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.SelectedButtonTop
    71.         Get
    72.  
    73.         End Get
    74.     End Property
    75.  
    76.     Public ReadOnly Property SelectedTextColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.SelectedTextColor
    77.         Get
    78.  
    79.         End Get
    80.     End Property
    81.  
    82.     Public ReadOnly Property TextColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.TextColor
    83.         Get
    84.  
    85.         End Get
    86.     End Property
    87. End Class

    2. Implement the properties by returning the color you like. For example, if you want the lines to have an RGB color of (222, 111, 193), you use
    vb.net Code:
    1. Public ReadOnly Property LineColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.LineColor
    2.         Get
    3.              Return Color.FromArgb(222, 111, 193)
    4.         End Get
    5.     End Property

    To determine which property corresponds to which part of the OutlookBar, here is a guide you can use. This image is also included in the download in the first post:




    3. When finished, use the Form_Load event (or form constructor) to create a new instance of the Office200xRenderer (where again x is either 3 or 7). Then pass a new instance of your custom ColorTable to its constructor:
    vb.net Code:
    1. Public Class Form1
    2.  
    3.     Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    4.         OutlookBar1.Renderer = New OutlookBarLibrary.Renderers.Office2003Renderer(New CustomColorTable)
    5.     End Sub
    6.  
    7. End Class
    Obviously, if the color table implements the IOffice2003ColorTable interface, you create a new instance of the Office2003Renderer, and if the color table implements the IOffice2007ColorTable interface, you create a new instance of the Office2007Renderer.


    4. That's it!



    Alternatively, if you only wish to change a few colors and use the Office2003Blue or Office2007Blue colors for the rest, then you can inherit the Office2003BlueColorTable or Office2007BlueColorTable. You then have the option of overriding any of the color properties and return your own value; the other colors will remain unchanged. You then use this class as in step 3.

  4. #4
    Fanatic Member coolcurrent4u's Avatar
    Join Date
    Apr 2008
    Location
    *****
    Posts
    990

    Re: Outlook Navigation Bar - With Design-time support and custom Renderers

    how do i use it in vb2005?
    Programming is all about good logic. Spend more time here


    (Generate pronounceable password) (Generate random number c#) (Filter array with another array)

  5. #5
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,346

    Re: Outlook Navigation Bar - With Design-time support and custom Renderers

    Quote Originally Posted by coolcurrent4u View Post
    how do i use it in vb2005?
    You could try adding the original forms into a new VB2005 project and see if that works.
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    https://get.cryptobrowser.site/30/4111672

  6. #6
    Wait... what? weirddemon's Avatar
    Join Date
    Jan 2009
    Location
    USA
    Posts
    3,828

    Re: Outlook Navigation Bar - With Design-time support and custom Renderers

    Nick, your custom controls are flippin' amazing. Every time I see one of your controls, I think you've out done yourself and you can't possible create anything more awesome. And then you do. Keep up the good work.

    You're awesome
    CodeBank contributions: Process Manager, Temp File Cleaner

    Quote Originally Posted by SJWhiteley
    "game trainer" is the same as calling the act of robbing a bank "wealth redistribution"....

  7. #7

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

    Re: Outlook Navigation Bar - With Design-time support and custom Renderers

    Quote Originally Posted by weirddemon View Post
    Nick, your custom controls are flippin' amazing. Every time I see one of your controls, I think you've out done yourself and you can't possible create anything more awesome. And then you do. Keep up the good work.

    You're awesome
    Thanks, that's always good to hear

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