.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Glossy Buttons style In Silverlight

Posted By:Diptimaya Patra       Posted Date: March 31, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Glossy Buttons style In Silverlight. 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 Glossy Buttons.
 

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.

image1.gif


  1. Select the Rectangle tool from the Tools Pane and draw a Rectangle of your desired size.

    image2.gif

    image3.gif

    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.

    image4.gif
     
       
    1. 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)
       
    2. Transform the New Rectangle to a smaller size.

      image5.gif
       
    3. Remove the Stroke from the New Rectangle.

      image6.gif
       
    4. Change the Gradient to White on both sides for the New Rectangle.

      image7.gif
    5. On the Right side of the Gradient Brush change the Alpha to Value 0.

      image8.gif
    6. Now resize the New Rectangle to fit to the Old Rectangle.

      image9.gif
       
    7. Now select both the Rectangles and group it into Grid from the selected Menu.

      image10.gif
       
    8. Now select the Grid and Right Click on it and select Make it Into Control from the menu Selected.

      image11.gif
       
    9. Now Choose Button from the Asset Gallery and name it as MyButtonStyle.

      image12.gif

      Now you have created the Button, a Content Presenter is added.

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

Enjoy Animating.
 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend