Glassy Button In Silverlight 3

Introduction

In Silverlight 3 we have normal Button control. For some site or project requirements it needed to be a glassy look. In this article I am going to show you how easy it is to make Glassy Buttons.

Creating a Simple Silverlight Application

Open up Blend 3 and Create a new Silverlight Application.

1. Select the Rectangle tool from the Tools Pane and draw a Rectangle of your desired size.
   
   
   
   
   
   I have just changed the Rectangle's Fill Property as Gradient Fill and Changed the RadiusX and RadiusY properties of Value 15 each. And the StrokeThickness to Value 3.



 

2. Now copy the Rectangle and Paste it over the Rectangle. (We will call the Copied Rectangle as Old Rectangle and the newly pasted as New Rectangle)
    
3. Transform the New Rectangle to a smaller size.
   
   
    
4. Remove the Stroke from the New Rectangle.
   
   
    
5. Change the Gradient to White on both sides for the New Rectangle.
   
   
6. On the Right side of the Gradient Brush change the Alpha to Value 0.
   
   
7. Now resize the New Rectangle to fit to the Old Rectangle.
   
   
    
8. Now select both the Rectangles and group it into Grid from the selected Menu.
   
   
    
9. Now select the Grid and Right Click on it and select Make it Into Control from the menu Selected.
   
   
    
10. Now Choose Button from the Asset Gallery and name it as MyButtonStyle.
    
    
    
    Now you have created the Button, a Content Presenter is added.
    
    

Now you can go through my article States Animation In Silverlight 3 to change the states of this Glassy Button.

Enjoy Animating.