I don't think I will ever get over just how much easier it is to do some things in a Windows Presentation Foundation (WPF) application than it is in a Windows application.
I was messing around with changing the background colour of a button to see what could be done. I ended up looking at how to apply a gradient to be the background of a button and realized that doing gradients with Visual Basic was just about as easy, if not easier, than creating them by modifying XAML markup. (You could also easily create gradients for the background properties of controls in a couple of mouse clicks by using Expression Blend.)
I started out with a plain button on my Form.
Like all experiments of mine I started off with the basics. I wanted to have a button with a two colour gradient background so I declared a variable as a LinearGradientBrush. (Note - Now before I hear back from people saying: "You could have declared and set your variable on one line…" or "You could have just set the Background property…." ... I know. Due to limitations with taking the screen shots (the screen resolution didn't allow me to get the whole line of code without scrolling or having the code on multiple lines) I wanted everything to be as easy to read as possible.)
The next thing I did was declare the variable as a New LinearGradientBrush and set the parameters which were the starting colour, the finishing colour and the angle that I wanted to gradient to be displayed at. A 0 degree angle shows the gradient from left to right and a 90 degree angle shows the gradients from top to bottom. You can also declare any degree from 0 to 360. (I thought that being able to change the angle of the gradient this easily was a wonderful feature.)
Then all that was left was to apply the brush to the background property of the button.
Run the project and I had the desired effect of a button with a two colour gradient background.
Now my creative juices started flowing and I got to wondering about having more than two colours in the gradient.
(Note - I have apologized in the past for my rather horrible colour matching abilities and I will do so again now and warn those who have not witnessed my graphical abilities to be prepared.)
Having more than two colours for a gradient background is just as easy as a two colour gradient. One of the overloaded constructors of the LinearGradientBrush is to pass an array of gradient stops as one of the parameters.
To create the array of gradient stops, you start be declaring and defining variables as New GradientStops. The overloaded constructor for a gradient stop requires that you pass a colour and an offset. (The offset is where the colour is at its full colour in the gradient. The first colour starts at 0 and the last colour ends at 1).
For my button I decided to try three colours and have the colours starting with red on the left then becoming green in the middle and then changing to from green to blue on the right side.
Next I needed to declare an array to hold the gradient stops in. The type of array that is used for this is a GradientStopCollection and you add the gradient stops to the array by using the Add method.
With all the gradient stops in the array/collection, you then set the background of the button as a New LinearGradientBrush and pass the array and an angle for the gradient as parameter to the overloaded new constructor for the brush.
Now when the project is run, the three colours are displayed on the button.
I mentioned the angle parameter of the constructor for the LinearGradientBrush earlier and changing it can lead to some very different looks.
Using the same code for the three colour button, but changing the angle of the gradient to 45 degrees
the colour change goes from the top left corner of the button to the bottom right.
One thing I did notice once I started changing the angle of the gradient I did find that if I wanted the gradient to show evenly I would also have to also change the offset property of the first and middle colours to even out the effect.
By changing the offset of the red, there is a little more solid red on before the colour starts mixing with the green. The offset of the green is moved over by .2 as well to keep the green close to the middle of the button.
By using the GradientStopCollection adding more colours is a breeze. You just need to create another gradient stop and then add that to the collection.
As you can see doing gradient colours is now a simple process with Windows Presentation Foundation (WPF) and Visual Basic.NET 2008.