Click here to Skip to main content
14,841,764 members
Articles / Desktop Programming / WPF
Article
Posted 15 May 2012

Stats

46K views
2.6K downloads
42 bookmarked

WPF: Belt Clock

Rate me:
Please Sign up or sign in to vote.
4.88/5 (44 votes)
16 May 2012CPOL1 min read
A WPF belt clock

Image 1

Introduction

This work is inspired by a pricey watch which I spotted while perusing one of those magazines filled with other shockingly pricey items. This is a more affordable offering and minus bulletproof glass.

Design and Layout

I designed the Belt Clock in Expression Blend. The belts are made up of Grids, containing TextBlocks, stacked in a layout container of type Canvas.

Image 2

HourCanvas, plus some other elements that make up the visual components of the belt, are placed in another layout container whose ClipToBounds property is set to True.

Here's how it actually looks like when the ClipToBounds property of all the concerned layout containers are set to False.

Image 3

The Code

The logic for ensuring that the correct time is 'displayed' is contained in a class called TickTock. When the application is loaded the method SetTimeOnLoad() calls several methods to ensure that the correct time is highlighted.

vb.net
Public Sub SetTimeOnLoad()
    GetTime(currentHour, currentMinute_1, currentMinute_2)

    ' Highlight hour.     
    DisplayTimeOnLoad(hourCanvas, currentHour, hourStartGrid, _
                      hourGridUpperLimit, hourGridLowerLimit)

    ' Highlight first part of minutes.        
    DisplayTimeOnLoad(min1Canvas, currentMinute_1, min1StartGrid, _
                      min1GridUpperLimit, min1GridLowerLimit)

    ' Highlight second part of minutes.        
    DisplayTimeOnLoad(min2Canvas, currentMinute_2, min2StartGrid, _
                      min2GridUpperLimit, min2GridLowerLimit)
End Sub

The GetTime() method sets the value of several fields with the current time.

vb.net
Private Sub GetTime(ByRef hour As Integer, ByRef min1 As Integer, ByRef min2 As Integer)
    hour = DateTime.Now.Hour

    If (hour > 12) Then
        hour -= 12
    End If

    If (DateTime.Now.Minute.ToString.Length = 1) Then
        min1 = 0
        min2 = CInt(DateTime.Now.Minute.ToString.Substring(0, 1))
    Else
        min1 = CInt(DateTime.Now.Minute.ToString.Substring(0, 1))
        min2 = CInt(DateTime.Now.Minute.ToString.Substring(1, 1))
    End If
End Sub

The DisplayTimeOnLoad() method ensures that the correct time is highlighted.

vb.net
Private Sub DisplayTimeOnLoad(ByRef cnv As Canvas, ByVal currTime As Integer, _
                              ByVal startGrid As Integer, ByVal upperLimit As Integer, _
                              ByVal lowerLimit As Integer)
    If (currTime < startGrid) Then
        ' Move grids downwards.
        shift = (startGrid - currTime) * gridHeight

        While (shift > 0)
            For Each grd In cnv.Children
                initY = Canvas.GetTop(grd)
                newY = initY + 1
                Canvas.SetTop(grd, newY)
                PlaceGridInLimitPosition(grd, upperLimit, lowerLimit)
            Next

            shift -= 1
        End While
    ElseIf (currTime > startGrid) Then
        ' Move grids upwards.
        shift = (currTime - startGrid) * gridHeight

        While (shift > 0)
            For Each grd In cnv.Children
                initY = Canvas.GetTop(grd)
                newY = initY - 1
                Canvas.SetTop(grd, newY)
                PlaceGridInLimitPosition(grd, upperLimit, lowerLimit)
            Next

            shift -= 1
        End While
    End If
End Sub

In the method above the Grids of interest are moved either upwards or downwards so that the correct time is highlighted. PlaceGridInLimitPosition() ensures that a Grid that moves beyond a certain limit is placed accordingly.

vb.net
Private Sub PlaceGridInLimitPosition(ByRef grd As Grid, ByVal upperLimit As Integer, _
                                     ByVal lowerLimit As Integer)
    If (upperLimit = hourGridUpperLimit) AndAlso (lowerLimit = hourGridLowerLimit) Then
        If (newY >= 280) Then
            Canvas.SetTop(grd, hourGridUpperLimit)
        ElseIf (newY <= -240) Then
            Canvas.SetTop(grd, hourGridLowerLimit)
        End If
    ElseIf (upperLimit = min1GridUpperLimit) AndAlso (lowerLimit = min1GridLowerLimit) Then
        If (newY >= 120) Then
            Canvas.SetTop(grd, min1GridUpperLimit)
        ElseIf (newY <= -160) Then
            Canvas.SetTop(grd, min1GridLowerLimit)
        End If
    ElseIf (upperLimit = min2GridUpperLimit) AndAlso (lowerLimit = min2GridLowerLimit) Then
        If (newY >= 200) Then
            Canvas.SetTop(grd, min2GridUpperLimit)
        ElseIf (newY <= -240) Then
            Canvas.SetTop(grd, min2GridLowerLimit)
        End If
    End If
End Sub

The method TimeKeeper_Tick() handles the Tick event of a DispatcherTimer object, whose Interval property is set to 1 sec, and ensures that the correct time is highlighted when time changes.

