Create Custom Speech Bubbles in Silverlight.

Introduction

We all know what Speech Bubbles are. They are typically used in Comic Books and have appeared in many RIAs.

So how do you create them in a Silverlight Application? More importantly, how do you do this without adding external .dlls?

2 Possible Solutions Requiring External .DLLs

Right off the bat, I know at least two ways to create the speech bubbles that look just like the ones in comic books.

• Using the Callout Shapes included with Blend 4.
• Using the free 3^rd party control named FreeBubbles (I used this before Blend 4).

Unfortunately, we cannot use either of these as they will both add extra .dlls to the project and they are not as customizable as some people might want.

So Why Wouldn't You Want to Use One of Those Solutions?

I can think of a few reasons:

1. You do not want to increase the size of your .XAP by including extra .dlls.
2. You do not have Expression Blend or the license to use the .dlls.
3. You want a custom Speech Bubble that is not included in the four “Callout” Controls with Blend.

Instead of using one of these methods, we will create a Speech Bubble in Blend 4 using Path element and a TextBlock.

A Look at the Callout Shapes Included with Blend 4

Before we get started, let's look at the Callout Shapes included with Blend 4. Using Blend 4, you can simply drag/drop these controls onto your Silverlight application and you are ready to go.

We can create all of these Speech Bubbles and even some of the modern bubbles used in recent comic books. Let's get started.

That's Cool and All, But I Want Something More Custom

Start up Expression Blend 4 and select the Pen Tool.

On the Art Board, start connecting the dots like I did below. You can add a color if you wish.

…keep going

…complete

Let’s go ahead and add some text to the Speech Bubble.

Drag a TextBlock from the Panel and put it directly inside the Speech Bubble.

Go ahead and set the TextAlignment to Center for the TextBlock. and give it some text.

A Custom User Control

At this point, you could go ahead and create a user control if you want to reuse the Speech Bubble you created. Select both the Path and the TextBlock by clicking then while holding down CTRL and then Right Click them.

Select Make Into User Control.

Give it a name and then Build your project.

Making a More Traditional Speech Bubble

Let's create another one using the Ellipse for the older comic book style of Speech Bubbles. Drag an Ellipse to the Artboard and give it a color. Now, grab the Pen and drag a triangle like I did below.

Simply drag it over a corner of the Ellipse.

Select Combine, then Unite and you will have a Path.

At this point, you can go ahead and add a TextBlock like we did earlier.

And Another Speech Bubble

Let's go ahead and create a rounded rectangle one by adding a Rectangle to the Artboard.

Go ahead and set the RadiusX and RadiusY to 25 to give it rounded edges.

Let’s create another path and drag it right on top of our rounded rectangle like we did earlier.

…looking good.

Select Combine, then Unite and you will have a Path.

At this point, you can go ahead and add a TextBlock like we did earlier.

The Final Product

So let’s look at what we’ve created today using the path element and TextBlock. As you can tell, it required more work but meets the requirements. This was actually fun to do and I encourage anyone that visits my blog to send in request like this.