Imagos Consulting Weblog

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

Building Silverlight Controls

on August 29, 2007

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.

Button

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:

XAML

	<Canvas Width="100" Height="35"
           Canvas.Left="211" Canvas.Top="54"
           x:Name="SimpleButton"
           MouseLeftButtonDown="buttonMouseLeftButtonDown">
           <Rectangle x:Name="SimpleButtonSurround"
               Width="100" Height="35"
               Fill="#FFECECEC"
               Stroke="#FF000000"
               RadiusX="5"
               RadiusY="5" />
           <TextBlock Width="58" Height="24"
               Canvas.Left="40"
               Canvas.Top="7"><Run Text="Ok"/></TextBlock>
	</Canvas>

 

JavaScript

    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

 

XAML

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="480" Width="640">

   <Canvas.Resources>
     <Storyboard x:Name="GlassButton_glow_enter">
        <DoubleAnimationUsingKeyFrames
          Storyboard.TargetName="GlassButton_glow"
          Storyboard.TargetProperty="Opacity">
          <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="1" />
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>
      <Storyboard x:Name="GlassButton_glow_leave">
        <DoubleAnimationUsingKeyFrames
           Storyboard.TargetName="GlassButton_glow"
           Storyboard.TargetProperty="Opacity">
           <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0" />
         </DoubleAnimationUsingKeyFrames>
      </Storyboard>
   </Canvas.Resources>

   <Canvas x:Name="GlassButton"
       Canvas.Top="150" Canvas.Left="200"
       Height="34" Width="180"
       MouseLeftButtonDown="onMouseDown"
       MouseLeftButtonUp="onMouseUp"
       MouseMove="onMouseMove"
	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">
         <Rectangle.Fill>
            <RadialGradientBrush>
               <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                     <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
                     <TranslateTransform X="-0.368" Y="-0.152"/>
                  </TransformGroup>
               </RadialGradientBrush.RelativeTransform>
               <GradientStop Color="#B28DBDFF" Offset="0" />
               <GradientStop Color="#008DBDFF" Offset="1" />
            </RadialGradientBrush>
         </Rectangle.Fill>
      </Rectangle>

      <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">
         <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.494,0.028"
               EndPoint="0.494, 0.889" >
               <GradientStop Color="#99FFFFFF" Offset="0" />
               <GradientStop Color="#33FFFFFF" Offset="1" />
            </LinearGradientBrush>
         </Rectangle.Fill>

         <Rectangle.Clip>
            <RectangleGeometry Rect="0,0,176,15"/>
         </Rectangle.Clip>

      </Rectangle>

   </Canvas>

</Canvas>

 

JavaScript


function ClickMe(){
   alert("ClickMe");
}

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

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

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

Tags:

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: