11,496,146 members (400 online)

# Clock

, 29 Apr 2013 CPOL 14.1K 602 22
Simple clock using line transform.
The site is currently in read-only mode for maintenance. Posting of new items will be available again shortly.

## Introduction

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

## Background

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"
Stroke="White"
StrokeThickness="2"/>

<Line Name="One"
X1="100" Y1="5"
X2="100" Y2="2"
Stroke="White"
StrokeThickness="2">
<Line.RenderTransform>
<RotateTransform Angle="30" CenterX="100" CenterY="100"/>
</Line.RenderTransform>
</Line>

<Line Name="Two"
X1="100" Y1="5"
X2="100" Y2="2"
Stroke="White"
StrokeThickness="2">
<Line.RenderTransform>
<RotateTransform Angle="60" CenterX="100" CenterY="100"/>
</Line.RenderTransform>
</Line>

<!--
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"
StrokeThickness="5"
Stroke="Navy" StrokeEndLineCap="Triangle"
StrokeStartLineCap="Round"
X2="100" Y2="30"
X1="100" Y1="100"/>
<Line Name="hrs"
StrokeThickness="6"
Stroke="Navy"
StrokeStartLineCap="Round"
StrokeEndLineCap="Triangle"
X2="100" Y2="45"
X1="100" Y1="100"/>
<Line Name="secs"
StrokeThickness="3"
Stroke="Blue" StrokeEndLineCap="Round"
StrokeStartLineCap="Round"
X2="100" Y2="15"
X1="100" Y1="115"/>

<Ellipse Height="10" Width="10"
Fill="Blue"
StrokeThickness="1" Margin="95,95,0,0"
Stroke="White"/>  ```

### 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.

## History

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

## Share

Software Developer Sirpi Software Pvt Ltd
India
No Biography provided

 First Prev Next
 Nice One syed shanu11-Dec-14 14:20 syed shanu 11-Dec-14 14:20
 My vote of 5 Tamok6-May-13 14:55 Tamok 6-May-13 14:55
 Re: My vote of 5 karthik cad/cam6-May-13 18:59 karthik cad/cam 6-May-13 18:59
 A good base control Edo Tzumer29-Apr-13 5:07 Edo Tzumer 29-Apr-13 5:07
 Re: A good base control karthik cad/cam29-Apr-13 18:53 karthik cad/cam 29-Apr-13 18:53
 alternate timer code Richard MacCutchan25-Mar-13 8:14 Richard MacCutchan 25-Mar-13 8:14
 Nice tip Richard MacCutchan15-Mar-13 2:48 Richard MacCutchan 15-Mar-13 2:48
 Re: Nice tip raj23karthik15-Mar-13 3:32 raj23karthik 15-Mar-13 3:32
 Missing Source Files! sam.hill13-Mar-13 6:07 sam.hill 13-Mar-13 6:07
 Re: Missing Source Files! raj23karthik15-Mar-13 0:40 raj23karthik 15-Mar-13 0:40
 Last Visit: 31-Dec-99 19:00     Last Update: 30-May-15 7:52 Refresh 1