XAML 元素填充所有剩余空间

Question

我有一个 WPF 应用程序，我正在尝试正确定位元素。只有四个元素，所以它应该很简单，但我就是无法让它发挥作用。

一个问题是窗口会在出现时将自身调整为（大约）桌面窗口的大小，因此它没有固定大小。

元素应该从上到下堆叠，所以 Stack Panel 看起来很自然。但是第三个元素必须占用顶部两个和底部不占用的所有剩余空间。无论我尝试什么，它要么占用太多空间，要么太少。如果我给它一个具体的像素大小，我似乎只能让它工作，如上所述，这是行不通的。

我尝试过的最新产品是 Dock Panel。虽然它在 Visual Studio 设计器中看起来是正确的，但在执行时，第三个元素（画布）完全覆盖了底部元素。

我的 XAML：

<DockPanel>
    <Button x:Name="btnClose" DockPanel.Dock="Top" Content="X" 
            HorizontalAlignment="Right" Margin="0,5,5,0" VerticalAlignment="Top" 
            Width="Auto" Height="Auto" Background="Black" 
            Foreground="White" Click="btnClose_Click"/>
    <Label x:Name="lblTitle" DockPanel.Dock="Top" Content="My Title" 
           HorizontalAlignment="Center" VerticalAlignment="Top" Width="Auto" 
           Foreground="White" FontWeight="Bold" FontSize="22"/>

    <Label x:Name="lblControls" DockPanel.Dock="Bottom" Content="Placeholder" 
           HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="Auto" 
           Height="Auto" Foreground="White" FontWeight="Bold" FontSize="22"/>

    <Border x:Name="CanvasBorder" BorderBrush="White" BorderThickness="5" >
        <Canvas x:Name="cvsChart" Grid.Row="0" HorizontalAlignment="Stretch"
                VerticalAlignment="Top" Width="Auto">
        </Canvas>
    </Border>
</DockPanel>

知道如何让 Canvas 拉伸并填充其他三个不占用的所有空间吗？

更新 由于@Peter Duniho 几乎向我证明了代码有效，因此我尝试了一个实验并删除了我在窗口出现时调整大小的代码。把它拿出来，窗口完全正确地出现了。这就是我将其调整为（主要）桌面大小的方法：

public const int WINDOW_OFFSET = 10;
...

int screenWidth = (int)System.Windows.SystemParameters.PrimaryScreenWidth;
int screenHeight = (int)System.Windows.SystemParameters.PrimaryScreenHeight;

// center this window in desktop
Width = screenWidth - WINDOW_OFFSET;
Height = screenHeight - WINDOW_OFFSET;
Left = WINDOW_OFFSET/2;
Top = WINDOW_OFFSET/2;

所以我四处摸索，并在“堆栈”上找到了一条评论，该评论说要获取 WorkArea 而不是 PrimaryScreenHeight。我试过了，瞧！，整个应用程序窗口出现了。

int screenWidth = (int)System.Windows.SystemParameters.WorkArea.Width;
int screenHeight = (int)System.Windows.SystemParameters.WorkArea.Height;

事实证明，底行正在显示，我只是看不到它，因为它出现在屏幕底部下方。现在我可以看到了，我又回到了开发天堂！

感谢大家的意见！

Answer 1

对此有多种可能的方法。最直接的方法之一是将您的元素包含在Grid 中，并将除第三行高度之外的所有元素设置为Auto：

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Button x:Name="btnClose" Content="X" Grid.Row="0"
            HorizontalAlignment="Right" Margin="0,5,5,0" VerticalAlignment="Top" 
            Width="Auto" Height="Auto" Background="Black" 
            Foreground="White" Click="btnClose_Click"/>
    <Label x:Name="lblTitle" Content="My Title" Grid.Row="1"
           HorizontalAlignment="Center" VerticalAlignment="Top" Width="Auto" 
           Foreground="White" FontWeight="Bold" FontSize="22"/>

    <Label x:Name="lblControls" Content="Placeholder" Grid.Row="3"
           HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="Auto" 
           Height="Auto" Foreground="White" FontWeight="Bold" FontSize="22"/>

    <Border x:Name="CanvasBorder" BorderBrush="White" BorderThickness="5" Grid.Row="2">
      <Canvas x:Name="cvsChart" Grid.Row="0" HorizontalAlignment="Stretch"
                VerticalAlignment="Top" Width="Auto">
      </Canvas>
    </Border>
  </Grid>

网格的行定义高度的默认设置是"*"，表示将所有剩余空间分配给具有该设置的所有行。只有一行使用该设置，它会获得所有剩余空间。

这会产生一个如下所示的窗口：

（我将窗口背景设置为Gray，以便您的白色文本和边框可见。）

另一个选项实际上是使用DockPanel。在我看来，您尝试的主要问题是您将lblControls 元素设置为DockPanel.Dock="Bottom"，而它应该是Top。当我将其更改为 Top 时，它似乎对我来说工作正常。

根据您在下面的评论，您似乎确实希望将lblControls 设置为DockPanel.Dock="Bottom"，实际上您发布的代码似乎也可以满足您的需求。我不清楚与您发布的代码有何不同以及您希望它做什么。如果您能提供一个可靠地重现问题的良好 Minimal, Complete, and Verifiable code example 会更好。

Answer 2

移除画布的垂直对齐方式