Friday, April 11, 2008

How to Make Buttons in Silverlight 2.0

Yes.. it is very very annoying when you are a designer and you use silverlight 2.0 in blend.. why? NO CUSTOM BUTTONS! Well.. now I will teach you how through code. No.. its not as hard as it seems.. it is quite easy! Its just hard when you ask a coder because they talk like they are from mars. But I am an earthling so here it is in earthling designer terms:

Make a new silverlight 2.0 application and name it 'SilverlightApplication4'
So lets say you want to make 2 buttons. draw 2 different squares in blend.
Name them! Name one 'rectangle' and the other 'rectangle1'. It is very important you name them.
ok now you need to make the states for the rectangle button. make these different timelines:
'rectangleMouseOver' 'rectangleMouseDown' 'rectangleMouseUp'
in each timeline make the rectangle a different color. lets say.. in one timeline red.. the other green.. and the last purple.
Now you need to make the states for the other btn 'rectangle1'. So do the same thing except name the timelines 'rectangle1MouseOver' 'rectangle1MouseDown' 'rectangle1MouseUp' change the colors like before.
ok now its time for the scary dreaded code! First you need to right click 'rectangle' and view xaml.
Now put this code in right after x:Name="rectangle"

MouseEnter="rectangle_MouseEnter" MouseLeave="rectangle_MouseLeave" MouseLeftButtonDown="rectangle_MouseLeftButtonDown" MouseLeftButtonUp="rectangle_MouseLeftButtonUp"

Now do the same for the other btn "rectangle1" except when you copy the code in you need to make it say "rectangle1" = whatever... not "rectangle" = whatever.

Ok now on to the last coding.

Click on the project tab in the upper right of blend. find where it says page.xaml and click on the little arrow next to it to drop down the list. You should see Page.xaml.cs. Double click it.

Ok now you need to make that code look like this:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication4
public partial class Page : UserControl
public Page()
// Required to initialize variables
private void rectangle_MouseEnter(object sender, MouseEventArgs e)
private void rectangle_MouseLeave(object sender, MouseEventArgs e)
private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
private void rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)


That will make your first rectangle work!

Now to make the second one work please findthe last part that says:
private void rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){this.MouseUp.Begin();}

But before the last 2 "}}"

Add in this code:

private void rectangle1_MouseEnter(object sender, MouseEventArgs e){this.MouseOver.Begin();}private void rectangle1_MouseLeave(object sender, MouseEventArgs e){this.MouseLeave.Begin();}private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){this.MouseDown.Begin();}private void rectangle1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){this.MouseUp.Begin();}

There you go.. if anyone has any problems please let me know!