Click here to Skip to main content
Click here to Skip to main content

WPF Suanpan

, 3 Apr 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
A WPF abacus
Screenshot_1.png

Introduction

The WPF Suanpan is simply an abacus existing in XAML form. The goal of this article is not to make you a follower of bead arithmetic, though you are free to convert, but to give you an idea of how I went about creating this application.

Suanpan

The suanpan is a Chinese abacus that can be used for both decimal and hexadecimal computation. With the suanpan, you can carry out addition, subtraction, multiplication, division, square root, and cube root operations.

The suanpan is divided into two sections. The top section contains beads referred to as heaven beads while the bottom section, below the separator beam, contains beads referred to as earth beads. Each column of the suanpan contains two heaven beads and five earth beads. A heaven bead has a value of 5 while an earth bead has a value of 1.

The rightmost column of the suanpan represents ones, the column to its immediate left tens, then hundreds, thousands,... The following screenshot represents the number 804,

Screenshot_2.png

If you want to learn more about the suanpan, the following resources could prove to be useful:

Requirements

To run the project provided from the download link above, you require either of the following:

  • Visual Studio 2010
  • Expression Blend

If you're using VS 2008, you can download the source files from here.

NB: If you're using the Express edition of Visual Studio, ensure that you open the solution using Visual Basic Express.

WPF Suanpan

How It Works

To move a bead/beads, place the cursor over a bead, press the left mouse button and move the bead/beads up or down. To reset the beads so that they are all away from the separator beam, double-click the separator beam.

To drag around WPF Suanpan, do so using the 'wooden' frames.

Design and Layout

The frame of the WPF Suanpan is made of polished rosewood, the heaven beads of oak... Ok, that's not it. I designed the WPF Suanpan in Expression Design and added some extra elements in Expression Blend.

There are two content controls of interest, the HeavenGrid and the EarthGrid.

Screenshot_3.png

Screenshot_4.png

The HeavenGrid contains ten Canvases and so does the EarthGrid.

Screenshot_5.png

There are two UserControls, EarthBead and HeavenBead. The element of interest in both is the Thumb control, which is clipped in both and the Opacity set to zero. The following image shows the Thumb in the EarthBead control with its Opacity property at 100%.

Screenshot_6.png

The Code

During the MainWindow Loaded event, we add beads to their respective Canvases,

Private Sub MainWindow_Loaded(ByVal sender As Object, _
                              ByVal e As System.Windows.RoutedEventArgs) _
                              Handles Me.Loaded
    LoadEarthBeads()
    LoadHeavenBeads()
End Sub

In the event handler above, we call the LoadEarthBeads method that adds EarthBeads to the Canvases in EarthGrid:

Private Sub LoadEarthBeads()
    For Each eCanvas As Canvas In EarthGrid.Children
        Dim y As Double = eCanvas.ActualHeight
        Dim i As Integer = 1
        Do
            Dim eB As New EarthBead()
            y -= eB.Height
            eB.EarthNumber = i
            Canvas.SetLeft(eB, 2)
            Canvas.SetTop(eB, y)
            eCanvas.Children.Add(eB)
            i += 1
        Loop While i < 6
        i = 0
    Next
End Sub

EarthBead has a variable named EarthNumber which is assigned a value before a bead is added to a Canvas. The EarthBeads will have values like so:

Screenshot_7.png

The LoadHeavenBeads method, that is also called in the MainWindow Loaded event handler, adds HeavenBeads to the respective Canvases in HeavenGrid:

Private Sub LoadHeavenBeads()
    For Each hCanvas As Canvas In HeavenGrid.Children
        Dim i As Integer
        Dim y As Double = 0
        Do
            Dim hB As New HeavenBead()
            Canvas.SetLeft(hB, 2)
            Canvas.SetTop(hB, y)
            hCanvas.Children.Add(hB)
            y += hB.Height
            i += 1
            hB.HeavenNumber = i
        Loop While i < 2
        i = 0
    Next
End Sub

Each HeavenBead's HeavenNumber is also assigned a value:

Screenshot_8.png

EarthBead

To move a EarthBead, we cater to the DragDelta event of its Thumb control:

Private Sub EarthThumb_DragDelta(ByVal sender As Object, _
                                 ByVal e As DragDeltaEventArgs) _
                                 Handles EarthThumb.DragDelta
    ' Check whether movement is vertical.
    If Math.Abs(e.VerticalChange) > Math.Abs(e.HorizontalChange) Then
        If e.VerticalChange < 0 Then
            MoveEarthBeadUp(e)
        Else
            MoveEarthBeadDown(e)
        End If
    Else
        Exit Sub
    End If
End Sub

