Click here to Skip to main content
11,577,258 members (62,951 online)
Click here to Skip to main content

WPF: Belt Clock

, 16 May 2012 CPOL 22.9K 1.9K 36
Rate this:
Please Sign up or sign in to vote.
A WPF belt clock

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.

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.

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.

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.

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.

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.

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.

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.

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 an avid programmer with a bias towards WPF and VB.NET. He has about 5 years of programming experience initially starting off with Java before shifting to .NET, thanks to the allure of WPF. He currently resides in a small town in Kiambu county, Kenya.

Awards;
  • CodeProject MVP 2013
  • CodeProject MVP 2012
  • Best VB.NET article of January 2015
  • Best VB.NET article of August 2013
  • Best VB.NET article of February 2013
  • Best VB.NET article of October 2012
  • Best VB.NET article of July 2012
  • Best VB.NET article of February 2012
  • Best VB.NET article of January 2012
  • Best VB.NET article of November 2011
  • Best VB.NET article of June 2011
  • Best VB.NET article of May 2011
  • Best VB.NET article of March 2011
  • Best VB.NET article of February 2011
  • Best VB.NET article of January 2011
  • Best VB.NET article of December 2010
  • Best VB.NET article of November 2010

You may also be interested in...

Comments and Discussions

 
QuestionWow ! Pin
vincennes4-Mar-14 6:08
membervincennes4-Mar-14 6:08 
GeneralRe: Wow ! Pin
Meshack Musundi4-Mar-14 9:13
professionalMeshack 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
mvpMeshack Musundi7-Oct-12 6:10 
GeneralMy vote of 5 Pin
Christian Amado28-Aug-12 12:06
memberChristian 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
mvpMeshack Musundi29-May-12 19:48 
GeneralMy vote of 5 Pin
Jαved28-May-12 21:05
memberJαved28-May-12 21:05 
GeneralRe: My vote of 5 Pin
Meshack Musundi29-May-12 19:47
mvpMeshack 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
mvpMeshack Musundi27-May-12 20:59 
Questiontnx dude Pin
Mani_Kish24-May-12 9:26
memberMani_Kish24-May-12 9:26 
AnswerRe: tnx dude Pin
Meshack Musundi24-May-12 21:50
mvpMeshack Musundi24-May-12 21:50 
GeneralMy vote of 5 Pin
CarstenV224-May-12 9:23
memberCarstenV224-May-12 9:23 
GeneralRe: My vote of 5 Pin
Meshack Musundi24-May-12 21:49
mvpMeshack 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
mvpMeshack Musundi24-May-12 1:41 
Questionnot bad Pin
CIDev17-May-12 3:18
memberCIDev17-May-12 3:18 
AnswerRe: not bad Pin
Meshack Musundi17-May-12 3:34
mvpMeshack Musundi17-May-12 3:34 
QuestionOK so here is what I think Pin
Sacha Barber16-May-12 2:23
mvpSacha Barber16-May-12 2:23 
AnswerRe: OK so here is what I think Pin
Meshack Musundi16-May-12 3:39
mvpMeshack Musundi16-May-12 3:39 
GeneralRe: OK so here is what I think Pin
Sacha Barber16-May-12 3:57
mvpSacha Barber16-May-12 3:57 
GeneralRe: OK so here is what I think Pin
Meshack Musundi16-May-12 5:13
mvpMeshack Musundi16-May-12 5:13 
GeneralRe: OK so here is what I think Pin
Sacha Barber17-May-12 0:40
mvpSacha Barber17-May-12 0:40 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150603.1 | Last Updated 17 May 2012
Article Copyright 2012 by Meshack Musundi
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid