After catching Andrew's Silverlight presentation and watching Tim Heuer's screencast on creating controls in Silverlight 1.1, I was inspired to write my own control.
I thought about something simple, yet useful: an LED number control. (Link to the source code at the bottom of the post.)
When I was a little kid, I was fascinated by the LED calculator we had.
The display, even though it was made of a fixed number of lights, always kept up with the numbers I punched into it. That amazed me. My father showed me, using toy blocks, how the system worked.
So, just like those toy blocks or the LEDs in your clock radio, everything starts with the number eight, or more accurately, the "everything turned on" state.
From there, any number can be represented by hiding certain paths.
I drew up the following in Expression Design, making each segment its own Path.
I copied the XAML from Expression Design and pasted it into Blend. I then gave all the paths meaningful names. (ie Top, Middle, TopLeft, etc)
One of the interesting parts of Silverlight is that in your user control class template, you start out with the following code:
public LedNumber()
{
System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("LedNumbers.LedNumber.xaml");
this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());
}
Basically, your XAML code is loaded in real time by the constructor from the assembly. Tim provides a good explanation in the screencast around 2:48, but the important thing is that we want to add the following global variable.
private FrameworkElement actualControl;
And change the InitalizeFromXaml line to:
actualControl = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());
From now on, we can use actualControl to reference our control.
The next step is to define global variables to contain references to each one of our Paths.
private Path Top;
private Path Middle;
private Path Bottom;
And then connect them to objects in the XAML by using the FindName.
Top = actualControl.FindName("Top") as Path;
Middle = actualControl.FindName("Middle") as Path;
Bottom = actualControl.FindName("Bottom") as Path;
With the groundwork done, let's add a private member and public facing property to contain the value.
private string _Value;
public string Value
{
get
{
return _Value;
}
set
{
_Value = value;
}
}
This exposes the Value property so that the control can be called in XAML by the following:
<LedNumbers:LedNumber Width="260" Height="342" Value="2" Canvas.Left="41" Canvas.Top="30"/>
<LedNumbers:LedNumber Width="260" Height="342" Value="4" Canvas.Left="311" Canvas.Top="30"/>
That's the XAML to produce the number "24."
All that's left to do now is hide/show the proper Paths and I do that via a switch statement.
switch (this._Value.ToLower())
{
case "0":
Top.Visibility = Visibility.Visible;
Bottom.Visibility = Visibility.Visible;
TopLeft.Visibility = Visibility.Visible;
TopRight.Visibility = Visibility.Visible;
BottomLeft.Visibility = Visibility.Visible;
BottomRight.Visibility = Visibility.Visible;
break;
case "1":
TopRight.Visibility = Visibility.Visible;
BottomRight.Visibility = Visibility.Visible;
break;
...
The switch statement will show a dash "-" for anything other than the 0 through 9 or the letters F and L.
After all, I wanted to be able write my initials with this control. :)
If you're initials aren't the same as mine, you can add your own case statement or you could also send it a 5 and an L to display something that would look like SL, which could be short for Silverlight.
Source Code
You can download the source code here. I built the solution with VS2008 Beta 2 and the latest Siverlight 1.1 runtime bits.
Lessons Learned
Silverlight user control development should should feel familiar to any WinForms control developer and, naturally, WPF user control developer: many of the principals are the same.
Next Steps
First of all, I probably should change the Value property to be a Char instead of a string.
Secondly, I think it would be important to support more than one letter/number at a time and add more "LED bars" to represent more letters.
I'd also like to add the foreground and background colors as parameters to add even more flexibility.