具有整体滚动的多个DataGrids

Question

这就是我想要实现的目标。我将在下面解释。

我有多个网格，我想显示每个网格的一点点。基本上，每个DataGrid应该占用相同数量的屏幕，其间需要GridSplitter来调整大小。有一个最小尺寸，所以如果屏幕很小，也会有整体滚动。

我怎样才能做到这一点？

<ScrollViewer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <DataGrid />
        <GridSplitter Grid.Row="1" Height="5" 
            VerticalAlignment="Center" HorizontalAlignment="Stretch" />
        <DataGrid Grid.Row="2" />
        <GridSplitter Grid.Row="3" Height="5" 
            VerticalAlignment="Center" HorizontalAlignment="Stretch" />
        <DataGrid Grid.Row="4" />
    </Grid>
</ScrollViewer>

如果屏幕尺寸变小，那么ScrollViewer没有工作，则无法看到所有DataGrid。如果我添加ScrollViewer，则DataGrid会显示所有结果，并且会有一个巨大的滚动。

Answer 1

为网格定义MinHeight和MaxHeight。

<ScrollViewer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="100" MaxHeight="200" />
            <RowDefinition Height="5" />
            <RowDefinition Height="Auto" MinHeight="100" MaxHeight="200" />
            <RowDefinition Height="5" />
            <RowDefinition Height="Auto" MinHeight="100" MaxHeight="200" />
        </Grid.RowDefinitions>

        <DataGrid x:Name="datagrid1" ItemsSource="{Binding}"
             ScrollViewer.HorizontalScrollBarVisibility="Auto"
             ScrollViewer.VerticalScrollBarVisibility="Auto" />

        <GridSplitter Grid.Row="1" HorizontalAlignment="Stretch"/>

        <DataGrid x:Name="datagrid2" Grid.Row="2" ItemsSource="{Binding}"                          
             ScrollViewer.HorizontalScrollBarVisibility="Auto"
             ScrollViewer.VerticalScrollBarVisibility="Auto" />

        <GridSplitter Grid.Row="3" HorizontalAlignment="Stretch"/>

        <DataGrid x:Name="datagrid3" Grid.Row="4" ItemsSource="{Binding}"                          
             ScrollViewer.HorizontalScrollBarVisibility="Auto"
             ScrollViewer.VerticalScrollBarVisibility="Auto" />
    </Grid>
</ScrollViewer>

对于GridSplitters，添加HorizontalAlignment="Stretch"。

但仍有问题 - 在拖动拆分器之前，DataGrid的ScrollBars不会显示。

Answer 2

我想出了如何做到这一点。不幸的是，这都是代码。

xaml：

<ScrollViewer x:Name="scrollViewer" VerticalScrollBarVisibility="Auto">
    <Grid x:Name="grid">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <DataGrid />
        <GridSplitter Grid.Row="1" Height="5" 
            VerticalAlignment="Center" HorizontalAlignment="Stretch" />
        <DataGrid Grid.Row="2" />
        <GridSplitter Grid.Row="3" Height="5" 
            VerticalAlignment="Center" HorizontalAlignment="Stretch" />
        <DataGrid Grid.Row="4" />
    </Grid>
</ScrollViewer>

连接一些事件：

scrollViewer.Loaded += ScrollViewerLoaded;
scrollViewer.SizeChanged += ScrollViewerElementSizeChanged;

做一些调整大小：

private void ScrollViewerLoaded( object sender, RoutedEventArgs e )
{
    if( grid != null && scrollViewer != null && 
        grid.ActualHeight > scrollViewer.ActualHeight )
    {
        if( grid.RowDefinitions.Count < 2 )
        {
            return;
        }

        // If the Grid is larger than the ScrollViewer, set the
        // Grids row sizes evenly.
        var rowDefinitions = grid.RowDefinitions.ToList();
        for( var i = 0; i < rowDefinitions.Count; i += 2 )
        {
            var rowDefinition = rowDefinitions[i];
            rowDefinition.Height = new GridLength( 200 );
        }
    }
}

private void ScrollViewerElementSizeChanged( object sender, SizeChangedEventArgs e )
{
    if( grid.RowDefinitions.Count < 2 )
    {
        return;
    }

    var totalHeight = grid.RowDefinitions.Sum( rd => rd.ActualHeight );
    if( totalHeight < grid.ActualHeight )
    {
        // If the Grids total row heights are less than the height
        // of the Grid, adjust the last row height so they are equal.
        var lastRow = grid.RowDefinitions.Last();
        var otherRowsHeight = totalHeight - lastRow.ActualHeight;
        var newHeight = grid.ActualHeight - otherRowsHeight;
        lastRow.Height = new GridLength( newHeight );
    }
}