Create Custom Speech Bubbles in Silverlight.
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:
- You do not want to increase the size of your .XAP by including extra .dll’s.
- You do not have Expression Blend or the license to the use the .dll’s.
- 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.
Leave a Comment