0

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

这是所有窗口的图片链接：

（很抱歉，但是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>

这给了我以下足够的可用空间：window 3

当我调整窗口大小时：window 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();
    }
}

这会产生这样的结果： 变量第一行问题

4

1 回答 1

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>

结果：

在此处输入图像描述 在此处输入图像描述

于 2013-03-10T21:19:38.027 回答