In the event handler above, MoveEarthBeadUp is called to move the bead upwards:

Private Sub MoveEarthBeadUp(ByVal e As DragDeltaEventArgs)
    Dim y As Double = Canvas.GetTop(Me)
    If (Me.EarthNumber = 5) Then
        If (y > 0) Then
            Canvas.SetTop(Me, (y - shift))
        Else
            Canvas.SetTop(Me, 0)
        End If
    ElseIf (Me.EarthNumber = 4) Then
        If (y > Me.Height) Then
            Canvas.SetTop(Me, (y - shift))
        Else
            Canvas.SetTop(Me, Me.Height)
        End If
    ElseIf (Me.EarthNumber = 3) Then
        If (y > (Me.Height * 2)) Then
            Canvas.SetTop(Me, (y - shift))
        Else
            Canvas.SetTop(Me, (Me.Height * 2))
        End If
    ElseIf (Me.EarthNumber = 2) Then
        If (y > (Me.Height * 3)) Then
            Canvas.SetTop(Me, (y - shift))
        Else
            Canvas.SetTop(Me, (Me.Height * 3))
        End If
    ElseIf (Me.EarthNumber = 1) Then
        If (y > (Me.Height * 4)) Then
            Canvas.SetTop(Me, (y - shift))
        Else
            Canvas.SetTop(Me, (Me.Height * 4))
        End If
    End If
    MoveBeadsAbove(e)
End Sub

The MoveBeadsAbove method, that is called in the method above, moves upwards any beads that the selected bead collides with on its upward journey:

' Move beads/bead above the bead being moved
' when this bead collides with bead above.
Private Sub MoveBeadsAbove(ByVal e As DragDeltaEventArgs)
    Dim earthCanvas As Canvas = CType(Me.Parent, Canvas)

    For Each eB As EarthBead In earthCanvas.Children
        If (eB.EarthNumber <> Me.EarthNumber) Then
            Dim My_Y As Double = Canvas.GetTop(Me)
            Dim eB_Y As Double = Canvas.GetTop(eB)

            If (eB_Y < My_Y) And (My_Y < (eB_Y + eB.Height)) Then
                eB.EarthThumb_DragDelta(Nothing, e)
            End If
            ' Ensure bead above has stopped at its limit.
            If (eB.EarthNumber = 5) And (eB_Y < 0) Then
                Canvas.SetTop(eB, 0)
            ElseIf (eB.EarthNumber = 4) And (eB_Y < eB.Height) Then
                Canvas.SetTop(eB, eB.Height)
            ElseIf (eB.EarthNumber = 3) And (eB_Y < (eB.Height * 2)) Then
                Canvas.SetTop(eB, (eB.Height * 2))
            ElseIf (eB.EarthNumber = 2) And (eB_Y < (eB.Height * 3)) Then
                Canvas.SetTop(eB, (eB.Height * 3))
            ElseIf (eB.EarthNumber = 1) And (eB_Y < (eB.Height * 4)) Then
                Canvas.SetTop(eB, (eB.Height * 4))
            End If
        End If
    Next
End Sub

In the EarthThumb DragDelta event handler, we also call MoveEarthBeadDown in order to move a bead downwards:

Private Sub MoveEarthBeadDown(ByVal e As DragDeltaEventArgs)
    Dim y As Double = Canvas.GetTop(Me)
    Dim earthCanvas As Canvas = CType(Me.Parent, Canvas)
    Dim parentHeight As Double = earthCanvas.ActualHeight

    If (Me.EarthNumber = 5) Then
       If (y < (parentHeight - (Me.Height * 5))) Then
            Canvas.SetTop(Me, (y + shift))
       Else
            Canvas.SetTop(Me, (parentHeight - (Me.Height * 5)))
       End If
    ElseIf (Me.EarthNumber = 4) Then
        If (y < (parentHeight - (Me.Height * 4))) Then
            Canvas.SetTop(Me, (y + shift))
        Else
            Canvas.SetTop(Me, (parentHeight - (Me.Height * 4)))
        End If
    ElseIf (Me.EarthNumber = 3) Then
        If (y < (parentHeight - (Me.Height * 3))) Then
            Canvas.SetTop(Me, (y + shift))
        Else
            Canvas.SetTop(Me, (parentHeight - (Me.Height * 3)))
        End If
    ElseIf (Me.EarthNumber = 2) Then
        If (y < (parentHeight - (Me.Height * 2))) Then
            Canvas.SetTop(Me, (y + shift))
        Else
            Canvas.SetTop(Me, (parentHeight - (Me.Height * 2)))
        End If
    ElseIf (Me.EarthNumber = 1) Then
        If (y < (parentHeight - Me.Height)) Then
            Canvas.SetTop(Me, (y + shift))
        Else
            Canvas.SetTop(Me, (parentHeight - Me.Height))
        End If
    End If
    MoveBeadsBelow(e)
