Number of downloads: 1135
Download TaskPane control + source: TaskPane_Library_Source.zip (122.43K)
Number of downloads: 1656
(a custom task pane side-by-side with excel's)
Don't you just love the smooth look of Microsoft Office 2003? In .NET 2, they added the ability to make toolbars look like the Office toolbars. The only problem is, they didn't add a control to replicate a task pane (sidebar). This tutorial fixes that problem. If you like, you can download the task pane control i made with the above link. However, i didn't make it very customizable as it was only intended to be an example.
The first step is to create the gradient background. This can be done with a simple panel, with a bitmap built at runtime from the system's professional colors. So, add a panel and set it's background image layout to stretch. Then, set it's background image to the image produced by this code
Function GetVerticalGradient() As Bitmap Dim Gradient As New Bitmap(1, 2) Gradient.SetPixel(0, 0, ProfessionalColors.ToolStripGradientBegin) Gradient.SetPixel(0, 1, ProfessionalColors.ToolStripGradientEnd) Return Gradient End Function
That will return a 1x2 image; the top pixel being the starting color and the bottom pixel being the ending color. The resulting image should look something like a really big tool strip with no buttons on it. Now, look again at the image. See the slightly lighter part where is says "Main Head", and the part with all the text below it, that is the next step. You may wish to create a user control to house the panel and the header above it, but in this example i will just use two panels. First, let's create the header. The header's background color must be ProfessionalColors.ToolStripGradientBegin. Then, you can set it's background image to whatever you want. Then, to create the main section below it. Add another panel. If you look closely at the original image, you will see that there is a one pixel white border around it. To create that, set the backcolor of the panel you just created to White, and set it's padding to (1,1,1,1). Then, add another panel inside of it and set it's dock to fill. That will create that nice border. Then, to add the gradient inside of that panel, set it's background image layout to stretch, and set its background image to the image produced by this code
Private Function GetVerticalContentGradient() As Bitmap Dim Gradient As New Bitmap(1, 2) Gradient.SetPixel(0, 0, ProfessionalColors.ToolStripGradientBegin) Gradient.SetPixel(0, 1, ProfessionalColors.ToolStripGradientMiddle) Return Gradient End Function
Now, inside of that panel, you can add whatever links you want. Wait, see that dark blue line that separates the content and the header? If you want to create that, simply add a panel between the two and set its backcolor to ProfessionalColors.SeparatorDark. Now, see in the image the section below the one we just created that says "Sub Header", now we will create that. The part where the text is can be created with the same method we used above to create the previous one, but the header is different. To create the header, add a panel. Then, set panel's background image layout to stretch, and its background image to the one made by this code
Public Function GetHorizontalGradient() As Bitmap Dim Gradient As New Bitmap(1, 2) Gradient.SetPixel(0, 0, ProfessionalColors.ToolStripGradientBegin) Gradient.SetPixel(0, 1, ProfessionalColors.ToolStripGradientEnd) Gradient.RotateFlip(RotateFlipType.Rotate270FlipNone) Return Gradient End Function
Now, in that panel, you could put a label, picture, or anything you want. Also, in case you haven't figured it out, this tutorial doesn't just use pre-built bitmaps to make the interface, it builds the bitmaps from the system's colors, so it will mimic the look of the operating system it is on, and it will blend with the standard .NET toolstrips. And remember, you are not limited by the way Microsoft Office does it. You could get creative and customize the panel to the way it will best suit the purpose you are using it for.