Как разделить сетку, чтобы прокручивать только некоторые элементы? - PullRequest
Новая
       35

Как разделить сетку, чтобы прокручивать только некоторые элементы?

0 голосов
/ 31 марта 2020

На самом деле это не WPF, а Avalonia, но они почти идентичны, поэтому я решил задать вопрос в обеих категориях. У меня есть проблема здесь. Это окно содержит Grid с кнопками «Имя» и «Описание» в верхней части, некоторые элементы в 2 StackPanels под ними и GridSplitter, разделяющие их обе. У меня вопрос, как сделать прокручивание только нижних элементов? Если я окружу свою сетку с помощью ScrollViewer, она будет прокручивать все сетки, включая кнопки «Имя» и «Описание» вверху, и я хочу прокручивать только нижние элементы (представленные в моем коде 3 StackPanels). Кроме того, элементы слева и справа должны прокручиваться одновременно. Смущает то, что я не могу даже поместить все свои элементы в дочерние элементы ScrollViewer, потому что он может иметь только один элемент в качестве дочерних. И я не могу окружить свои 3 StackPanels какой-нибудь панелью, потому что я больше не смогу помещать их в разные ячейки сетки.

How it looks

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

1 Ответ

0 голосов
/ 31 марта 2020

Вам нужен настроенный шаблон содержимого ScrollViewer с заголовками столбцов за пределами области прокрутки. Вы можете скопировать и вставить копию по умолчанию и обернуть ScrollContentPresenter https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Default/ScrollViewer.xaml#L7

В заголовках столбцов необходимо использовать SharedSizeGroup, чтобы сделать их такой же ширины, как ячейки содержимого.

...