centering-text-on-a-wpf-shape

http://thatstoday.com/article/1160750/centering-text-on-a-wpf-shape

 

 

 

In a WPF application I am building right now, I had a need to create different sets of shapes and put some text within those shapesThe various shapes I needed were things like rectangles, circles, ellipses and triangles.

WPF can create these shapes; however, shapes in WPF are not containers, so you cannot add any text inside of themThis article will show you how to put text into each of these shapes in a couple of different ways.

Using a Border Control

If you wish to put text into an Ellipse, you can simulate this using a Border control and play with the Width, Padding and CornerRadius properties of this control.

Below is some sample code that draws text like that shown in Figure 1.

<Border CornerRadius="50"
        Width="60"
        Margin="10"
        Padding="4"
        Background="Aquamarine"
        BorderBrush="Black"
        BorderThickness="1">
   <TextBlock HorizontalAlignment="Center">Test</TextBlock>
</Border>

 
Figure 1: Using a Border control to simulate an ellipse.

You can set the width and height of the Border control to create a circle as well.

Below is some XAML that creates a circle with text in the middle as shown in Figure 2.

<Border CornerRadius="50"
        Width="60"
        Height="60"
        Margin="10"
        Padding="0,20,0,0"
        Background="Aquamarine"
        BorderBrush="Black"
        BorderThickness="1">
  <TextBlock HorizontalAlignment="Center">Test
  </TextBlock>
</Border>

 

Figure 2: Using a Border control to simulate a circle.

Using a VisualBrush

If you wish to use a Triangle and put some text within that triangle, you will need to use a Polygon control to create that triangle.

For example, here is code to create a triangle without any words in it.

<Polygon Points="25,0 5,30 45,30"
         Fill="LightBlue"
         Stroke="Black"
         StrokeThickness="2" />

To add words, like that shown in Figure 3, you need to use this Polygon control as the background of a TextBlock control.

The XAML shown below is what is used to create Figure 3.

<TextBlock Text="Test"
           Width="50"
           Height="50"
           Padding="13,28,0,0">
   <TextBlock.Background>
     <VisualBrush>
       <VisualBrush.Visual>
          <Polygon Points="25,0 5,30 45,30"
                   Fill="LightBlue"
                   Stroke="Black"
                   StrokeThickness="2" />
       </VisualBrush.Visual>
     </VisualBrush>
   </TextBlock.Background>
</TextBlock>

There are two keys to this XAML.

First, you use the VisualBrush object of the Background of the TextBlock object to give you a place to put the Polygon controlSecondly, 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 valuesYou will see that you need to adjust the Padding property to make the text fall into the correct location.
 

Figure 3: Using a Visual Brush.

Here is another example of a Visual Brush, this time using an Ellipse control.

The results of this XAML can be seen in Figure 4.

<TextBlock Text="Test"
           Height="40"
           Width="40"
           Padding="8,10,0,0">
  <TextBlock.Background>
    <VisualBrush>
      <VisualBrush.Visual>
         <Ellipse Height="20"
                  Width="20"
                  Fill="LightBlue" />
      </VisualBrush.Visual>
    </VisualBrush>
  </TextBlock.Background>
</TextBlock>

Notice the Padding is different from the Padding used 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.

 
Figure 4: Using an Ellipse as the background for a TextBlock

Summary

This article presented a couple of different methods of placing text in the middle of shape objects in WPF.

You do have to do some tweaking of properties to get the text to appear in the middle of the shape, but for many uses, these techniques work wellIn my next blog post, I will show you how to use a Canvas, a Shape, a TextBlock and a multi-binding value converter to center the text automatically.

 

NOTE: You can download the complete sample code at my website.

http://www.pdsa.com/downloads Choose Tips & Tricks, then "WPF Text and Shapes" from the drop-down.

Good Luck With Your Coding,
Paul Sheriff