如何实现具有滚动支持的 WPF 自定义网格

Question

几个月前我问过类似的问题，但现在我遇到了不同的问题，我不知道如何解决。

下图描述了我想要实现的——实际上我想要 DataGrid 行为。使用“固定”关键字我的意思是：

1) 当我使用垂直滚动条时，标题总是可见的，如果我使用水平滚动条，标题会移动 2）当我使用水平滚动条时，行总是可见的，如果我使用垂直滚动条，行会移动

我需要动态创建 Grid，因为我事先不知道行数或列数。

我当前的解决方案不包括“固定行”，并且我的垂直滚动条始终不可见（图片上的橙色线）。

XAML

<Grid>
    <Grid Grid.IsSharedSizeScope="True">

        <ScrollViewer CanContentScroll="True" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Grid.Row="2" Grid.ColumnSpan="2">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="600" />
                </Grid.RowDefinitions>

                <Grid x:Name="HeaderDaysGrid" Margin="10,0,0,0" Grid.Row="0" ShowGridLines="False">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150" MaxWidth="150"/>
                        <ColumnDefinition Width="*" MaxWidth="240"/>
                        <ColumnDefinition Width="*" MaxWidth="240"/>
                        <ColumnDefinition Width="*" MaxWidth="240"/>
                        <ColumnDefinition Width="*" MaxWidth="240"/>
                        <ColumnDefinition Width="*" MaxWidth="240"/>
                        <ColumnDefinition Width="*" MaxWidth="240"/>
                        <ColumnDefinition Width="*" MaxWidth="240"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="35"/>
                    </Grid.RowDefinitions>
                </Grid>

                <Grid x:Name="SchedulerGridWrapper" Grid.Row="1" Margin="10,0,0,5">
                    <ScrollViewer x:Name="SchedulerScrolViewer" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Height="600">
                        <Grid x:Name="WeekSchedulerGrid" ShowCustomGridLines="False" ScrollViewer.CanContentScroll="True" />
                    </ScrollViewer>
                </Grid>
            </Grid>
        </ScrollViewer>
    </Grid>
</Grid>

在后面的代码中我有这样的东西：

private void CreateWeekGrid()
    {
        WeekSchedulerGrid.Children.Clear();
        WeekSchedulerGrid.RowDefinitions.Clear();
        WeekSchedulerGrid.ColumnDefinitions.Clear();
        HeaderDaysGrid.Children.Clear();

        CreateColumnDefinition(WeekSchedulerGrid, NUMBER_OF_COLUMNS, GRID_COLUMN_WIDTH);
        CreateRowDefinition(ref WeekSchedulerGrid, _numberOfRows);

        for(int row = 0; row < _numberOfRows; row++)
        {
            TextBlock textBlock = new TextBlock { Text = "Some row name"};

            Grid.SetRow(textBlock, row);
            Grid.SetColumn(textBlock, 0);
            WeekSchedulerGrid.Children.Add(textBlock);
        }

        foreach (var item in _headerList)
        {
            HeaderDaysGrid.Children.Add(item);
        }
    }

    private void CreateRowDefinition(ref SchedulerGrid grid, int numberOfRows)
    {
        for (int row = 0; row < numberOfRows; row++)
        {
            RowDefinition gridRow = new RowDefinition();
            gridRow.MinHeight = 100;
            gridRow.MaxHeight = 300;

            grid.RowDefinitions.Add(gridRow);
        }
    }

    private void CreateColumnDefinition(ref SchedulerGrid grid, int numberOfColumns, int columnWidth)
    {
        for (int colIndex = 0; colIndex < numberOfColumns; colIndex++)
        {
            ColumnDefinition gridCol = new ColumnDefinition();
            grid.ColumnDefinitions.Add(gridCol);

            if (colIndex == 0)
            {
                gridCol.Width = new GridLength(1, GridUnitType.Star);
                gridCol.MaxWidth = 150;
            }
            else
            {
                gridCol.Width = columnWidth;
            }
        }
    }

使用此解决方案，我不确定如何实现“固定行”以及如何在图片中描述功能。代码隐藏、XAML 和绑定还是其他？

我可能无法加入“固定行”和一个网格中的所有单元格 - 因为滚动条。 “固定行”、“固定标题”和“所有单元格”需要单独的网格吗？但是如何创建这样的布局和期望的行为呢？我真的不确定。

此外，这个自定义网格用作调度程序，并在他的单元格中显示一些自定义事件（用户控件），所以我可能无法使用 DataGrid。抱歉英语不好。

Answer 1

我在下一条路上解决了这个问题。我有三个网格。如果您查看图像“固定标题”，“固定行”和“内容的灰色表面”现在是单独的网格。 我也有三个滚动查看器。只有内容的滚动查看器可见。其他滚动查看器被设置为隐藏，但是当内容滚动查看器位置发生更改时，我会在代码中更新它们的值。

XAML

<Grid">
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <ScrollViewer x:Name="HeaderDaysScrolViewer" CanContentScroll="True" Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
        <Grid x:Name="HeaderDaysGrid" Margin="10,0,0,0" ShowGridLines="False"/>
    </ScrollViewer>

    <ScrollViewer x:Name="VerticalScrolViewer" CanContentScroll="True" Grid.Row="1" Grid.Column="0" 
                  HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
        <Grid x:Name="VerticalDataGrid" ShowCustomGridLines="True" GridLineThickness="0.5" GridLineBrush="#FF434343"/>
    </ScrollViewer>

    <ScrollViewer x:Name="SchedulerScrolViewer" HorizontalScrollBarVisibility="Visible" VerticalAlignment="Stretch"
                    VerticalScrollBarVisibility="Visible" ScrollChanged="SchedulerScrolViewer_ScrollChanged" Grid.Row="1" Grid.Column="1" Margin="10,0,0,5">
        <Grid>
            <Grid x:Name="WeekSchedulerGrid" ShowCustomGridLines="False" ScrollViewer.CanContentScroll="True"/>
        </Grid>
    </ScrollViewer>
</Grid>

后面的代码

private void SchedulerScrolViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
    {
        HeaderDaysScrolViewer.ScrollToHorizontalOffset(e.HorizontalOffset);
        OverviewTypesScrolViewer.ScrollToVerticalOffset(e.VerticalOffset);
    }

Answer 2

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition x:Name="HeaderDays" Height="35"/>
    <RowDefinition x:Name="ScrollAreaRows" Height="600"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="HeaderRows" Width="35"/>
    <ColumnDefinition x:Name="ScrollAreaColumns" Width="600"/>
  </Grid.ColumnDefinitions>

  <ScrollViewer x:Name="DataScroller" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" Grid.Row="1" Grid.Column="1">
    <Grid x:Name="DataGrid" Height="{Binding Height, ElementName=ScrollAreaRows, UpdateSourceTrigger=PropertyChanged}" Widht="{Binding Width, ElementName=ScrollAreaColumns, UpdateSourceTrigger=PropertyChanged}">
  </ScrollViewer>

名为“DataGrid”的网格应该水平和垂直滚动，同时让外部网格的 row0 和 column0 在视觉上“保持静止”。