Click here to Skip to main content
13,458,880 members
Click here to Skip to main content
Add your own
alternative version


23 bookmarked
Posted 13 Mar 2013


, 29 Apr 2013
Rate this:
Please Sign up or sign in to vote.
Simple clock using line transform.


This simple tip is for WPF beginners level. This will help to understand the use of RotateTransform by which a simple clock can be created. Just changing the Angle in the RotateTransform  for each lines (hours, minute and seconds hand) a simple clock is done


This requires a simple understanding of XAML usage. Also a basic knowledge in C# is enough as we are not going to add any complex items. 

Using the code  

XAML part 

Let's look at the XAML part first. First Canvas will be added inside the canvas, Ellipse, Lines, TextBlock will be added accordingly. Now let us see how the clock is made in 3 easy steps.

Step 1: Adding Clock Like Appearance   

First create a Canvas with Height = "200" and Width ="200" and inside the Canvas  draw an ellipse, then fill ellipse with Radial Gradient Brush . Note: Grid background is set as "Black".  Then lines are added for each 5 minute and these lines are transformed accordingly as shown below (for the "twelve" we do not RenderTransform as it is straight down)  

<Line Name="twelve" 

          X1="100" Y1="10"

          X2="100" Y2="2"



    <Line Name="One" 

          X1="100" Y1="5"

          X2="100" Y2="2"


            <RotateTransform Angle="30" CenterX="100" CenterY="100"/>

    <Line Name="Two" 

          X1="100" Y1="5"

          X2="100" Y2="2"


            <RotateTransform Angle="60" CenterX="100" CenterY="100"/>

     Similarly add for the remaining Lines by changing "Angle"

After adding twelve lines with transformation, Now we will add four text blocks to display numbers 3, 6, 9 and 12 in the clock. 

Step 2: Adding Hands to clock 

Now it is time for adding Hour, Minute, Second and ellipse at the center. By now the designer window will show a clock appearance. For all the Hours and Minute hand  

<Line Name="mins" 


      Stroke="Navy" StrokeEndLineCap="Triangle"


      X2="100" Y2="30"

      X1="100" Y1="100"/>
<Line Name="hrs" 





      X2="100" Y2="45"

      X1="100" Y1="100"/>
<Line Name="secs" 


      Stroke="Blue" StrokeEndLineCap="Round"


      X2="100" Y2="15"

      X1="100" Y1="115"/>

<Ellipse Height="10" Width="10"


     StrokeThickness="1" Margin="95,95,0,0"


C# Part 

Step 3: Adding code to Timer Event 

Now its time to make the Seconds, minute and hour hand to transform with the help of System.DateTime. Timer is added and initiated. Then for each second it executes the method below. The RotateTransform helps to rotate the line with the given axis.   

RotateTransform rt1 = new RotateTransform(_seconds, 100, 100); 

_seconds is nothing but the angle then followed by CenterX and CenterY. As we have canvas with height 200 and width 200 , the center point is 100,100. so now the transformation is done with respect to center.

Likewise for the minute and hour hands.   

void timers_Tick(object sender, EventArgs e)
   // get seconds, and move the second hand
   int nowSecond = DateTime.Now.Second * 6;    // times 6 to get rotate angle
   secs.RenderTransform = new RotateTransform(nowSecond, 100, 100);

   int nowMinute = DateTime.Now.Minute * 6;    // times 6 to get rotate angle
   mins.RenderTransform = new RotateTransform(nowMinute, 100, 100);

   int nowHour = DateTime.Now.Hour;
   if (nowHour > 12)
       nowHour -= 12;    // only 12 hours on the clock face
   nowHour *= 30;              // angle for the hourhand
   nowHour += nowMinute / 12;  // plus offset for minutes (60 minutes / 5)
   hrs.RenderTransform = new RotateTransform(nowHour, 100, 100);


Points of Interest  

It helps how the RotateTransform can be used to rotate lines both in XAML and C#. In next post I will try to add few more additional content so that we could make some cool stuff similar to Windows 7 desktop clock gadget with themes in it. 


  1. Source files were added correctly.  
  2. Repeated XAML codes were removed.   
  3. Hour calculation was wrong and now corrected.(26 march 2013)   
  4. Default Window Removed, Added right click option to set color and Drag enabled 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

karthik cad/cam
Software Developer Sirpi Software Pvt Ltd
India India
No Biography provided

You may also be interested in...

Comments and Discussions

PraiseNice! Pin
Doug J. Huras27-Oct-17 9:18
memberDoug J. Huras27-Oct-17 9:18 
SuggestionA useful additional method Pin
Member 1332532625-Jul-17 22:17
memberMember 1332532625-Jul-17 22:17 
PraiseGood Pin
jayabalan079-Jun-16 21:00
memberjayabalan079-Jun-16 21:00 
QuestionWell Done and Work Very Well Pin
Member 1238150714-Mar-16 17:48
memberMember 1238150714-Mar-16 17:48 
AnswerRe: Well Done and Work Very Well Pin
karthik cad/cam17-Mar-16 3:42
memberkarthik cad/cam17-Mar-16 3:42 
QuestionNice One Pin
syed shanu11-Dec-14 13:20
professionalsyed shanu11-Dec-14 13:20 
GeneralMy vote of 5 Pin
Tamok6-May-13 13:55
memberTamok6-May-13 13:55 
GeneralRe: My vote of 5 Pin
karthik cad/cam6-May-13 17:59
memberkarthik cad/cam6-May-13 17:59 
QuestionA good base control Pin
Edo Tzumer29-Apr-13 4:07
professionalEdo Tzumer29-Apr-13 4:07 
AnswerRe: A good base control Pin
karthik cad/cam29-Apr-13 17:53
memberkarthik cad/cam29-Apr-13 17:53 
Questionalternate timer code Pin
Richard MacCutchan25-Mar-13 7:14
mvpRichard MacCutchan25-Mar-13 7:14 
AnswerRe: alternate timer code Pin
karthik cad/cam25-Mar-13 23:55
memberkarthik cad/cam25-Mar-13 23:55 
QuestionNice tip Pin
Richard MacCutchan15-Mar-13 1:48
mvpRichard MacCutchan15-Mar-13 1:48 
AnswerRe: Nice tip Pin
raj23karthik15-Mar-13 2:32
memberraj23karthik15-Mar-13 2:32 
QuestionMissing Source Files! Pin
sam.hill13-Mar-13 5:07
membersam.hill13-Mar-13 5:07 
AnswerRe: Missing Source Files! Pin
raj23karthik14-Mar-13 23:40
memberraj23karthik14-Mar-13 23:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04-2016 | 2.8.180323.1 | Last Updated 29 Apr 2013
Article Copyright 2013 by karthik cad/cam
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid