WPF列表框的底部对齐显示在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>

我希望“画布”位于顶部，“列表框”位于底部。 由于StackPanel的默认方向是垂直的，所以我认为我可以按此顺序将Canvas和ListBox堆叠在StackPanel中。

但是，我得到的是下面显示的内容：ListBox在顶部，而Canvas根本不显示。 我究竟做错了什么？

.NET FW 4客户端配置文件，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>

输出：