Articles in this section
Category / Section

How to custom paint the background of WinForms XPTaskBar to give it a gradient look and feel?

1 min read

Custom paint the background of XPTaskBar

You can specify the gradient background of XPTaskBar by using LinearGradientBrush and handling the XPTaskBar’s paint event handler.

C#

//To raise the paint event
this.xpTaskBar1.Paint += new PaintEventHandler(xpTaskBar1_Paint);
void xpTaskBar1_Paint(object sender, PaintEventArgs e)
{
   Rectangle rc = this.ClientRectangle;
   int gradientWidth = rc.Width;
   //To specify the linear gradient mode
   LinearGradientBrush lgb = new System.Drawing.Drawing2D.LinearGradientBrush(rc, Color.Red, Color.Blue, LinearGradientMode.ForwardDiagonal);
   float[] positions = { 0.0f, 0.005f, 0.95f, 1.0f };
   float[] factors = { 0.4f, 1.0f, 0.05f, 0.4f };
   // Blend settings
   Blend blend = new Blend();
   blend.Factors = factors;
   blend.Positions = positions;
   lgb.Blend = blend;
   e.Graphics.FillRectangle(lgb, 0, 0, gradientWidth, rc.Height);
   lgb.Dispose();
}

VB

'To raise the paint event
AddHandler xpTaskBar1.Paint, AddressOf xpTaskBar1_Paint
Private Sub xpTaskBar1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs)
   Dim rc As Rectangle = Me.ClientRectangle
   Dim gradientWidth As Integer = rc.Width
   'To specify the linear gradient mode
   Dim lgb As LinearGradientBrush = New System.Drawing.Drawing2D.LinearGradientBrush(rc, Color.Red, Color.Blue, LinearGradientMode.ForwardDiagonal)
   Dim positions() As Single = { 0.0f, 0.005f, 0.95f, 1.0f }
   Dim factors() As Single = { 0.4f, 1.0f, 0.05f, 0.4f }
   ' Blend settings
   Dim blend As New Blend()
   blend.Factors = factors
   blend.Positions = positions
   lgb.Blend = blend
   e.Graphics.FillRectangle(lgb, 0, 0, gradientWidth, rc.Height)
   lgb.Dispose()
End Sub

 

Before applying the gradient background to XPTaskBar

Figure 1: Before applying the gradient background to XPTaskBar

Gradient background is applied as ForawardDiagonal

Figure 2: Gradient background is applied as ForwardDiagonal

Gradient background is applied as BackwardDiagonal

Figure 3: Gradient background is applied as BackwardDiagonal

Gradient background is applied as Vertical

Figure 4: Gradient background is applied as Vertical

Gradient background is applied as Horizontal

Figure 5: Gradient background is applied as Horizontal

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied