Michael Crump bio photo

Michael Crump

Works @Microsoft on Windows

Twitter Google+ LinkedIn Github Youtube Flickr

image

I had a reader email me the following question:

“How do you create Speech Bubbles in Silverlight/WPF without adding any extra .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 3rd party control named FreeBubbles (I used this before Blend 4).

Unfortunately we cannot use either of these as they will both add extra .dll’s to the project.

So why wouldn’t you want to use one of those? I can think of a few reasons:

  1. You do not want to increase the size of your .XAP by including extra .dll’s.
  2. You do not have Expression Blend or the license to the use the .dll’s.
  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.

Before we get started lets 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.

image

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

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.

image

…keep going

image

…complete

image

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.

image

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

image

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.

image

Select Make Into User Control.

image

Give it a name and then Build your project.

image

image

Lets 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.