vb.net
Private Sub TimeKeeper_Tick(ByVal sender As Object, ByVal e As EventArgs)
    GetTime(currHour, currMin1, currMin2)

    ' Set new hour.
    If (currentHour <> currHour) Then
        DisplayNewTime(hourCanvas, hourGridLowerLimit, hourGridUpperLimit)
        currentHour = currHour
    End If

    ' Set new first part of minutes.
    If (currentMinute_1 <> currMin1) Then
        DisplayNewTime(min1Canvas, min1GridLowerLimit, min1GridUpperLimit)
        currentMinute_1 = currMin1
    End If

    ' Set new second part of minutes.   
    If (currentMinute_2 <> currMin2) Then
        DisplayNewTime(min2Canvas, min2GridLowerLimit, min2GridUpperLimit)
        currentMinute_2 = currMin2
    End If
End Sub

DisplayNewTime() causes the execution of the animation that creates the scrolling effect.

vb.net
Private Sub DisplayNewTime(ByRef cnv As Canvas, ByVal lowerLimit As Integer, _
                           ByVal upperLimit As Integer)
    For Each grd As Grid In cnv.Children
        initY = Canvas.GetTop(grd)

        If (initY <= upperLimit) Then
            dblGridAnim.Duration = TimeSpan.FromMilliseconds(1)
            dblGridAnim.To = lowerLimit
            dblGridAnim.FillBehavior = FillBehavior.HoldEnd
            grd.BeginAnimation(Canvas.TopProperty, dblGridAnim)
        Else
            newY = initY - gridHeight

            dblGridAnim.Duration = TimeSpan.FromMilliseconds(800)
            dblGridAnim.To = newY
            dblGridAnim.FillBehavior = FillBehavior.HoldEnd
            grd.BeginAnimation(Canvas.TopProperty, dblGridAnim)
        End If
    Next
End Sub

Conclusion

That's it. I hope you picked up something useful from this article. If there are any bugs kindly let me know.

History

  • 16th May, 2012: Initial post

License

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

Share

About the Author

Meshack Musundi
Software Developer
Kenya Kenya
Meshack is a software developer with a passion for WPF.

Awards,

  • CodeProject MVP 2013
  • CodeProject MVP 2012

Comments and Discussions

 
QuestionWow ! Pin
vincennes4-Mar-14 6:08
professionalvincennes4-Mar-14 6:08 
GeneralRe: Wow ! Pin
Meshack Musundi4-Mar-14 9:13
mvaMeshack Musundi4-Mar-14 9:13 
BugWrong display time Pin
Marco Bertschi15-Oct-13 3:14
professionalMarco Bertschi15-Oct-13 3:14 
GeneralMy vote of 5 Pin
atu_mboya6-Oct-12 10:56
Memberatu_mboya6-Oct-12 10:56 
GeneralRe: My vote of 5 Pin
Meshack Musundi7-Oct-12 6:10
mvaMeshack Musundi7-Oct-12 6:10 
GeneralMy vote of 5 Pin
Christian Amado28-Aug-12 12:06
professionalChristian Amado28-Aug-12 12:06 
GeneralMy vote of 5 Pin
P.Salini29-May-12 0:58
MemberP.Salini29-May-12 0:58 
GeneralRe: My vote of 5 Pin
Meshack Musundi29-May-12 19:48
mvaMeshack Musundi29-May-12 19:48 
GeneralMy vote of 5 Pin
Jαved28-May-12 21:05
professionalJαved28-May-12 21:05 
GeneralRe: My vote of 5 Pin
Meshack Musundi29-May-12 19:47
mvaMeshack Musundi29-May-12 19:47 
GeneralMy vote of 5 Pin
burndavid9327-May-12 13:13
Memberburndavid9327-May-12 13:13 
GeneralRe: My vote of 5 Pin
Meshack Musundi27-May-12 20:59
mvaMeshack Musundi27-May-12 20:59 
Questiontnx dude Pin
Mahdi_kishislan24-May-12 9:26
MemberMahdi_kishislan24-May-12 9:26 
AnswerRe: tnx dude Pin
Meshack Musundi24-May-12 21:50
mvaMeshack Musundi24-May-12 21:50 
GeneralMy vote of 5 Pin
Carsten V2.024-May-12 9:23
MemberCarsten V2.024-May-12 9:23 
GeneralRe: My vote of 5 Pin
Meshack Musundi24-May-12 21:49
mvaMeshack Musundi24-May-12 21:49 
GeneralMy vote of 5 Pin
Mohammad A Rahman23-May-12 11:25
MemberMohammad A Rahman23-May-12 11:25 
GeneralRe: My vote of 5 Pin
Meshack Musundi24-May-12 1:41
mvaMeshack Musundi24-May-12 1:41 
Questionnot bad Pin
BillW3317-May-12 3:18
professionalBillW3317-May-12 3:18 
AnswerRe: not bad Pin
Meshack Musundi17-May-12 3:34
mvaMeshack Musundi17-May-12 3:34 
QuestionOK so here is what I think Pin
Sacha Barber16-May-12 2:23
mvaSacha Barber16-May-12 2:23 
AnswerRe: OK so here is what I think Pin
Meshack Musundi16-May-12 3:39
mvaMeshack Musundi16-May-12 3:39 
GeneralRe: OK so here is what I think Pin
Sacha Barber16-May-12 3:57
mvaSacha Barber16-May-12 3:57 
GeneralRe: OK so here is what I think Pin
Meshack Musundi16-May-12 5:13
mvaMeshack Musundi16-May-12 5:13 
GeneralRe: OK so here is what I think Pin
Sacha Barber17-May-12 0:40
mvaSacha Barber17-May-12 0: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.