Question

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

下面的图片描述了我想要实现的内容 - 实际上我想要DataGrid行为。使用'fixed'关键字我的意思是：

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在视觉上“保持静止”。

如何使用滚动支持

2 个答案: