Dockpanel修復底部兒童

Question

我試圖建立一個佈局，將修復兩行的底部始終可見。問題是，底部行的內容必須位於頂部，這使得使用dockpanel很困難。這裏有一個簡短的概述：

here is a link with pictures所有窗口：

（對此感到遺憾，但計算器不會讓我張貼圖片還沒有..）

的第一個窗口是它應該如何看當有足夠的空間可用時，底部（藍色）粘在頂部（紅色）。

的代碼如下所示：

<DockPanel> 

    <Grid VerticalAlignment="Top" 
      Background="Red" 
      DockPanel.Dock="Top"> 
     <Grid Height="100" /> 
    </Grid> 

    <Grid Height="20" 
      Background="Blue" 
      VerticalAlignment="Top" 
      DockPanel.Dock="Bottom" /> 

</DockPanel> 

但是當我大小的窗口，使第二排不適合了，第二行是不固定的，將是不可見的，當窗口太小：窗口2

所以我想是這樣的：

<DockPanel> 
    <Grid Height="20" 
      Background="Blue" 
      DockPanel.Dock="Bottom" /> 

    <Grid VerticalAlignment="Top" 
      Background="Red" 
      DockPanel.Dock="Top"> 
     <Grid Height="100" /> 
    </Grid> 
</DockPanel> 

這使我有足夠的可用空間以下內容：窗口3

和這個當我調整窗口大小：窗口4

底部是固定的。這裏的問題是，當空間太多時，第二行不會粘到頂部，而是像第三張圖片一樣粘到底部。 我已經玩過DockPanel.LastChildFill和DockPanel中的子訂單。我嘗試過使用一個或多個網格的各種佈局，但無法使其工作。 我該如何去做這件事？

編輯： @publicgk：你說得對，第二個窗口是錯誤的，我更新的鏈接。

此外，我會盡力解釋一下自己。 考慮到第一行是完全紅色的，第二行是其餘的（藍色和白色一起）。然後第一個代碼示例給我第一個和第二個窗口：第二行（藍色部分）的內容位於頂部（window1，這是我想要的），第二行不是固定/總是可見的我調整窗口大小（窗口2）。

第二個代碼示例生成窗口3和4，而當窗口足夠大（窗口3，不是我想要的）時，內容位於第二行的底部，第二行即使在調整大小時也是可見的窗口（窗口4，這就是我想要的），所以第二行與第一行重疊。

總而言之，我需要的行表現得像窗口1時，有足夠的空間，像窗4時，有沒有。

編輯2：我忘了提及，第一行應該包含內容，其大小是未知和可變的，所以使用網格並設置第一行的高度或maxheight將不起作用。然而第二行的高度是已知的並且可以直接設置。

這裏有一個樣品，這說明這個問題：

<Window x:Class="WpfApplication2.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:WpfApplication2" 
    Title="MainWindow" 
    Width="525" 
    Height="350"> 
<Window.Resources> 
    <local:RandomHeightConverter x:Key="RandomHeightConverter"/> 
</Window.Resources> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="100*" MaxHeight="100"/> 
     <RowDefinition Height="20" /> 
    </Grid.RowDefinitions> 

    <Grid Grid.Row="0" Background="Red" Height="{Binding Converter={StaticResource RandomHeightConverter}}" /> 
    <Grid Grid.Row="1" Background="Blue" /> 
</Grid> 

public class RandomHeightConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     return new Random().Next(20, 100); 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

會產生這樣的結果： variable first row problem

Answer 1

不知道如果你能做到使用DockPanel此佈局，但您可以使用Grid來做這種佈局。

像這樣的東西複製你正在嘗試做

<Window x:Class="WpfApplication9.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:WpfApplication9" 
     Title="MainWindow" Height="209" Width="525" Name="UI"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="100*" MaxHeight="100" /> 
       <RowDefinition Height="20" /> 
      </Grid.RowDefinitions> 
      <Grid Grid.Row="0" Background="Red" /> 
      <Grid Grid.Row="1" Background="Blue" /> 
     </Grid> 
</Window> 

或結合RowDefinition大小，以要顯示的內容，所以在下面的例子中，頂部sction將大小來解決它的內容，但可以縮小時，底部行的大小固定爲底部內容，並在窗口大小小於頂部行時重疊。

<Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" MaxHeight="{Binding ElementName=topContent, Path=ActualHeight, Mode=OneTime}" /> 
      <RowDefinition Height="{Binding ElementName=bottomContent, Path=ActualHeight,Mode=OneTime}" /> 
     </Grid.RowDefinitions> 
     <Grid x:Name="topContent" Grid.Row="0" > 
      <!--your top content--> 
      <Grid Height="200" Background="Red" /> 
     </Grid> 
     <Grid Grid.Row="1" > 
      <!--your bottom content--> 
      <Grid x:Name="bottomContent" VerticalAlignment="Top" Height="20" Background="Blue" /> 
     </Grid> 
    </Grid> 

結果：