我如何拆分网格以仅使某些元素可滚动？

Question

这实际上不是 WPF，而是 Avalonia，但它们几乎相同，所以我想我会在这两个类别中提出问题。我这里有个问题。这个 window 包含顶部有 "Name" 和 "Description" 按钮的网格，它们下面有 2 个 StackPanel 中的一些项目和一个将它们分开的 GridSplitter。我的问题是，如何只使底部项目可滚动？如果我用 ScrollViewer 围绕我的网格，它将滚动所有网格，包括顶部的 "Name" 和 "Description" 按钮，我只想滚动底部元素（在我的代码中由 3 个 StackPanel 表示）。此外，左侧和右侧的元素应同时滚动。令人困惑的是，我什至不能将所有元素都作为 ScrollViewer 的子元素，因为它只能有一个元素作为子元素。而且我不能用一些面板包围我的 3 个 StackPanel，因为我不能再将它们放在网格的不同单元格中。

<UserControl
x:Class="GUI.Windows.MainWindow.Elements.TaskList"
xmlns="https://github.com/avaloniaui"
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"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<UserControl.Styles>
    <Style Selector="Button.title">
        <Setter Property="Margin" Value="-1" />
        <Setter Property="BorderBrush" Value="Gray" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Height" Value="40" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="Background" Value="LightCyan" />
    </Style>
    <Style Selector="Border.element">
        <Setter Property="Margin" Value="-1" />
        <Setter Property="BorderBrush" Value="LightGray" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="CornerRadius" Value="3" />
        <Setter Property="Height" Value="50" />
        <Setter Property="Background" Value="#f0f0f0" />
    </Style>
    <Style Selector="Button.element">
        <Setter Property="Height" Value="50" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
    </Style>
    <Style Selector="TextBlock.element">
        <Setter Property="FontSize" Value="25" />
    </Style>
</UserControl.Styles>

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

    <Button
        Grid.Row="0"
        Grid.Column="0"
        Classes="title">
        Name
    </Button>

    <Button
        Grid.Row="0"
        Grid.Column="2"
        Classes="title">
        Description
    </Button>

    <GridSplitter
        Grid.Row="0"
        Grid.RowSpan="2"
        Grid.Column="1"
        Width="10"
        VerticalAlignment="Stretch"
        ZIndex="2" />

    <StackPanel
        Grid.Row="1"
        Grid.ColumnSpan="3"
        ZIndex="1">
        <ItemsControl Items="{Binding Tasks}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Classes="element" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>

    <StackPanel Grid.Row="1" Grid.Column="0">
        <ItemsControl Items="{Binding Tasks}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Classes="element">
                        <TextBlock Classes="element" Text="{Binding Name}" />
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>

    <StackPanel Grid.Row="1" Grid.Column="2">
        <ItemsControl Items="{Binding Tasks}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Classes="element">
                        <TextBlock Classes="element" Text="{Binding Description}" />
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</Grid>

Answer 1

您需要一个自定义的 ScrollViewer 内容模板，其中 headers 列位于可滚动区域之外。您可以 copy-paste 默认值并包装 ScrollContentPresenter https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Default/ScrollViewer.xaml#L7

列 headers 需要使用 SharedSizeGroup 使它们与内容单元格的宽度相同。

我如何拆分网格以仅使某些元素可滚动？

How do i split Grid to make only some of the elements scrollable?

c#

wpf

avaloniaui