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>

輸出：