End Sub

The MoveBeadsBelow method moves downwards any bead that the selected bead collides with on its downward journey:

Private Sub MoveBeadsBelow(ByVal e As DragDeltaEventArgs)
    Dim earthCanvas As Canvas = CType(Me.Parent, Canvas)
    Dim parentHeight As Double = earthCanvas.ActualHeight

    For Each eB As EarthBead In earthCanvas.Children
        If (eB.EarthNumber <> Me.EarthNumber) Then
            Dim My_Y As Double = Canvas.GetTop(Me)
            Dim eB_Y As Double = Canvas.GetTop(eB)

            If (eB_Y > My_Y) And ((My_Y + Me.Height) > eB_Y) Then
                eB.EarthThumb_DragDelta(Nothing, e)
            End If
            ' Ensure bead below has stopped at its limit.
            If (eB.EarthNumber = 5) And _
            (eB_Y > (parentHeight - (Me.Height * 5))) Then
                Canvas.SetTop(eB, (parentHeight - (Me.Height * 5)))
            ElseIf (eB.EarthNumber = 4) And _
            (eB_Y > (parentHeight - (Me.Height * 4))) Then
                Canvas.SetTop(eB, (parentHeight - (Me.Height * 4)))
            ElseIf (eB.EarthNumber = 3) And _
            (eB_Y > (parentHeight - (Me.Height * 3))) Then
                Canvas.SetTop(eB, (parentHeight - (Me.Height * 3)))
            ElseIf (eB.EarthNumber = 2) And _
            (eB_Y > (parentHeight - (Me.Height * 2))) Then
                Canvas.SetTop(eB, (parentHeight - (Me.Height * 2)))
            ElseIf (eB.EarthNumber = 1) And _
            (eB_Y > (parentHeight - Me.Height)) Then
                Canvas.SetTop(eB, (parentHeight - Me.Height))
            End If
        End If
    Next
End Sub

HeavenBead

To move a HeavenBead, we cater to its Thumb control's DragDelta event:

Private Sub HeavenThumb_DragDelta(ByVal sender As Object, _
                                  ByVal e As DragDeltaEventArgs) _
                                  Handles HeavenThumb.DragDelta
    ' Check whether movement is vertical.
    If Math.Abs(e.VerticalChange) > Math.Abs(e.HorizontalChange) Then
        If e.VerticalChange < 0 Then
            MoveHeavenBeadUp(e)
        Else
            MoveHeavenBeadDown(e)
        End If
    Else
        Exit Sub
    End If
End Sub

The MoveHeavenBeadUp method is called to move a bead upwards:

Private Sub MoveHeavenBeadUp(ByVal e As DragDeltaEventArgs)
    Dim y As Double = Canvas.GetTop(Me)

    If (Me.HeavenNumber = 1) Then
        If (y > 0) Then
            Canvas.SetTop(Me, (y - shift))
        Else
            Canvas.SetTop(Me, 0)
        End If
    ElseIf (Me.HeavenNumber = 2) Then
        If (y > Me.Height) Then
            Canvas.SetTop(Me, (y - shift))
        Else
            Canvas.SetTop(Me, Me.Height)
        End If
    End If
    MoveBeadAbove(e)
End Sub

To move the bead that the selected bead collides with on its upward journey, the MoveBeadAbove method is called:

Private Sub MoveBeadAbove(ByVal e As DragDeltaEventArgs)
    Dim heavenCanvas As Canvas = CType(Me.Parent, Canvas)

    For Each hB As HeavenBead In heavenCanvas.Children
        If (hB.HeavenNumber <> Me.HeavenNumber) Then
            Dim My_Y As Double = Canvas.GetTop(Me)
            Dim hB_Y As Double = Canvas.GetTop(hB)

            If (hB_Y < My_Y) And (My_Y < (hB_Y + hB.Height)) Then
                hB.HeavenThumb_DragDelta(Nothing, e)
            End If
            ' Ensure bead above has stopped at its limit.
            If (hB_Y < 0) Then
                Canvas.SetTop(hB, 0)
            End If
        End If
    Next
End Sub

The MoveHeavenBeadDown method, that is called in HeavenThumb's DragDelta event handler, moves a bead downwards:

