XAML: почему кнопка сверху, когда я четко сказал идти снизу?

Question

В XAML я хочу, чтобы кнопка шла внизу красного прямоугольника.

Я четко говорю:

"HorizontalAlignment =" Right "
VerticalAlignment = "Bottom"

Идет вправо, но остается на вершине. Почему это так?

альтернативный текст http://tanguay.info/web/external/buttonTop.png

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="MultiplePages.Page"
    Width="300" Height="150">

    <StackPanel HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" Width="300" Height="150" Orientation="Vertical">

        <StackPanel Width="300" Height="100" Background="Blue">
            <TextBlock x:Name="theTextBlock" Text="This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. " 
            TextWrapping="Wrap" Height="100" Width="300" HorizontalAlignment="Left"/>
        </StackPanel>

        <StackPanel Width="300" Height="50" Background="Red">

            <Button Name="Switch" Content="Switch Page" Width="100" Height="20"
            HorizontalAlignment="Right" 
            VerticalAlignment="Bottom"/>

        </StackPanel>

    </StackPanel>

</UserControl>

Answer 1

StackPanel предназначен для получения размеров от его элементов и контейнера (в зависимости от его ориентации), хотя то, что вы сделали, выглядит правильно, это не то, как StackPanel «предназначен» для использования. Хотя это выглядит так, как будто это установленная высота, его фактическая высота (которую он использует для размещения дочерних элементов управления) - это размер его содержимого (кнопка). StackPanel имеет свое применение, но если вы делаете что-то, кроме простого стека элементов управления, то вам, как правило, следует использовать что-то еще.

Вы можете исправить это, прикрепив сетку размера внутрь:

<StackPanel Width="300" Height="50" Background="Red">
          <Grid Height="50">
            <Button Name="Switch" Content="Switch Page" Width="100" Height="20"
            HorizontalAlignment="Right" VerticalAlignment="Bottom"
            />
          </Grid>
        </StackPanel>

Или, для этого конкретного макета, вы можете посмотреть на DockPanel, который будет вести себя так, как вы ожидаете.