How to set the Windows XP like gradient background color in the WinForms XPTaskBar?

3 mins read

Gradient background

The XPTaskBarBox allows you to dynamically provide background brushes for the header and items area.

To customize the appearance of the Header:

You can handle the ProvideHeaderBackgroundBrush event in the XPTaskBarBox to customize the appearance of the header. The following code example shows how the gradient background color is applied to the header of the XPTaskBarBox.

//Specifies the appearance of the XPTaskBar.
this.xpTaskBar1.Style = XPTaskBarStyle.Default;
//Draws the header portion of the XPTaskBarBox.
this.xpTaskBarBox1.ProvideHeaderBackgroundBrush += new ProvideBrushEventHandler(xpTaskBarBox1_ProvideHeaderBackgroundBrush);
//Customizes the appearance of the header of the XPTaskBarBox.
void xpTaskBarBox1_ProvideHeaderBackgroundBrush(object sender, ProvideBrushEventArgs args)
{
    // Blends settings.
    float[] relativeIntensities = { 0.0f, 0.0f, 1.0f };
    float[] relativePositions = { 0.0F, 0.5f, 1.0F };
    System.Drawing.Drawing2D.Blend blend = new System.Drawing.Drawing2D.Blend();
    blend.Factors = relativeIntensities;
    blend.Positions = relativePositions;
    XPTaskBarBox box = sender as XPTaskBarBox;
    // Header back brush.
    System.Drawing.Drawing2D.LinearGradientBrush lgBrush = new System.Drawing.Drawing2D.LinearGradientBrush(args.Bounds, Color.LightYellow, Color.SkyBlue, 0, true);
    lgBrush.Blend = blend;
    args.Brush = lgBrush;
}

'Specifies the appearance of the XPTaskBar.
Me.xpTaskBar1.Style = XPTaskBarStyle.Default
'Draws the header portion of the XPTaskBarBox. 
AddHandler xpTaskBarBox1.ProvideHeaderBackgroundBrush, AddressOf xpTaskBarBox1_ProvideHeaderBackgroundBrush
'Customizes the appearance of the header of the XPTaskBarBox.
Private Sub xpTaskBarBox1_ProvideHeaderBackgroundBrush(ByVal sender As Object, ByVal args As ProvideBrushEventArgs)
   'Blend settings.
   Dim relativeIntensities() As Single = { 0.0f, 0.0f, 1.0f }
   Dim relativePositions() As Single = { 0.0F, 0.5f, 1.0F }
   Dim blend As New System.Drawing.Drawing2D.Blend()
   blend.Factors = relativeIntensities
   blend.Positions = relativePositions
   Dim box As XPTaskBarBox = TryCast(sender, XPTaskBarBox)
   'Header back brush.
   Dim lgBrush As New System.Drawing.Drawing2D.LinearGradientBrush(args.Bounds, Color.LightYellow, Color.SkyBlue, 0, True)
   lgBrush.Blend = blend
   args.Brush = lgBrush
End Sub

Note:

The appearance of the header background can be customized when the XPTaskBar style is set as Default and it is not applicable to other styles.

Before applying gradient back color to the header and item area

Figure 1: Before applying gradient back color to the header and item area in the XPTaskBarBox

After applying gradient back color to the header

Figure 2: After applying the Gradient back color to the header

To customize the appearance of the Item background:

You can similarly handle the ProvideItemsBackgroundBrush event in the XPTaskBarBox to customize the appearance of the item area. The following code example shows how the gradient background color is applied to the item area.

//Draws the item area of the XPTaskBarBox.
this.xpTaskBarBox1.ProvideItemsBackgroundBrush += new ProvideBrushEventHandler(xpTaskBarBox1_ProvideItemsBackgroundBrush);
//Customizes the appearance of the item background in the XPTaskBarBox.
void xpTaskBarBox1_ProvideItemsBackgroundBrush(object sender, ProvideBrushEventArgs args)
{
   // Paint should be applied only when the Height is greater than zero.
   if(args.Bounds.Width != 0 && args.Bounds.Height != 0)
   {
      // Blends settings.
      float[] relativeIntensities = { 0.0f, 0.0f, 1.0f };
      float[] relativePositions = { 0.0F, 0.5f, 1.0F };
      System.Drawing.Drawing2D.Blend blend = new System.Drawing.Drawing2D.Blend();
      blend.Factors = relativeIntensities;
      blend.Positions = relativePositions;
      // Item back brush.
      System.Drawing.Drawing2D.LinearGradientBrush lgBrush = new System.Drawing.Drawing2D.LinearGradientBrush(args.Bounds, Color.CornflowerBlue, Color.Aqua, 0, true);
      lgBrush.Blend = blend;
      args.Brush = lgBrush;
   }
}

'Customizes the appearance of the item background in the XPTaskBarBox.
Private Sub xpTaskBarBox1_ProvideItemsBackgroundBrush(ByVal sender As Object, ByVal args As ProvideBrushEventArgs)
   'Paint should be applied only when the Height is greater than zero.
   If args.Bounds.Width <> 0 AndAlso args.Bounds.Height <> 0 Then
      'Blends settings.
      Dim relativeIntensities() As Single = { 0.0f, 0.0f, 1.0f }
      Dim relativePositions() As Single = { 0.0F, 0.5f, 1.0F }
      Dim blend As New System.Drawing.Drawing2D.Blend()
      blend.Factors = relativeIntensities
      blend.Positions = relativePositions
      'Item back brush.
      Dim lgBrush As New System.Drawing.Drawing2D.LinearGradientBrush(args.Bounds, Color.CornflowerBlue, Color.Aqua, 0, True)
       lgBrush.Blend = blend
       args.Brush = lgBrush
   End If
End Sub

Note:

The appearance of the item background can be customized when the XPTaskBar style is set as Default and Metro.

Gradient back color is applied to the item area