Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I vertically align a TextBox inside a StackPanel?

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>
like image 441
Edward Tanguay Avatar asked Dec 17 '09 01:12

Edward Tanguay


People also ask

What is the difference between StackPanel and DockPanel?

For example, the order of child elements can affect their size in a DockPanel but not in a StackPanel. This is because StackPanel measures in the direction of stacking at PositiveInfinity, whereas DockPanel measures only the available size. The following example demonstrates this key difference.

How do you center something in WPF?

If you want to center each line, use a TextBlock instead, and set TextAlignment="Center" .


3 Answers

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.

like image 82
santosc Avatar answered Sep 26 '22 17:09

santosc


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>
like image 45
Edward Tanguay Avatar answered Sep 26 '22 17:09

Edward Tanguay


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).

like image 26
Deltics Avatar answered Sep 23 '22 17:09

Deltics