Silverlight

Silverlight 4 Clock

Silverlight
Silverlight
I was trying to get my Development Environment up & running the other day with Silverlight 4. It turns out that the Silverlight debug runtime isn’t actually part of the standard client, or the Silverlight 4 Tools for Visual Studio.

Thanks to this thread I discovered

The “Silverlight managed debugging package” is part of the developer runtime, not the SDK or Tools. Make sure you have the latest version of the developer runtime installed (available at http://go.microsoft.com/fwlink/?LinkID=188039

On the plus side I did throw together this nice pretty clock just to test everything out.
There’s probably a dozen ways to break this, but it covers the basic for autosizing the grid, limiting the dimensiosn with min height & max height sections, drawing lines & drawing ellipses & a small bit of math.



XAML

<UserControl x:Class="SlvrClock.Lib.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" MinHeight="100" MinWidth="100">
    <Grid x:Name="LayoutRoot" Background="Black">
        <Line x:Name="lh" Stroke="Green" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Triangle" />
        <Line x:Name="lm" Stroke="Blue" StrokeThickness="10" StrokeStartLineCap="Round" StrokeEndLineCap="Triangle" />
        <Line x:Name="ls" Stroke="Red" StrokeThickness="5" StrokeStartLineCap="Round" StrokeEndLineCap="Triangle" />
        <Ellipse x:Name="el" Stroke="Yellow" StrokeThickness="5" />
    </Grid>
</UserControl>

C#

public partial class MainPage : UserControl
{
    private Storyboard timer = new Storyboard(); //timer
    private const double radian = Math.PI / 180; //radian
    private bool started = false;
    private double MaxHandLength { get; set; } //shorter length of width:height
    private Point CenterPoint { get; set; }
        
    public MainPage()
    {
        InitializeComponent();
        timer.Duration = TimeSpan.FromMilliseconds(50);
        timer.Completed += new EventHandler(Timer_Completed);
        timer.Begin();
    }

    protected void Timer_Completed(object sender, EventArgs e)
    {
        double aw2 = LayoutRoot.ActualWidth / 2, ah2 = LayoutRoot.ActualHeight / 2;
        if (!started || CenterPoint.X != aw2 || CenterPoint.Y != ah2)
        {
            //Reset the centerpoint & ratios on startup or if the window resizes.
            CenterPoint = new Point(aw2, ah2);
            MaxHandLength = Math.Min(CenterPoint.X, CenterPoint.Y);
            el.Height = el.Width = ((MaxHandLength - 10) * 2);
            lh.X1 = lm.X1 = ls.X1 = CenterPoint.X;
            lh.Y1 = lm.Y1 = ls.Y1 = CenterPoint.Y;
            started = true;
        }
        var now = System.DateTime.Now;
        //line hour - apply partial split for smoother transition and update more than onces per second.
        ChangeHand(lh, MaxHandLength - 80, 30 * (now.Hour + ((double)now.Minute) / 60));
        //line minute
        ChangeHand(lm, MaxHandLength - 60, 6 * (now.Minute + ((double)now.Second) / 60));
        //line second
        ChangeHand(ls, MaxHandLength - 40, 6 * (now.Second + ((double)now.Millisecond) / 1000));
        timer.Begin();
    }

    protected void ChangeHand(Line l, double r, double a) {
        //Calculate the point on the circumference based on Center, Radius & Angle.
        var i = a * radian;
        l.X2 = CenterPoint.X + r * Math.Sin(i);
        l.Y2 = CenterPoint.Y + r * -Math.Cos(i);
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *