Search code examples
c#wpfavaloniaui

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

This is not actually WPF, but Avalonia, but they are almost identical, so i figured i will ask the question in both categories. I have an issue here. This window contains Grid that has "Name" and "Description" buttons at the top, some items in 2 StackPanels below them and a GridSplitter separating them both. My question is, how do i make only the bottom items scrollable? If i surround my Grid with ScrollViewer, it will scroll all Grid including "Name" and "Description" buttons at the top, and i want to scroll only bottom elements (represented by 3 StackPanels in my code). Also, elements at the left and at the right should both be scrolled simultaneously. The confusing thing is, i can't even put all my elements as children of ScrollViewer, because it can only have one element as a child. And i can't surround my 3 StackPanels with some Panel because i won't be able to put them in different cells of the Grid anymore.

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>

Solution

  • You need a customized ScrollViewer content template with column headers outside of the scrolleble area. You can copy-paste the default one and wrap ScrollContentPresenter https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Default/ScrollViewer.xaml#L7

    Column headers need to use SharedSizeGroup to make them the same width as content cells.