Home » Articles


Sponsored links

CodeDigest Navigation

Technology News
No News Feeds available at this time.

Community News
No News Feeds available at this time.
The Padding Ball game in WPF

By Balamurali Balaji
Posted On Jun 06,2008
Article Rating:
Average Rating: 5
No of Ratings: 1
No of Comments: 0
Category: .NetFramework
Print this article.

The Padding Ball game in WPF

Padding Ball v1.0




Remember, in those good olden days, there was a game to play the ball that moves around all corners of your screen using a little pad and the “Brick and Ball” game that had swept all our joy by breaking the bricks stacked on top of the window. One could not easily forget the same game available in windows form in the recent days.

This article deals with the development of a little game called “Paddling Ball” using WPF technology and is just a demo-like game that uses minor user interactions with not so much of graphical items in it.


Game Window


XAML allows you to create menu, ball and pad objects declaratively as below:


<Window x:Class="PaddingBall.Window1"



    Title="Padding Ball v1.0" Height="500" Width="700" Background="Gray" Name="playground" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" SizeToContent="Manual">

    <Canvas Width="700" Height="500">

        <Menu VerticalAlignment="Top" HorizontalAlignment="Left"           

             Height="20" Width="700" Background="AliceBlue" Foreground="Blue">

            <MenuItem Header="File">

                <MenuItem Header="Start Game" Background="AliceBlue" Click="StartGame"></MenuItem>

                <MenuItem Header="Exit" Background="AliceBlue" Click="ExitGame"></MenuItem>


            <MenuItem Header="About" Click="ShowAboutBox"></MenuItem>



        <Grid Height="462" Width="700">


            <ColumnDefinition Width="700*" />

            <ColumnDefinition Width="0*" />

            <ColumnDefinition Width="0*" />


        <Rectangle Margin="114,132,0,0" Name="ball" Stroke="Black" RadiusX="120" RadiusY="120" Fill="Blue" Height="38" VerticalAlignment="Top" Stretch="UniformToFill" HorizontalAlignment="Left" Width="38">


                <BevelBitmapEffect BevelWidth="11" />



                <BitmapEffectInput />



        <Rectangle Height="13" Margin="200,390,0,0" Name="pad" Stroke="Black" VerticalAlignment="Bottom" Fill="Black" HorizontalAlignment="Left" Width="100" />







As you look at it, each of the menuitem is bind to the respective event handlers for the Click event. When you open the application, you could see a window with the Menu bar on top of it. You start the game by selecting the “Start Game” command in the File menu.


WPF implications


While developing this game with WPF, I had experienced a part easier when the drawings for Ball and Pad, the background are created, thanks to XAML. On the other hand, the behaviour part of the game still had its own intricacies especially during the animation of the ball and pad. Nevertheless, the controlling of animation with the keyboard interaction by the user had also thrown new ideas in WPF programming.


Most of the animation and positioning of ball and pad was done with the Thickness structure found in System.Windows namespace and ThicknessAnimation class found in System.Windows.Media.Animation namespace of the PresentationFramework.dll assembly.


The Thickness structure describes the thickness of a frame around a rectangle, in this case, Ball and Pad. Four Double values describe the Left, Top, Right, and Bottom sides of the rectangle that encapsulates the Ball and Pad objects, respectively.

The ThicknessAnimation class creates a transition between two target values. To set its target values, use its From and To properties of the Ball and Pad elements inside the window.


Needless to say, we need a StoryBoard object to host the whole animation. The ThicknessAnimation instances created for Ball and the Pad objects, along with the specified duration is added as a child to the StoryBoard and use the Begin method to start the animation.


Here is the code for animating the Pad as the user presses the Right and Left arrow keys.


        void AnimatePad(double x)


            moveThePad = new ThicknessAnimation();

            moveThePad.From = PadCurrentPos;

            moveThePad.To = new Thickness(pad.Margin.Left+x, pad.Margin.Top, 0, 0);

            moveThePad.Duration = new Duration(TimeSpan.FromSeconds(0));

            Storyboard.SetTargetName(moveThePad, "pad");

            Storyboard.SetTargetProperty(moveThePad, new PropertyPath(Rectangle.MarginProperty));

            PlayPad = new Storyboard();

            if (PlayPad.Children.Count > 0)



            PlayPad.Begin(this, true);



The value x refers to the increment or decrement values specified for the target location(Left property of the Margin) for the pad. This could be easily done by writing the following code in the KeyDown event of the Window.


    void playground_KeyDown(object sender, KeyEventArgs e)


            PadCurrentPos = pad.Margin;

            double xPadValue=0;

            if (e.Key == Key.Left)

                if (pad.Margin.Left > -100)

                    xPadValue = -50;

            if (e.Key == Key.Right)

                if (pad.Margin.Left <= (playground.Width - pad.Width))

                    xPadValue = 50;





Animating the Ball


When the Ball moves around within the window, the Left and Top properties of the Margin property changes and promptly triggers the LayoutUpdated event of the particular WPF element. Therein, we can write some code to control the behaviour of the animated Ball like checking if it crosses the boundaries of the window or if the Ball is hit by the Pad.


        void ball_LayoutUpdated(object sender, EventArgs e)


            BallCurrentPos = ball.Margin;

            if (((ball.Margin.Top - ball.Height) >= pad.Margin.Top) && ball.Margin.Left >= pad.Margin.Left && ball.Margin.Left <= (pad.Margin.Left + 30))


                BallNextPos.Top = 0;

                BallNextPos.Left = BallCurrentPos.Left - 200;

                AnimateBall(BallNextPos, BallCurrentPos);


            else if (((ball.Margin.Top - ball.Height) >= pad.Margin.Top) && ball.Margin.Left >= (pad.Margin.Left + 30) && ball.Margin.Left <= (pad.Margin.Left + 60))


                BallNextPos.Top = 0;

                AnimateBall(BallNextPos, BallCurrentPos);


            else if (((ball.Margin.Top - ball.Height) >= pad.Margin.Top) && ball.Margin.Left >= (pad.Margin.Left + 60) && ball.Margin.Left <= (pad.Margin.Left + 100))


                BallNextPos.Top = 0;

                BallNextPos.Left = BallCurrentPos.Left + 200;

                AnimateBall(BallNextPos, BallCurrentPos);


            else if (ball.Margin.Top <= 5)


                BallNextPos.Top = playground.Height;

                AnimateBall(BallNextPos, BallCurrentPos);


            else if (ball.Margin.Left <= 0)


                BallNextPos.Left = playground.Width;

                AnimateBall(BallNextPos, BallCurrentPos);


            else if (ball.Margin.Left >= playground.Width - 50)


                BallNextPos.Left = 0;

                AnimateBall(BallNextPos, BallCurrentPos);



You would get useful information and instructions about the game when you select the “About” command in the menu bar.



Download Source





It is a nice experience to go back and bring the Pad and Ball to the WPF environment. There is still a lot more to do with this such as Duration of the Game, Number of Balls, and Counting of points scored by the player, besides just playing the ball with the pad. When these features get implemented, it would be perfect game for anyone to see WPF in full action. Hope I would come up with these things with the version 2 of the game.

Similar Articles

You can contribute to CodeDiget.Com:
Donate to
Article Feedback