CanOz Blog

I mentioned in an earlier post that for a control in a Windows Presentation Foundation (WPF) application that you had to give each control that you wanted to write code behind for a name in the XAML of the form.

Strictly this is not true.  If you want don’t want to use the built in features of the Visual Studio’s IDE for selecting classes and methods on the code behind page you could type in the code on the code behind yourself.

For me, at least, the easiest way to reach the code behind is to give each control a name in the XAML markup

then from the code behind page, you can select the control from the dropdown list.

After you select the control, you have access to all the events associated with the particular control.

By selecting a method from the list Visual Studio automatically generates the method declaration for you.

Once the declaration is made you can happily enter the necessary code you want for that event.

If you don’t want to take advantage of this great feature of Visual Studio, then you can write methods for controls the slightly more difficult way.

Instead of giving your control a name in the XAML of the form, have toadd an attributes for the control in the XAML.

The attribute needs to include are the action of the control you want to code against and the name of the method that you will write on the code behind.

Once you have added this to the XAML, go to the code behind and declare the method adding the two required parameters of Object and RoutedEventArgs.

Then you can add the required code for that method just as you would if you had Visual Studio declare the method for you.

So there you have it.  Two ways to reach the code behind with a Windows Presentation Foundation (WPF) application.

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.