4 Replies - 11230 Views - Last Post: 28 March 2010 - 03:16 PM Rate Topic: -----

#1 kdbolt70  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 16-December 07

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:

Attached Image

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!

Is This A Good Question/Topic? 0
  • +

Replies To: Using PathGradientBrush to gradient a border

#2 Core  Icon User is offline

  • using System.Linq;
  • member icon

Reputation: 774
  • View blog
  • Posts: 5,097
  • Joined: 08-December 08

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: :code:

Thank you!
Was This Post Helpful? 0
  • +
  • -

#3 kdbolt70  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 16-December 07

Re: Using PathGradientBrush to gradient a border

Posted 25 January 2009 - 05:28 PM

View PostCore, 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: :code:

Thank you!


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

GraphicsPath gp = new GraphicsPath();					
					//gp.AddRectangle(ClientRectangle);
					Rectangle top = new Rectangle(0, 0, Width,_borderWidth);
					Rectangle left = new Rectangle(0, 0, _borderWidth, Height);
					Rectangle bottom = new Rectangle(0, Height - _borderWidth, Width , _borderWidth);
					Rectangle right = new Rectangle(Width - _borderWidth, 0,_borderWidth, Height);
					gp.AddRectangle(top);
					gp.AddRectangle(left);
					gp.AddRectangle(bottom);
					gp.AddRectangle(right);

					PathGradientBrush pBrush = new PathGradientBrush(gp);
					pBrush.CenterColor = _borderColor1;
					pBrush.SurroundColors = new Color[] { _borderColor2 };
					e.Graphics.FillPath(pBrush, gp);




But that shows up horribly. Not sure what else to try...


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:

Point[] top = new Point[4];
top[0] = new Point(0, 0);
top[1] = new Point(Width, 0);
top[2] = new Point(Width - _borderWidth, _borderWidth);
top[3] = new Point(_borderWidth, _borderWidth);

Rectangle topr = new Rectangle(0, 0, Width, _borderWidth);
LinearGradientBrush brush = new LinearGradientBrush(topr, _borderColor1, _borderColor2, LinearGradientMode.Vertical);
brush.SetBlendTriangularShape(0.5f, 1.0f); 

e.Graphics.FillPolygon(brush, top);


I still think I should be able to do this easier with another method, but I'm not sure how to attempt it.

This post has been edited by kdbolt70: 25 January 2009 - 05:45 PM

Was This Post Helpful? 0
  • +
  • -

#4 Core  Icon User is offline

  • using System.Linq;
  • member icon

Reputation: 774
  • View blog
  • Posts: 5,097
  • Joined: 08-December 08

Re: Using PathGradientBrush to gradient a border

Posted 25 January 2009 - 06:09 PM

This is a generic example, but I would do it this way:

			// Draw the outside rectangle
			Rectangle rect = new Rectangle(0, 0, 300, 100);
			System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(rect, Color.DarkBlue, Color.Blue, System.Drawing.Drawing2D.LinearGradientMode.Horizontal);
			e.Graphics.DrawRectangle(new System.Drawing.Pen(brush,5),rect);

			// Draw the middle rectangle
			rect = new Rectangle(5, 5, 295, 95);
			brush = new System.Drawing.Drawing2D.LinearGradientBrush(rect, Color.Red, Color.Pink, System.Drawing.Drawing2D.LinearGradientMode.Horizontal);
			e.Graphics.DrawRectangle(new System.Drawing.Pen(brush, 5), rect);

			// Draw the inside rectangle
			rect = new Rectangle(10, 10, 290, 90);
			brush = new System.Drawing.Drawing2D.LinearGradientBrush(rect, Color.Green, Color.Aqua, System.Drawing.Drawing2D.LinearGradientMode.Horizontal);
			e.Graphics.DrawRectangle(new System.Drawing.Pen(brush, 5), rect);

			brush.Dispose();



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.
Was This Post Helpful? 0
  • +
  • -

#5 Guest_Ma*


Reputation:

Re: Using PathGradientBrush to gradient a border

Posted 28 March 2010 - 03:16 PM

This same limitation exists in Silverlight It looks like the same design pattern carried from GDI, kudos Microsoft!
Was This Post Helpful? 0

Page 1 of 1