底部对齐的WPF ListBox显示在StackPanel的顶部

Question

我有以下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>

我希望Canvas位于顶部，ListBox位于底部。由于StackPanel的默认方向是垂直的，我想我会按顺序将Canvas和ListBox堆叠在StackPanel中。

但相反，我得到的内容如下所示：ListBox位于顶部，而Canvas根本没有显示。我做错了什么？

.NET FW 4 Client Profile，Windows 7，VS 2010。

Answer 1

由于您没有为画布设置任何高度或宽度，因此画布的高度和宽度设置为零，这也就是UI未显示的原因。

试试这个

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

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

</StackPanel>

Answer 2

如果不是必须使用StackPanel，那么你可以通过使用Grid的*大小来实现。

以下是一个例子：

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

<强>输出：

或

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

<强>输出：