Сетка с двумя рядами и прокручивающими окнами

Question

Я хотел бы иметь сетку с двумя рядами. Строки должны занимать только пространство, необходимое для них (поэтому для 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> 

EDIT Проверьте это изображение. Почему в первом ряду нет 4, почему есть пустое место внизу.

Answer 1

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

Height="100" делает содержание в 1-й строке No.4, чтобы спрятаться. Кроме того, вы сделали строки в две равные части, однако содержимое не равно, что оставляет пустое пространство в нижней части окна.

Answer 2

Там нет решения из коробки, потому что это зависит от того, что отношение вы хотите между двумя scrollviewers, в моем примере я выбираю 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; 
     } 
    } 
} 

I только использовал холст для измерения размера, доступного внутри окна, это можно сделать и по-другому ...