Click here to Skip to main content
14,428,653 members

Bubble Breaker

Rate this:
4.82 (39 votes)
Please Sign up or sign in to vote.
4.82 (39 votes)
8 Aug 2009CPOL
A good tutorial for beginners to develop games in Silverlight.

Image 1


It is great fun to work using the Silverlight technology, and it was a very exciting experience for me to develop a game for the web. This article has good stuff for beginners who want to develop games using the Silverlight technology.

Bubble Breaker is a puzzle game developed using Silverlight. Select bubbles with the same color by clicking, and then destroy them by clicking again. The more you break with one click, the higher the score you get.

Draw Bubble

The XAML of the Bubble control is very simple. I used the Canvas control as a container because the Canvas control provides two positioning controls. Canvas contains the Border control as a child control, which allows to set the top and left coordinates easily. Finally, Button is a child of the Border control which will draw the actual bubble shape.

     <Border x:Name="CanvasBubble" Width="26" 

               Height="26" RenderTransformOrigin="0.5,0.5">
         <Button x:Name="btnBubble" Height="Auto" Width="Auto" 

                    Style="{StaticResource ButtonStyleBlue}" Click="btnBubble_Click" 


                    BorderThickness="0,0,0,0" HorizontalAlignment="Center" 


                    MouseLeave="btnBubble_MouseLeave" Cursor="Hand" 


Template and Style

In Silverlight, we can easily change the default shape of the controls. I changed the default shape of the Button to circle. Expression Blend provides an easy way to change/create templates for controls. Right click on an element and select “Edit Control Parts (Template)” and then select “Create Empty”. It opens a dialog where you can give a name for the template and press OK. Then, it shows the Design view where the user can create/change templates.

Image 2

You can also create styles for controls in Silverlight. I set a style for a button using the Style="{StaticResource ButtonStyleBlue}" property. For creating a style, select a control from the “Object and Timeline” panel and then click “Object” from the menu, click on “Edit Style” and then select “Create Empty”. It opens a form where you can set the style.

Image 3

Bubble Breaker has five colors of bubbles, and I created a style for each color. I did not create a separate template. Each style has its own template.

<Style x:Key="ButtonStyleBlue" TargetType="Button">
 <Setter Property="Background" Value="#FF1F3B53"/>
 <Setter Property="Foreground" Value="#FF000000"/>
 <Setter Property="Padding" Value="3"/>
 <Setter Property="BorderThickness" Value="1"/>
 <Setter Property="BorderBrush">
         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
             <GradientStop Color="#FFA3AEB9" Offset="0"/>
             <GradientStop Color="#FF8399A9" Offset="0.375"/>
             <GradientStop Color="#FF718597" Offset="0.375"/>
             <GradientStop Color="#FF617584" Offset="1"/>
 <Setter Property="Template">
        <ControlTemplate TargetType="Button">
            <Ellipse Height="25" Width="25" 

                StrokeThickness="1" x:Name="ellipse" 


                Stroke="#FF000000" Margin="0,0,0,0">

You can easily set the control style at runtime.

switch (_bubbleColor)
    case BubbleColor.Blue:
        btnBubble.Style = (Style)App.Current.Resources["ButtonStyleBlue"];
    case BubbleColor.Red:
        btnBubble.Style = (Style)App.Current.Resources["ButtonStyleRed"];
    case BubbleColor.Green:
        btnBubble.Style = (Style)App.Current.Resources["ButtonStyleGreen"];

Animate Bubble

Image 4

You can easily animate controls in Silverlight. Click on the “+” button. It opens a dialog where you give the name of the “Story Board”. StoryBoard is a container where you can put animation objects. A StoryBoard is saved as a resource that is available to the object that you want to animate.

  <Storyboard x:Name="StoryboardShakeBubble" RepeatBehavior="Forever">

StoryBoard provides a Begin() method to start animation and a Stop() method to stop animation.

if (Seleted)


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


About the Author

Shakeel Iqbal
Software Developer (Senior) TEO
Pakistan Pakistan
Passion and positive dedication is essential part of success. I believe on hardworking and sharing knowledge with others. I always try to be a better than I am and think positive for positive result.

My Blogs

My Linked-In Profile

Comments and Discussions

QuestionMy vote of 5 Pin
Filip D'haene8-Aug-11 4:06
MemberFilip D'haene8-Aug-11 4:06 
GeneralMy vote of 5 Pin
Boutemine Oualid24-Oct-10 8:07
MemberBoutemine Oualid24-Oct-10 8:07 
GeneralMy vote of 5 Pin
nctit0927-Jul-10 2:22
Membernctit0927-Jul-10 2:22 
GeneralGood for the beginners Pin
i_islamian11-Aug-09 2:13
Memberi_islamian11-Aug-09 2:13 
GeneralGood Article Pin
Viral Upadhyay9-Aug-09 21:46
MemberViral Upadhyay9-Aug-09 21:46 

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.

Posted 8 Aug 2009


80 bookmarked