网格有两行和滚动查看器

Question

我想让Grid有两行。行应该只占用它们所需的空间（这就是Grid VerticalAlignment设置为Top的原因）。如果没有足够的空间显示两个行，则应显示滚动条。我尝试过与Auto，*，MinHeight等不同的组合，但没有成功。

<Window x:Class="WpfApplication5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfApplication5"
        Title="MainWindow" Height="388" Width="525" FontSize="25">
    <Grid VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <Border Height="100" Background="Red" >
                <StackPanel>
                    <TextBlock Text="1"/>
                    <TextBlock Text="2"/>
                    <TextBlock Text="3"/>
                    <TextBlock Text="4"/>
                </StackPanel>
            </Border>
        </ScrollViewer>
        <ScrollViewer Grid.Row="1"  HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <Border Background="Green" >
                <StackPanel>
                    <TextBlock Text="1" />
                    <TextBlock Text="2"/>
                    <TextBlock Text="3"/>
                    <TextBlock Text="4"/>
                    <TextBlock Text="5"/>
                    <TextBlock Text="6"/>
                    <TextBlock Text="7"/>
                    <TextBlock Text="8"/>
                    <TextBlock Text="9"/>
                    <TextBlock Text="10"/>
                </StackPanel>
            </Border>
        </ScrollViewer>
    </Grid>
</Window>

编辑检查此图片。为什么第一排没有4，为什么底部有空的空间。

Answer 1

<Border Height="100" Background="Red" >

Height="100"使第1行第4行的内容隐藏在里面。此外，您已将行设置为两个相等的部分，但内容不相等，这会在窗口底部留下空白区域。

Answer 2

没有开箱即用的解决方案，因为它取决于你想要两个滚动查看器之间的比例，在我的例子中我选择50/50：

<Window x:Class="WpfApplication.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

<Canvas x:Name="OverallCanvas" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <Grid x:Name="OverallGrid" Width="{Binding ElementName=OverallCanvas, Path=ActualWidth}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <ScrollViewer x:Name="Scroll1" Grid.Row="0" VerticalScrollBarVisibility="Auto">
            <StackPanel x:Name="Control1" Background="Red">
                <TextBlock Text="1.1"/>
                <TextBlock Text="1.2"/>
                <TextBlock Text="1.3"/>
                <TextBlock Text="1.4"/>
                <TextBlock Text="1.5"/>
            </StackPanel>
        </ScrollViewer>
        <ScrollViewer x:Name="Scroll2" Grid.Row="1" VerticalScrollBarVisibility="Auto">
            <StackPanel x:Name="Control2" Background="Green">
                <TextBlock Text="2.1"/>
                <TextBlock Text="2.2"/>
                <TextBlock Text="2.3"/>
                <TextBlock Text="2.4"/>
                <TextBlock Text="2.5"/>
                <TextBlock Text="2.6"/>
                <TextBlock Text="2.7"/>
                <TextBlock Text="2.8"/>
                <TextBlock Text="2.9"/>
                <TextBlock Text="2.10"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Canvas>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.SizeChanged += MainWindow_SizeChanged;
        Control1.SizeChanged += MainWindow_SizeChanged;
        Control2.SizeChanged += MainWindow_SizeChanged;
    }

    private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        UpdateScrollHeight();
    }

    private void UpdateScrollHeight()
    {
        double overallHeight = OverallCanvas.ActualHeight;
        double c1Height = Control1.ActualHeight + Control1.Margin.Top + Control1.Margin.Bottom;
        double c2Height = Control2.ActualHeight + Control2.Margin.Top + Control2.Margin.Bottom;

        if (overallHeight - c1Height - c2Height < 0)
        {
            double halfHeight = overallHeight / 2;
            double c1Additional = Math.Max(0, halfHeight - c2Height);
            double c2Additional = Math.Max(0, halfHeight - c1Height);
            Scroll1.MaxHeight = halfHeight + c1Additional;
            Scroll2.MaxHeight = halfHeight + c2Additional;
        }
        else
        {
            Scroll1.MaxHeight = double.PositiveInfinity;
            Scroll2.MaxHeight = double.PositiveInfinity;
        }
    }
}

我只使用画布来测量窗口内可用的大小，这也可以做得不同......