Getting readymade Silverlight buttons with Silverlight SDK 1.1

  • Article

Why make your own controls when the Microsoft Silverlight 1.1 SDK gives them to you for free? :)

I will take the example of using the button control that is provided in the Silverlight SDK for this post

To use the button control from Silverlight SDK, do the following:

  1. Start VS 2008 'Orcas' Beta 2 with Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007)
  2. Make sure you have downloaded the Microsoft Silverlight 1.1 Software Development Kit Alpha Refresh cause we will be copying files from there.
  3. Create a new Silverlight project
     
  4. After that, copy over 4 files from the Silverlight SDK and put them under a newly created folder in your project.
  5. The 4 files to be copied are
    1. Button.cs (SDK -> Tools -> SilverlightControlsStarterKit -> SilverlightUIControls -> Buttons)
    2. Button.xaml (SDK -> Tools -> SilverlightControlsStarterKit -> SilverlightUIControls -> Buttons)
    3. ButtonBase.cs (SDK -> Tools -> SilverlightControlsStarterKit -> SilverlightUIControls -> Buttons)
    4. ControlBase.cs (SDK -> Tools -> SilverlightControlsStarterKit -> SilverlightUIControls -> Common)
  6. Now your project folder should look like this:
  7. Right click the Button.xaml file and change the "Build Action" from "Silverlight Page" to "Embedded Resource"
  8. Build the project [No errors? Continue. Errors? Mail me :) rohantATmicrosoftDONTSPAMMEdotPLEASEcom]
  9. To start off modifying the xaml file, right now the xaml file is exactly how Visual Studio created it and looks like this:
  10. Add a XML NameSpace to your XAML File by inserting the following line:
    xmlns:uicontrol="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/ReadyMadeFancyButton.dll"
    Now your code would look like this:
  11. Now let's create a canvas to put in our button and display it
  12. Create a canvas and put in a button, also give it a event handler to fire when the button is clicked. Lets add the following lines:
    <Canvas x:Name="cnvsPlaceHolder" Width="800" Height="800">
    <uicontrol:Button Text="Hit Me!" Click="ClickHandler"></uicontrol:Button>
    </Canvas>
  13. In all, now your xaml page should look like this:
  14. In the code behind of the Page.xaml file insert the code for the event handler which will handle the click event for our button by adding the following method:
    private void ClickHandler(object sender, EventArgs args)
    {
    }
  15. Now your code behind page should look like this:
  16. All done? What are you waiting for? Hit F5 and see it run... A cool readymade Silverlight button for you to use :)

There are a lot more controls in the SDK that you can play around with that that you got started.

Cheers!