Tuesday, January 11, 2011

Create Custom Speech Bubbles in Silverlight.

by mbcrump via Michael Crump on 1/11/2011 4:56:03 PM

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.

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.

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

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.

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.

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.

Lets go ahead and create a rounded rectangle one by adding a Rectangle to the Artboard.

Go ahead and set the RadiuX 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.

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.