How can I vertically align a TextBox inside a StackPanel?

Question

In the following XAML, the word "Test" centers horizontally but not vertically.

How can I get it to center vertically?

<Window x:Class="TestVerticalAlign2343.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStartupLocation="CenterScreen"
    Title="Window1" Height="768" Width="1024">
    <DockPanel LastChildFill="True">
        <Slider x:Name="TheSlider"
                DockPanel.Dock="Left"
                Orientation="Vertical"
                HorizontalAlignment="Center"
                HorizontalContentAlignment="Center"
                Minimum="0"
                Maximum="10"
                Cursor="Hand"
                Value="{Binding CurrentSliderValue}"
                IsDirectionReversed="True"
                IsSnapToTickEnabled="True"
                Margin="10 10 0 10"/>
        <Border DockPanel.Dock="Right" Background="Beige"
                Padding="10"
                Margin="10"
                CornerRadius="5">
            <StackPanel Height="700">
                <TextBlock
                    Text="Test"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    FontSize="200" x:Name="TheNumber"/>

            </StackPanel>
        </Border>
    </DockPanel>
</Window>

score 18 · Accepted Answer · answered Dec 17 '09 at 01:45

18

A stackpanel, no matter how you stretch it, will collapse around the children. you can't make it grow more than that. Basically, that "Height=700" is not helping you.

So either set VerticalAlignment on the StackPanel to "center" so that the stackpanel goes into the center of the dockpanel...or remove the stackpanel altogether and set VerticalAlignment="Center" on the TextBlock.

answered Dec 17 '09 at 01:45

santosc

1,273
8
13

5

+1 for "a stackpanel, no matter how you stretch it, will collapse around its children". – Edward Tanguay Dec 17 '09 at 08:54

score 12 · Answer 2 · edited May 23 '17 at 12:02

12

Seems I asked this question 10 months ago, I got the above scenario to work by replacing the StackPanel with DockPanel LastChildFill=True like this:

<DockPanel LastChildFill="True">
    <TextBlock
        DockPanel.Dock="Top"
        Text="Test"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        FontSize="200" x:Name="TheNumber"/>
</DockPanel>

edited May 23 '17 at 12:02

Community

1
1

answered Dec 17 '09 at 01:18

Edward Tanguay

189,012
314
712
1,047

This is just what I needed. I put a StackPanel inside the DockPanel, and then set the StackPanel's VerticalAlignment to Center. The StackPanel content was then centered in the StackPanel, which was expanded to fill the DockPanel. – Adam Prescott Aug 28 '12 at 13:28
I didnt find DockPanel in my toolbox. but you can use ContentControl it works just fine – NadaNK May 03 '13 at 09:14

score 6 · Answer 3 · answered Aug 27 '14 at 06:47

I stumbled across this which seems to work perfectly:

<Grid>
    <TextBlock Text="My Centered Text"
               TextAlignment="Center" 
               VerticalAlignment="Center"/>
</Grid>

The Grid ensures that the single TextBox within it fills the solitary cell in the grid and the VerticalAlignment in the TextBlock ensures that the text is centered within than.

Simply position/align your text horizontally however you require (the above snippet centers it in this axis also, but changing this doesn't alter the vertical centering).

I have the following scenario: However, only the first Textblock is aligned vertically in the center. The second Textblock is still top aligned. — Daniel Retief Fourie, Oct 28 '15 at 09:11

score -3 · Answer 4 · answered Dec 17 '09 at 01:05

-3

Inside the StackPanel that surrounds the TextBlock, check out VerticalContentAlignment.

answered Dec 17 '09 at 01:05

Jarrett Meyer

19,333
6
58
52

4

But StackPanel doesn't seem to have VerticalContentAlignment as does e.g. Button: http://msdn.microsoft.com/en-us/library/system.windows.controls.control.verticalcontentalignment.aspx – Edward Tanguay Dec 17 '09 at 01:09

How can I vertically align a TextBox inside a StackPanel?

4 Answers4

Linked