WPF ListBox with bottom-alignment displays at top within StackPanel

Question

I have the following XAML:

<Window x:Class="test_stacking.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <StackPanel Background="AliceBlue">

        <Canvas Background="Red">
        </Canvas>

        <ListBox Width="200" VerticalAlignment="Bottom">
            <TextBlock Text="One" />
            <TextBlock Text="Two" />
        </ListBox>

    </StackPanel>

</Window>

I would like the Canvas to be on top, and the ListBox to be on the bottom. Since the default orientation for a StackPanel is vertical, I thought I would get the Canvas and the ListBox, in that order, stacked within the StackPanel.

But instead, I get what is shown below: the ListBox is on top, and the Canvas does not show at all. What am I doing wrong?

.NET FW 4 Client Profile, Windows 7, VS 2010.

Answer 1

If it is not mandatory to use StackPanel then you can achieve that by using Grid's * sizing.

Here is an example:

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="500" Width="500">
    <Grid Background="AliceBlue">

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Canvas Background="Red">
        </Canvas>

        <ListBox Grid.Row="1" Width="200" VerticalAlignment="Bottom">
            <TextBlock Text="One" />
            <TextBlock Text="Two" />
        </ListBox>

    </Grid>
</Window>

Output:

Or

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="500" Width="500">
    <Grid Background="AliceBlue">

        <Canvas Background="Red">
        </Canvas>

        <ListBox Width="200" VerticalAlignment="Bottom">
            <TextBlock Text="One" />
            <TextBlock Text="Two" />
        </ListBox>

    </Grid>
</Window>

Output:

Answer 2

Since you haven't set any height or width to the canvas, the height and width for the canvas is set to zero and thats why its not shown in the UI.

Try this

<StackPanel Background="AliceBlue">
      <Canvas Background="Red" Width="200" Height="200">
      </Canvas>

       <ListBox Width="200" VerticalAlignment="Bottom">
             <TextBlock Text="One" />
             <TextBlock Text="Two" />
       </ListBox>

</StackPanel>