Monday, 31 August 2009

Retro Flip Clock WPF Control

I know, I know...I last thing we need is another WPF Clock.  However, I recently went looking for a Flip Clock control and found surprisingly few - in fact, no usable ones.  So, it was back to the drawing board.

Most of the attention has been on appearance, rather than functionality.  Feel free to modify and enhance.
You can download the source code with sample project here.

Sorry for the broken link, the server that hosted this file has been rebuilt and no longer contains my downloads.  Here is a link on my SkyDrive.  This zip file contains the core files, you will need to add them to a project.


Loic said...


To make it culture-proof, i have to change Converter.cs :

var amountToMultiply = double.Parse(parameter.ToString(), CultureInfo.InvariantCulture.NumberFormat);

rgramann said...

Good point, Loic. Some day I will get around to picking up the loose ends on this one.

Jeremy said...

any suggestions on actually animating the flip? This image looks identical to the one on the HTC Touch Diamond phones running win mobile is that where you got the images?

On the touch diamond the flip is actually animated. Pretty sweet

Jeremy said...


rgramann said...

Hi Jeremy,

Yes, the basic design was taken from the HTC Touch. I did spend quite a bit of time on the flip animation, but had to abandon it due to work commitments. I believe some of that work is still in the XAML for the control.
If you observe the flip animation on the HTC, it's actually not a flip action, but a 3D Fold.

Jeremy said...

cool thanks I'll check it out

John Mocambique said...

Thanks Ron. The control works well in a WinForm Application.

I used an elementHost on the form and then added a reference to the control:

using WPFControls.Clocks;

In the form load event:

RetroClock rc = new RetroClock();
//style clock
rc.Height = 30;
rc.IncludeLeadingZero = true;
rc.IsAmPmVisible = true;
rc.FontSize = 60;
rc.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
rc.TimeFormat = TimeFormats.Hour12;

//add retroclock to element host
elementHost1.Child = rc;

rgramann said...

Thanks John, that's good to know.

jerome said...

Hi, can you use it in a smart device project ?

such as a HTC phone ?


rgramann said...

Hi Jerome,

Haven't tried it on a Smart Phone project, so I couldn't say. I suppose it would be easy enough to find out. If you find anything out, let me know.


RonGrramannFan :D said...

I know this maybe an old post but this was exactly what I was looking for Ron, i.e. I wanted HTC's flip clock design.

Good stuff.

Is there anyway you can finish the animation part? It'll be great and much much appreciated if you could =)

I also noticed for me, the hours of the clock always remain at 00 unless i set the Hour property of the control to some random number. Then it'll display the hours properly.

Is this the case with anybody else?
Im using this wpf control in winforms and I'm loading it during runtime/programmatically rather than in design-time so i might've missed something.

rgramann said...


I havent noticed the defect you mentioned. John Mocambique left a comment above regarding use in a WinForms app. He may have some insight into this.

Regarding finishing the animation...unfortunately I'm juggling three projects now, making free time just a concept :)

Anonymous said...

Hi, is the project and source code still available? Looks like it's broken. I'm pretty much interested on your approach.

rgramann said...

Sorry for the broken link, updated the posting to include a new link to the source code.

Let me know if that works out for you.

Sleeper MoNKeY said...


I can't done it. Could you please upload sample project, in current link have only 3 files.


Cinue Leonel Arce Orozco said...

Thanks for the code,i'm new in WPF and i've created a Control using the Triple Library:!591

Feel Free to enhanced it

Cinue Leonel Arce Orozco said...



Иван Брильков said...

Your clocks is what I currently search! Can you tell me what I need to do to add to my WPF project? I add this files to my project and add this:
Controls:RetroClock x:Name="htcClock" Height="50" Hour="10" Minute="32"
to xaml, than set in code current time, but I still see nothing in this frame.

rgramann said...

Can you post your code or zip-up what you and email it to me? ron-at-gramann-dot-co-dot-uk.

Иван Брильков said...

Thanks God! Problem was solved: all I needed was to set in my window resourses proper way to this resource dictionary.

Иван Брильков said...

May be it was for better look purposes, but font wieght can not be changed in user control. My solution is to put this in each TextBlock: FontWeight="{TemplateBinding FontWeight}"

Uchiha Itachi said...

clock control

Uchiha Itachi said...
This comment has been removed by the author.
luka marini said...

I insert the contro inside the MainWindow but nothing was shown.