Question

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

所有窗口的

（抱歉，但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和dockpanel中的子订单。我已尝试使用一个或多个网格的各种布局，但无法使其工作。我该怎么做呢？

编辑： @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>

结果：

enter image description here

Dockpanel修复底部儿童

1 个答案: