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.
| 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: Silverlight
