none
Vertical Text Alignment in Textblock

    Question

  • Is there a way to align text vertically (i.e. centered) inside a textblock? It seems that it defaults to aligning to the top, and I can't seem to find a way to change it.

     

    Thanks in advance!

    Monday, June 26, 2006 9:31 PM

Answers

  • Once you've set the height on the TextBlock, there is no easy way to get
    content to center itself in the middle of the TextBlock (no way to set
    vertical content alignment, that is). WPF only supports vertical
    positioning within a TextBlock that is using automatic height/width
    (rather than explicitly set height/width per your example). One thing
    you could do to fake this effect (and this is less than ideal) is set
    the padding property, like so:

    <StackPanel>
    <Border BorderBrush="Black" BorderThickness="1" Height="200"
    Width="200">
    <TextBlock Height="100" Width="100" Background="Red"
    Padding="50"
    VerticalAlignment="Center" TextAlignment="Center">Hello
    World</TextBlock>
    </Border>
    </StackPanel>

    ... and even then, it would be hard to find the right combination of
    positioning properties to get that content to be absolutely centered.

    Could you describe your scenario in more detail, please? It would be
    good to know why you require to set height/width on the TextBlock. Maybe
    there's another way to get the text behavior that you're looking for...


    Tuesday, June 27, 2006 7:04 PM
  • try putting another border within the first border.  the inner border will have the height/width and background color that you want.  the text block is then free to size itself and set VerticalAlignment=Center.

    in general i've found it's easiest to let text elements size themselves, and place them in a container that has size and background, etc.

    <Border BorderBrush="Black" BorderThickness="1" Height="200"
    Width="200">
        <Border Height="100" Width="100" Background="Red" VerticalAlignment="Center">
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Center" TextAlignment="Center" >Hello World</TextBlock>
        </Border>
    </Border>

     

    Wednesday, June 28, 2006 1:20 PM

  • If you need to interact with the letters by clicking on them then Button
    with plain text content would be a good choice as it comes with mouse
    behaviors built in and you can use VerticalContentAlignment on the
    button to get the placement you need.

    Whether you use Button or TextBlock using a Grid with * sized columns
    will allow this to work without having to specify explicit widths or
    heights. See the ColumnDefinition class page for more information on *
    sizing.

    Good luck.

    Wednesday, June 28, 2006 12:15 AM

