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>
Was it helpful?

Solution

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.

OTHER TIPS

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>

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

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top