WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:






Lifetime Member:

Silverlight MIX Countdown Timer






Silverlight Beta 1 Notes

Originally written on March 1, 2007, the only changes to this one to get it working in Beta 1 was plumbing... basic Beta 1 things, no big deal. I did set the date ahead a year so that the counter would run on the page.

Original Article

I had entered the mixtify 'blog bling' contest and put a MIX tag and link on my blog. I didn't go the rest of the way and put something on my website because my whole idea is to avoid recompiling that thing all the time, but seeing the Sidebar gadgets today made me want one and since I don't have Vista yet, I did the next best thing and put one on my site sidebar using WPF/E (of course).

This was very simple, but in the interest of exposing all the WPF/E I use, I figured I'd write it up.

I took the image from one of the mixtify images and added an inset area for the text because I couldn't find a color that worked good over the top of the background image. Then I added two TextBlock objects, one to write the count-down time into and one for a label.

Once I had this working, I duplicated it in a second canvas and using what I learned with my Reflection Builder, I reflected the image and text straight down, and faded it out to avoid taking up an overly large amount of real estate.

By far, the trickiest part of all this was the Java Script, since I've done much more Jave Script since I started doing WPF/E than I ever had before.

JavaScript for producing this page:

<script>
var Today;
var Mix = new Date(2008, 03, 30, 07, 00, 00);
var difference, daysDifference, hoursDifference, minutesDifference, sDTM;
var wpfeSender;
function startTimer(sender, args){ wpfeSender = sender;
countdown();
}

function countdown()//year, month, day, hour, minute, format)
{ // MIX is April 30, 2007 7:00am
Today = new Date();
difference = Mix.getTime() - Today.getTime();
daysDifference = Math.floor(difference/1000/60/60/24);
difference -= daysDifference*1000*60*60*24;
hoursDifference = Math.floor(difference/1000/60/60);
difference -= hoursDifference*1000*60*60;
minutesDifference = Math.floor(difference/1000/60);
sDTM = padout(daysDifference) + " " + padout(hoursDifference) + " " + padout(minutesDifference);
wpfeSender.findName("Timer").Text=sDTM;
wpfeSender.findName("Timer2").Text=sDTM;
//Recursive call, keeps the clock ticking.
setTimeout("countdown();", 60000);
}
function padout(number)
{
return (number < 10) ? '0' + number : number;
}
</script>


XAML for producing this page:

<Canvas 
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="startTimer" Cursor="Hand" MouseLeftButtonDown="_linkDown">

<Image Source="images/fun_venetian.png" Height="150" Width="130" Canvas.Top="0" Canvas.Left="0" />
<TextBlock x:Name="Timer" Canvas.Top="120" Canvas.Left="24" Text="00 00 00" Foreground="White" FontSize="16"/>
<TextBlock Canvas.Top="135" Canvas.Left="22" Text="Days Hours Mins" Foreground="#fafc05" FontSize="10" />

<Canvas Canvas.Top="300">
<Image Source="images/fun_venetian.png" Height="150" Width="130" Canvas.Top="0" Canvas.Left="0" />
<TextBlock x:Name="Timer2" Canvas.Top="120" Canvas.Left="24" Text="00 00 00" Foreground="White" FontSize="16"/>
<TextBlock Canvas.Top="135" Canvas.Left="22" Text="Days Hours Mins" Foreground="#fafc05" FontSize="10" />

<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0"/>
</TransformGroup>
</Canvas.RenderTransform>

<Canvas.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Offset="0.6" Color="#00000000" x:Name="ReflGradientStop1" />
<GradientStop Offset="1" Color="#CC000000" x:Name="ReflGradientStop2" />
</LinearGradientBrush>
</Canvas.OpacityMask>

</Canvas>

</Canvas>
Copyright © 2006-2017, WynApse