All replies

  • Try the VerticalAlignment property (possible values are Top, Bottom,
    Center, or Stretch):

    http://windowssdk.msdn.microsoft.com/en-us/system.windows.frameworkeleme
    nt.verticalalignment.aspx

    Something like this should do what you're looking for:

    <Page WindowTitle="TextBlock"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <StackPanel>
    <Border BorderBrush="Black" BorderThickness="1" Height="200"
    Width="200">
    <TextBlock VerticalAlignment="Center">Hello World</TextBlock>
    </Border>
    </StackPanel>
    </Page>

    Good luck.

    Monday, June 26, 2006 11:10 PM
  • The VerticalAlignment property doesn't align the text within the textblock, only within its parent object. You can see this easily by adding a red background to the textblock:

    <Page WindowTitle="TextBlock"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <StackPanel>
    <Button />
    <Border BorderBrush="Black" BorderThickness="1" Height="200"
    Width="200">
    <TextBlock Height="100" Width="100" Background="Red" VerticalAlignment="Center" TextAlignment="Center" >Hello World</TextBlock>
    </Border>
    </StackPanel>
    </Page>

     

    I added the TextAlignment property to show you what I mean by only being able to center the align the text horizontally within the textblock.

    Any other ideas? Thanks again in advance!

    Monday, June 26, 2006 11:49 PM
  • Once you've set the height on the TextBlock, there is no easy way to get
    content to center itself in the middle of the TextBlock (no way to set
    vertical content alignment, that is). WPF only supports vertical
    positioning within a TextBlock that is using automatic height/width
    (rather than explicitly set height/width per your example). One thing
    you could do to fake this effect (and this is less than ideal) is set
    the padding property, like so:

    <StackPanel>
    <Border BorderBrush="Black" BorderThickness="1" Height="200"
    Width="200">
    <TextBlock Height="100" Width="100" Background="Red"
    Padding="50"
    VerticalAlignment="Center" TextAlignment="Center">Hello
    World</TextBlock>
    </Border>
    </StackPanel>

    ... and even then, it would be hard to find the right combination of
    positioning properties to get that content to be absolutely centered.

    Could you describe your scenario in more detail, please? It would be
    good to know why you require to set height/width on the TextBlock. Maybe
    there's another way to get the text behavior that you're looking for...


    Tuesday, June 27, 2006 7:04 PM
  • I need to place individual letters dynamically in a 2-d grid, which will be clicked on. My current thought is that I could do a work-around by using buttons instead...hopefully this would be an easy replacement.
    Tuesday, June 27, 2006 7:08 PM

  • If you need to interact with the letters by clicking on them then Button
    with plain text content would be a good choice as it comes with mouse
    behaviors built in and you can use VerticalContentAlignment on the
    button to get the placement you need.

    Whether you use Button or TextBlock using a Grid with * sized columns
    will allow this to work without having to specify explicit widths or
    heights. See the ColumnDefinition class page for more information on *
    sizing.

    Good luck.

    Wednesday, June 28, 2006 12:15 AM
  • try putting another border within the first border.  the inner border will have the height/width and background color that you want.  the text block is then free to size itself and set VerticalAlignment=Center.

    in general i've found it's easiest to let text elements size themselves, and place them in a container that has size and background, etc.

    <Border BorderBrush="Black" BorderThickness="1" Height="200"
    Width="200">
        <Border Height="100" Width="100" Background="Red" VerticalAlignment="Center">
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Center" TextAlignment="Center" >Hello World</TextBlock>
        </Border>
    </Border>

     

    Wednesday, June 28, 2006 1:20 PM
  • Following up on this issue (I did make the transition to Buttons), I have been trying to allow them to size themselves to fill the space.

    Given my constraints of:

    1. The # of rows & cols are not known until runtime,
    2. The buttons must placed in the grid at the initialization of the program, and
    3. The grid may need to be re-generated multiple times during runtime,

    I have found it very difficult to do so. My problem is that the grid is not actually sized to the parent object (it appears) until it is displayed (when I step into my code, the grid size is always zero).

    I may be waaay off on this, but here is what I think is happening as a side effect: At initialization, the rows/cols actual height/width are fit to the grid size (which is zero), thus making the button sizes also zero. However, because I have a character in my buttons, the buttons expand at display to fit their contents, which causes the rows/cols to expand just enough to fit the buttons, but not to fill the available grid space.

    At the actual display, this leaves me with the grid being properly sized to its parent object, while the grid cells are nowhere near filling the parent object. However, I cannot figure out what to do at this time to utilize the fact that the grid size is now correct. I tried using the grid's SizeChanged event, but it is never called after the size is actually changed to fit the space, only beforehand.

     I hope this makes sense. Thanks in advance for any help that can be provided!

    Monday, July 03, 2006 11:41 PM
  • I don't know if this has changed since 2006, but

    VerticalAlignment

     

    ="Center"

    works for me.

    • Proposed as answer by PHGamer2 Wednesday, September 15, 2010 7:05 PM
    Wednesday, September 15, 2010 7:04 PM
  • Hi,

    As far as I know there isn't a specific property to do this, so when I faced this very same inconvenience, Here is a workaround you can try.

    If you're using Grid as parent container, it'll be quite easy.

    Just add a row definition so you TextBlock is going to have a whole cell for itself. Then add your text block inside that row (and column in case you have columns too), i.e. 

    <grid>
        <grid.rowdefinitions>
            <rowdefinition height="50"></rowdefinition>
            <rowdefinition height="*"></rowdefinition>
        </grid.rowdefinitions>
    
        <textblock grid.row="0" name="TextBlock1" text="Whatever you like!" textalignment="Center" verticalalignment="Center">
        </textblock>
    </grid>

    P.S.: Get rid of the HEIGHT property, that'll mess with the positioning of you TextBlock.


    Thursday, February 16, 2012 1:07 PM
  • using padding is a good idea, easy and simple
    Monday, February 20, 2012 3:23 PM