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 sign in to leave a comment
Access denied
Access denied