Элемент XAML заполняет все оставшееся пространство

Question

У меня есть приложение WPF, и я пытаюсь правильно установить элементы. Есть только четыре элемента, поэтому это должно быть довольно прямолинейно, но я просто не могу заставить его работать.

Одна морщина заключается в том, что при ее появлении размер окна изменяется примерно на размер окна рабочего стола, поэтому он не имеет фиксированного размера.

Элементы должны быть уложены сверху вниз, поэтому панель стека кажется естественной. Но третий элемент должен заняться всем оставшимся пространством, которое нет в верхних и нижних. Независимо от того, что я пробовал, он занимал слишком много места или слишком мало. Я мог бы только заставить его работать, если бы я дал ему конкретный размер пикселя, который, как объяснялось выше, не будет работать.

Последняя вещь, которую я пробовал, - это панель док-станции. Хотя он выглядит правильно в дизайнере 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> 

Любая идея о том, как получить этот холст, чтобы растянуть и заполнить все пространство остальные три не принимают?

UPDATE Поскольку @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. Я пробовал это и voila!, появляется все окно приложения.

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

Удалить вертикальное выравнивание холста