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.
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.
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:
Public Overrides ReadOnly Property ButtonHeight() As Integer
Get
End Get
End Property
Public Overrides ReadOnly Property DropdownIcon() As System.Drawing.Icon
Get
End Get
End Property
Public Overrides ReadOnly Property Font() As System.Drawing.Font
Get
End Get
End Property
Public Overrides ReadOnly Property GripHeight() As Integer
Get
End Get
End Property
Public Overrides ReadOnly Property GripIcon() As System.Drawing.Icon
Get
End Get
End Property
Public Overrides ReadOnly Property SmallButtonContainerLeftMargin() As Integer
Get
End Get
End Property
Public Overrides ReadOnly Property SmallButtonWidth() As Integer
Get
End Get
End Property
Public Overrides Sub DrawBottomLine(ByVal g As System.Drawing.Graphics)
End Sub
Public Overrides Sub DrawButton(ByVal g As System.Drawing.Graphics, ByVal item As OutlookBarLibrary.Controls.OutlookBarItem, Optional ByVal isLargeLast As Boolean = False)
End Sub
Public Overrides Sub DrawDropdownRectangle(ByVal g As System.Drawing.Graphics)
End Sub
Public Overrides Sub DrawGripRectangle(ByVal g As System.Drawing.Graphics)
End Sub
Public Overrides Sub DrawSmallButtonContainer(ByVal g As System.Drawing.Graphics, ByVal rect As System.Drawing.Rectangle)
End Sub
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:
Public Overrides Sub DrawSmallButtonContainer(ByVal g As System.Drawing.Graphics, ByVal rect As System.Drawing.Rectangle)
If Me.OutlookBar.SelectedButton Is Nothing Then
'...
End If
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:
Public Class Form1
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
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:
Public ReadOnly Property GripColorBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.GripColorBottom
Get
End Get
End Property
Public ReadOnly Property GripColorTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.GripColorTop
Get
End Get
End Property
Public ReadOnly Property GripTopLineColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.GripTopLineColor
Get
End Get
End Property
Public ReadOnly Property HoveringButtonBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.HoveringButtonBottom
Get
End Get
End Property
Public ReadOnly Property HoveringButtonTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.HoveringButtonTop
Get
End Get
End Property
Public ReadOnly Property HoveringSelectedButtonBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.HoveringSelectedButtonBottom
Get
End Get
End Property
Public ReadOnly Property HoveringSelectedButtonTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.HoveringSelectedButtonTop
Get
End Get
End Property
Public ReadOnly Property LineColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.LineColor
Get
End Get
End Property
Public ReadOnly Property PassiveButtonBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.PassiveButtonBottom
Get
End Get
End Property
Public ReadOnly Property PassiveButtonTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.PassiveButtonTop
Get
End Get
End Property
Public ReadOnly Property SelectedButtonBottom() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.SelectedButtonBottom
Get
End Get
End Property
Public ReadOnly Property SelectedButtonTop() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.SelectedButtonTop
Get
End Get
End Property
Public ReadOnly Property SelectedTextColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.SelectedTextColor
Get
End Get
End Property
Public ReadOnly Property TextColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.TextColor
Get
End Get
End Property
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:
Public ReadOnly Property LineColor() As System.Drawing.Color Implements OutlookBarLibrary.Renderers.ColorTables.IOffice2003ColorTable.LineColor
Get
Return Color.FromArgb(222, 111, 193)
End Get
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:
Public Class Form1
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
OutlookBar1.Renderer = New OutlookBarLibrary.Renderers.Office2003Renderer(New CustomColorTable)
End Sub
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.
Re: Outlook Navigation Bar - With Design-time support and custom Renderers
Originally Posted by coolcurrent4u
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
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.
Re: Outlook Navigation Bar - With Design-time support and custom Renderers
Originally Posted by weirddemon
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.