Centering Text on a WPF Shape Using a User Control

WPF excels at creating great looking applications.

One of the ways you can make your application look great is to add some shapes like circles, triangles and rectangles. However, the shapes in WPF do not allow you to add text (or any content) within the shape, as shapes are not containers.

In a WPF application I am building right now, I have a need to create different shapes and center text within those shapes. The shapes I need are rectangles, circles, ellipses and triangles. The problem is WPF shapes are not containers so you cannot add any text inside of them, but WPF is flexible enough that there are often several ways to work around this. In this article, I will show you a few different methods of centering text in each of these shapes.

Drawing an Ellipse/Circle Using a Border

If you wish to put text into an ellipse or a circle, you can simulate this using a Border control and play with the Width, Padding and CornerRadius properties of the Border control. I used the code snippet below to draw text within an ellipse as shown in Figure 1.

You can set the width and height of the Border control to create a circle as well. The XAML in the next snippet creates a circle with text in the middle, as shown in Figure 2.

Draw a Triangle Using a Visual Brush

To create a triangle shape in WPF you use a Polygon control. If you remember your high school math, a Polygon is a series of connected lines that have the same start and end point. The XAML below creates a triangle; however, there is no text in it because a Polygon is not a container.

To add text like that shown in Figure 3, you need to use the Polygon control as the background of a TextBlock control. The XAML shown in Listing 1 is used to create Figure 3.

Two key things make this XAML work. First, you use the VisualBrush object of the Background of the TextBlock object to give you a place to put the Polygon control. Second, depending on the text that you fill into the TextBlock control, and the width and height of the TextBlock control, you will need to play with the Padding property to align the text to the correct location. Take the above XAML and put it in a new window and then adjust the height, width and text values. You will see that you need to adjust the Padding property to make the text fall into the correct location within the Polygon.

Listing 2 shows another example of a Visual Brush, this time using an Ellipse control. Figure 4 shows the results of the XAML in Listing 2.

Notice the Padding attribute is different than when using the Polygon control. You will need to make minor adjustments based on the shape that you are using and the height and width of the control, and the text you are putting into the TextBlock.

Position a Shape on a Canvas

Using a Visual Brush within a TextBlock control works, but it is not very re-usable code. The ultimate goal of this article is to show you how to move all of this code into one user control that you can use over and over again. Before you can learn that technique, you first need to learn to use a Canvas, a Shape, a TextBlock and MultiBinding converters.

You use a WPF Canvas control to position child controls at a specified point on the Canvas. I created Figure 5 by placing a shape (you can use any control) at a certain point by setting the attached properties “Canvas.Top” and “Canvas.Left”. In Figure 5 you can see that the circle is positioned 20 points below the top of the Canvas and 40 points to the right of the Canvas’ leftmost border. I used the XAML below to create Figure 5.

Place a Shape within a Canvas

Most of the time, you want a shape to take up the same amount of width and height as the Canvas. So, you can simply set the Width and Height properties of both the Canvas control and the Shape control to be exactly the same. Since the Shape control is the child within the Canvas, it will fill up the whole Canvas. Note that you do not need to specify the Canvas.Top and Canvas.Left as the default for these is zero (0) for any child control placed in a Canvas as shown in the following XAML.

Bind Ellipse Width and Height to Canvas

The problem with the above XAML is that if you wish to change the width and the height of the Canvas and you want the shape to be the exact same height, you need to change four numbers. Instead of hard-coding the numbers on the Shape control, you can take advantage of the element-to-element binding features of WPF. Below is an example of binding the Width and Height of the ellipsis to the Width and Height of the Canvas. The XAML below will produce the circle shown in Figure 6.

By: Paul Sheriff

Paul D. Sheriff is the President of PDSA, Inc. (www.pdsa.com), a Microsoft Partner in Southern California. Paul acts as the Microsoft Regional Director for Southern California assisting the local Microsoft offices with several of their events each year and being an evangalist for them. Paul has authored several books, webcasts, videos and articles on .NET, SQL Server and SharePoint. Paul can be reached via email at PSheriff@pdsa.com or at Paul Sheriff's Inner Circle (www.PaulSheriffInnerCircle.com).

PSheriff@pdsa.com