Dockpanel修复底部子项

Question

我正在尝试构建一个布局，将两行的底部固定为始终可见。问题是，底部一行的内容必须在顶部，这使得使用dockpanel变得困难。下面是一个简短的概述：

所有窗口的here is a link with pictures：

(很抱歉，stackoverflow还不允许我发布图片。)

第一个窗口是当有足够的可用空间时应该是什么样子，底部(蓝色)坚持顶部(红色)。

代码如下所示：

<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和子订单。我尝试了使用一个或多个网格的各种布局，但不能让它工作。我该怎么做呢？

编辑：@publicgk:你说得对，第二个窗口是错误的，我更新了链接。

此外，我会试着更好地解释我自己。考虑到第一行是完全红色的，第二行是其余的(蓝色和白色加在一起)。然后，第一个代码示例为我提供了第一个和第二个窗口:虽然第二行的内容(蓝色部分)在顶部(window1，这是我想要的)，但当我调整窗口大小时(窗口2)，第二行不是固定的/总是可见的。

第二个代码示例生成窗口3和4，当窗口足够大时，内容位于第二行的底部(窗口3，不是我想要的)，即使我调整窗口的大小，第二行也是可见的(窗口4，这就是我想要的)，所以第二行与第一行重叠。

总而言之，当有足够的空间时，我需要行的行为像窗口1，当没有足够的空间时，行的行为像窗口4。

Edit2:我忘了提一下，第一行应该包含内容，其大小未知且可变，因此使用网格并设置第一行的高度或最大高度将不起作用。然而，第二行的高度是已知的，并且可以直接设置。

下面是一个示例，它显示了这个问题：

<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大小到您想要显示的内容，因此在下面的示例中，顶部部分将调整大小以固定其内容，但可以缩小，底部行的大小固定为底部内容，并且当窗口大小小于顶部行时将重叠。

 <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>

结果：

​

​