Imagos Consulting Weblog

Developers Cant Do Design (or Can They?) – Neville Richards Personal Blog

Building Silverlight Controls

To build applications using Microsoft Silverlight 1.0 you will most likely need some user interface controls. While the first release of Silverlight does not include any controls, other than a video playback control, the rich development framework will support building custom controls. The following custom controls can be used as the basis of a number of applications:

  • Button
  • Slider
  • Check box
  • Radio button
  • Edit box

Authoring Silverlight applications can be done using your favourite tool; Visual Studio, Blender, Notepad etc. Code fragments presented can be paste into an existing project. Each custom control example includes a XAML and Javascript template fragment that can be customised for your application.


A button control is the simplest custom control to create in Silverlight. Any Silverlight object (UIElement), of collection of objects, can become a button by intercepting the “MouseLeftButtonDown” or “MouseLeftButtonUp” events.

The following example uses a rectangle and text block places on a canvas to create a simple button image:


	<Canvas Width="100" Height="35"
           Canvas.Left="211" Canvas.Top="54"
           <Rectangle x:Name="SimpleButtonSurround"
               Width="100" Height="35"
               RadiusY="5" />
           <TextBlock Width="58" Height="24"
               Canvas.Top="7"><Run Text="Ok"/></TextBlock>



    function buttonMouseLeftButtonDown(sender, keyEventArgs)
	   alert("Hello world!");


This button doesn’t provide any visual state indication. By adding handlers for the “MouseEnter” and “MouseLeave” events a basic mouse over can be built. By combining this with Silverlight animations a Windows Vista (aero glass) like button can be created.

Silverlight Glass Button



   Height="480" Width="640">

     <Storyboard x:Name="GlassButton_glow_enter">
          <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="1" />
      <Storyboard x:Name="GlassButton_glow_leave">
           <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0" />

   <Canvas x:Name="GlassButton"
       Canvas.Top="150" Canvas.Left="200"
       Height="34" Width="180"
	MouseEnter="GlassButtonMouseEnter" MouseLeave="GlassButtonMouseLeave">

      <!-- Outer border of the button... just the stroke of the rectangle -->
      <Rectangle Width="180" Height="34"
          RadiusX="7" RadiusY="7"
          StrokeThickness="1" Stroke="#FFFFFFFF"/>

      <!-- Next in black border, and a somewhat opaque fill -->
      <Rectangle Canvas.Top="1" Canvas.Left="1"
          Width="178" Height="32"
          RadiusX="6" RadiusY="6"
          Fill="#7F000000" Stroke="#FF000000" StrokeThickness="1" />

      <!-- Radial gradient to give a glow to the button when rolled over -->
      <Rectangle x:Name="GlassButton_glow"
         Canvas.Top="2" Canvas.Left="2"
         Width="176" Height="30"
         RadiusX="5" RadiusY="5" Opacity="0">
                     <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
                     <TranslateTransform X="-0.368" Y="-0.152"/>
               <GradientStop Color="#B28DBDFF" Offset="0" />
               <GradientStop Color="#008DBDFF" Offset="1" />

      <TextBlock x:Name="GlassButton_text"
          Canvas.Left="50" Canvas.Top="5"
          Foreground="#FFFFFFFF" Text="Glass Button" />

      <!-- over the top of part of the text is a lighter opaque gradient,
           clipped to the top half of the button -->
      <Rectangle Canvas.Left="2" Canvas.Top="2"
         Width="176" Height="30" RadiusX="5" RadiusY="5">
            <LinearGradientBrush StartPoint="0.494,0.028"
               EndPoint="0.494, 0.889" >
               <GradientStop Color="#99FFFFFF" Offset="0" />
               <GradientStop Color="#33FFFFFF" Offset="1" />

            <RectangleGeometry Rect="0,0,176,15"/>






function ClickMe(){

function GlassButtonMouseEnter(sender, args){
   var sb = sender.findName(sender.Name + "_glow_enter");

function GlassButtonMouseLeave(sender, args){
   var sb = sender.findName(sender.Name + "_glow_leave");

In the next I will look at building a simple slider control.


Leave a comment »

3D Spinning Logo in Silverlight

Breeze Designer, which is a a 3D modeler I wote as a graphical modeler and front end to the popular POV-Ray ray tracer and also a long term hobby project of mine, is being extended to be able to handle a number of new technologies including Microsoft’s Silverlight. As part of this I have created a simple 3D spinning logo of the CGI Australia company. I have posted a sample animation at The logo was originally created in Adobe Illustrator then imported into Breeze Designer where it was animated into a 3D the spinning version.

Technorati Tags:

1 Comment »

Hello world!

Hi to everyone from me, Neville Richards. This is my new blog on the world of Microsoft Technologies and 3D including Silverlight, Sharepoint and Breeze Designer from a developers perspective.

I will be presenting a few real world tutorials over the next weeks to show how Microsoft’s Silverlight can be used to improve the user experience of sites without a complete site redesign. Hopefully blending some development with a little design in the process.

Leave a comment »