Private Sub MoveHeavenBeadDown(ByVal e As DragDeltaEventArgs)
    Dim y As Double = Canvas.GetTop(Me)
    Dim heavenCanvas As Canvas = CType(Me.Parent, Canvas)
    Dim parentHeight As Double = heavenCanvas.Height

    If (Me.HeavenNumber = 2) Then
        If (y < (parentHeight - Me.Height)) Then
            Canvas.SetTop(Me, (y + shift))
        Else
            Canvas.SetTop(Me, (parentHeight - Me.Height))
        End If
    ElseIf (Me.HeavenNumber = 1) Then
        If (y < (parentHeight - (Me.Height * 2))) Then
            Canvas.SetTop(Me, (y + shift))
        Else
            Canvas.SetTop(Me, (parentHeight - (Me.Height * 2)))
        End If
    End If
    MoveBeadBelow(e)
End Sub

To move the bead that the selected bead collides with on its downward journey, the MoveBeadBelow method is called:

Private Sub MoveBeadBelow(ByVal e As DragDeltaEventArgs)
    Dim heavenCanvas As Canvas = CType(Me.Parent, Canvas)
    Dim parentHeight As Double = heavenCanvas.ActualHeight

    For Each hB As HeavenBead In heavenCanvas.Children
        If (hB.HeavenNumber <> Me.HeavenNumber) Then
            Dim My_Y As Double = Canvas.GetTop(Me)
            Dim hB_Y As Double = Canvas.GetTop(hB)

            If (hB_Y > My_Y) And ((My_Y + Me.Height) > hB_Y) Then
                hB.HeavenThumb_DragDelta(Nothing, e)
            End If
            ' Ensure bead below has stopped at its limit.
            If (hB_Y > (parentHeight - hB.Height)) Then
                Canvas.SetTop(hB, (parentHeight - Me.Height))
            End If
        End If
    Next
End Sub

Resetting WPF Suanpan

Remember I explained in the How it Works section that to reset the beads, you double-click on the separator beam. What you're actually double-clicking is a button whose Opacity is set to zero:

Private Sub ResetButton_MouseDoubleClick(ByVal sender As Object, _
                     ByVal e As System.Windows.Input.MouseButtonEventArgs) _
                     Handles ResetButton.MouseDoubleClick
    ' Clear heaven beads.
    For Each hCanvas As Canvas In HeavenGrid.Children
        hCanvas.Children.Clear()
    Next
    ' Clear earth beads.
    For Each eCanvas As Canvas In EarthGrid.Children
        eCanvas.Children.Clear()
    Next
    ' Reload beads.
    LoadEarthBeads()
    LoadHeavenBeads()
End Sub

Conclusion

That's it. I hope you enjoyed reading the article and that it was useful in one way or another. If you've been influenced into becoming a practitioner of bead arithmetic, then good for you. I personally favor button arithmetic.

History

  • 1st Apr, 2011: 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 has developed several applications, and written several articles about them, which can be viewed here on CodeProject. He currently resides in a small town in Kiambu county, Kenya.
 
Awards;
  • CodeProject MVP 2013
  • CodeProject MVP 2012
  • 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

Comments and Discussions

 
QuestionMy vote 5 PinprofessionalDuncan Edwards Jones13-Mar-14 3:24 
GeneralRe: My vote 5 PinprofessionalMeshack Musundi13-Mar-14 3:32 
QuestionMy vote of 5 PinmemberKenneth Haugland14-Oct-13 9:41 
GeneralRe: My vote of 5 PinmvpMeshack Musundi15-Oct-13 0:10 
GeneralMy vote of 3 PinmemberJyothikarthk7-Apr-11 20:14 
GeneralRe: My vote of 3 PinmemberMeshack Musundi7-Apr-11 22:32 
GeneralMy vote of 3 Pinmemberring_03-Apr-11 21:43 
GeneralRe: My vote of 3 PinmvpSacha Barber4-Apr-11 1:36 
GeneralRe: My vote of 3 PinmemberMeshack Musundi4-Apr-11 2:06 
GeneralRe: My vote of 3 PinmvpSacha Barber4-Apr-11 2:43 
GeneralRe: My vote of 3 PinmemberMeshack Musundi4-Apr-11 3:12 
GeneralRe: My vote of 3 PinmemberMeshack Musundi4-Apr-11 1:57 
GeneralRe: My vote of 3 Pinmemberring_04-Apr-11 5:10 
GeneralOrganize your articles to a book Pinmemberkarukutimothy1-Apr-11 5:15 
GeneralRe: Organize your articles to a book PinmemberMeshack Musundi1-Apr-11 6:15 
GeneralMy vote of 5 PinmemberSlacker0071-Apr-11 2:58 
GeneralRe: My vote of 5 PinmemberMeshack Musundi1-Apr-11 3:46 

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
Web02 | 2.8.141216.1 | Last Updated 4 Apr 2011
Article Copyright 2011 by Meshack Musundi
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid