Title: Make a moving background in C#

This example displays text with a moving background color gradient. The following ShadeRect method contains the program's most interesting code.

// Fill the rectangle with a gradient that // shades from red to white to red. private void ShadeRect(Graphics gr, float xmin, float xmax) { using (LinearGradientBrush br = new LinearGradientBrush( new PointF(xmin, 0), new PointF(xmax, 0), Color.Red, Color.Red)) { br.WrapMode = WrapMode.Tile; ColorBlend color_blend = new ColorBlend(); color_blend.Colors = new Color[] { Color.Red, Color.White, Color.Red }; color_blend.Positions = new float[] { 0, 0.5f, 1 }; br.InterpolationColors = color_blend; gr.FillRectangle(br, ClientRectangle); } }

This method fills the program's PictureBox with a linear gradient brush that starts at xmin and ends at xmax. The code creates the brush, indicating that it should start at the point (xmin, 0) and end at the point (xmax, 0). The brush initially shades from red to red.

Inside the using block, the code sets the brush's WrapMode property to Tile. (Actually this is the default value so you can omit that statement if you like. I put it in for clarity.) That value makes the brush repeat itself if necessary to fill any areas that are filled. In this example it makes the brush repeat across the width of the PictureBox no matter where the brush's definition starts and stops.

The code then create a new ColorBlend object to determine how the colors blend across the filled area. It sets the Colors and Positions properties so the brush shades from red (at the left edge) to white (in the middle) and back to red (at the right edge).

Finally the code sets the brush's InterpolationColors property to the ColorBlend and then fills the PictureBox with it.

The program's form contains a Timer. Its Tick event handler refreshes the PictureBox to make the following Paint event handler execute.

private float GradientStart = 0; private float Delta = 5f; // Draw the background with text on top. private void picCanvas_Paint(object sender, PaintEventArgs e) { // Shade the background. int wid = picCanvas.ClientSize.Width; ShadeRect(e.Graphics, GradientStart, GradientStart + wid); // Increase the start position. GradientStart += Delta; if (GradientStart >= wid) GradientStart = 0; // Draw some text. using (Font font = new Font("Times New Roman", 16, FontStyle.Bold)) { using (StringFormat string_format = new StringFormat()) { string_format.Alignment = StringAlignment.Center; string_format.LineAlignment = StringAlignment.Center; e.Graphics.DrawString("Moving Gradient", font, Brushes.Black, picCanvas.ClientSize.Width / 2, picCanvas.ClientSize.Height / 2, string_format); } } }

This event handler gets the PictureBox object's width. It then calls ShadeRect to fill the PictureBox. It starts the gradient at the value GradientStart and makes it as wide as the PictureBox. Because the brush has WrapMode set to Tile, it repeats itself as needed to fill any of the PictureBox to the left of where the brush starts.

Next the code adds Delta to GradientStart to make the gradient start moved a bit to the right. If GradientStart is greater than the PictureBox width, the program resets it to 0 so it starts over.

The code finishes by drawing the text "Moving Gradient" in the middle of the PictureBox.

That's all there is to it.

Download the example to experiment with it and to see additional details.