dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.25k stars 1.76k forks source link

CollectionView.Header Pinned on Top when scrolling #17719

Open TheStone03 opened 1 year ago

TheStone03 commented 1 year ago

Description

i would like to have the possibility to pin the header of the CollectionView to the top of it. so when scrolling it remains on the screen.

Public API Changes

CollectionView.PinHeader="true"

Intended Use-Case

this will be just a functionality like Excel.

paulvarache commented 1 year ago

Wouldn't this be the same as putting the header outside the CollectionView?

ghost commented 1 year ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

TheStone03 commented 1 year ago

Wouldn't this be the same as putting the header outside the CollectionView?

No because if you need also the horizontal scroll in the CollectionView? having an header pinned on top is good for vertical scroll of the items, and it's needed inside the same CollectionView because if the total width of the columns is bigger than the width of the control, you can use the horizontal scroll and in the same time you can scroll the header and the body.

awp-sirius commented 9 months ago

+1 I need this too

mateusfrancino commented 5 months ago

+1 I need this too

awp-sirius commented 5 months ago

It is my temporary solution for pinned the header:

<ScrollView Orientation="Both" x:Name="MainScroll">
    <Grid VerticalOptions="Start" Margin="0,0,0,10">
        <CollectionView Margin="0,36,0,0"
                        HorizontalScrollBarVisibility="Never"
                        VerticalScrollBarVisibility="Never"
                        HorizontalOptions="Fill"
                        ItemsSource="{Binding Days}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal"/>
        </CollectionView>
        <CollectionView x:Name="DaysHeader"
                        HeightRequest="36"
                        HorizontalScrollBarVisibility="Never"
                        VerticalScrollBarVisibility="Never"
                        HorizontalOptions="Fill"
                        VerticalOptions="Start"
                        InputTransparent="True"
                        ItemsSource="{Binding Days}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal"/>
            </CollectionView.ItemsLayout>
        </CollectionView>
    </Grid>
</ScrollView>
MainScroll.Scrolled += MainScroll_Scrolled;
...
private void MainScroll_Scrolled(object? sender, ScrolledEventArgs e)
{
    DaysHeader.TranslationY = e.ScrollY;
}

don't forget to unsubscribe from Scrolled in OnDisappearing

If desired, you can pin any element anywhere in the same way. But this will only work if you add a temporary solution from this issue... https://github.com/dotnet/maui/issues/19515