Using PathGradientBrush to gradient a border

Posted 25 January 2009 - 04:58 PM

Hey guys,

I'm just teaching myself some of the more complex GDI+ stuff, and I'd like to make a nice border for a custom control I'm creating. I believe I need to use the PathGradientBrush which I pass a GraphicsPath too, but I'm not sure how to go about doing it to get something like this:

I want to have a border that looks sort of 3d rounded. Any suggestions on how to approach this? Should I treat each side as a separate rectangle? Thanks for the suggestions!

Replies To: Using PathGradientBrush to gradient a border

Re: Using PathGradientBrush to gradient a border

Posted 25 January 2009 - 05:09 PM

I would just create a rectangle and create a gradient for the borders. However, the gradient you presented is more complex, so most likely you will have to create four rectangles that will have their specific gradient (vertical or horizontal).

Dream.In.Code forum rules state that you should show some effort in solving your problem. Please, post the code you've been working so far. Post the code between code tags:

Re: Using PathGradientBrush to gradient a border

Posted 25 January 2009 - 05:28 PM

Core, on 25 Jan, 2009 - 07:09 PM, said:

I would just create a rectangle and create a gradient for the borders. However, the gradient you presented is more complex, so most likely you will have to create four rectangles that will have their specific gradient (vertical or horizontal).

Dream.In.Code forum rules state that you should show some effort in solving your problem. Please, post the code you've been working so far. Post the code between code tags:

Thank you!

I've tried a simple way of implementing the four sides using a PathGradient brush, as follows:

Edit: I decided to try treating each side as a trapezoid, and using linear gradient brushes with a custom BlendTriangularShape to get the desired behavior. This seams to work, though it is painful to do this for each side:

It creates three rectangles, that have different gradient, depending on the color and position. With some minor changes to this code (change the size and colors, as well as the gradient type) you will achieve the needed result.