Geeks With Blogs

News
Michael Crump Microsoft MVP, INETA Community Champion and XAML Advocate.

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.

image

Simply drag it over a corner of the Ellipse.

image

image

Select Combine then Unite and you will have a Path.

image

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

image

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

image

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

image

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

image

…looking good

image

image

Select Combine then Unite and you will have a Path.

image

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

image

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.

image

alt Subscribe to my feed

Posted on Tuesday, January 11, 2011 10:56 AM Silverlight | Back to top

Copyright © mbcrump | Powered by: GeeksWithBlogs.net