-1

这实际上不是 WPF，而是 Avalonia，但它们几乎相同，所以我想我会在这两个类别中问这个问题。我这里有个问题。此窗口包含顶部具有“名称”和“描述”按钮的网格，它们下方的 2 个 StackPanel 中的一些项目以及将它们分开的 GridSplitter。我的问题是，我如何只使底部项目可滚动？如果我用 ScrollViewer 包围我的网格，它将滚动所有网格，包括顶部的“名称”和“描述”按钮，并且我只想滚动底部元素（在我的代码中由 3 个 StackPanel 表示）。此外，左侧和右侧的元素应同时滚动。令人困惑的是，我什至不能将所有元素都作为 ScrollViewer 的子元素，因为它只能有一个元素作为子元素。我可以'

它看起来如何

<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>

4

1 回答 1

0

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

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

于 2020-03-31T06:10:25.277 回答