AndreiMisiukevich/XamarinFormsProfilePage

Fixed header with streching on scrolling event

stefancvetkovic opened this issue · 7 comments

stefancvetkovic commented

Hi again!
I was just looking zour profileScreen and I tried to implement something like:
https://drive.google.com/file/d/1bu7f7PKWDfjFmTTWxP2te6_ed5gt9qrb/view?usp=sharing

Here is the code:

   <AbsoluteLayout>
            <ScrollView x:Name="RootScrollView"
                    AbsoluteLayout.LayoutFlags="All"
                    AbsoluteLayout.LayoutBounds="0,0,1,1"
                    Scrolled="OnRootScrollViewScrolled">
                <AbsoluteLayout>
                    <StackLayout
                    x:Name="EmptyLayout"
                    BackgroundColor="Gray"
                    AbsoluteLayout.LayoutFlags="WidthProportional"
                    AbsoluteLayout.LayoutBounds="0,0,1,268"
                    Spacing="0"
                    InputTransparent="True">
                     
                    </StackLayout>
                    <xforms:SfListView 
                        AbsoluteLayout.LayoutFlags="WidthProportional"
                        AbsoluteLayout.LayoutBounds="0,268,1,-1"
                        x:Name="_listView" 
                        ItemSize="89"
                        BackgroundColor="{StaticResource GrayBackgroundForList}"
				        ItemsSource="{Binding StockDetails}">
                    <xforms:SfListView.ItemTemplate>
                            <DataTemplate>
                                <cellviews:BalanceFramesCellView/>
                            </DataTemplate>
                        </xforms:SfListView.ItemTemplate>
                    </xforms:SfListView>

                    <!-- Sticky Header-->
                    <Frame
                    BackgroundColor="Red"
                        Opacity="0.3"
                    x:Name="TabsLayout"
                    CornerRadius="0"
                    HasShadow="True"
                    AbsoluteLayout.LayoutFlags="WidthProportional"
                    AbsoluteLayout.LayoutBounds="0,0,1,268">
                    </Frame>
                </AbsoluteLayout>
            </ScrollView>
        </AbsoluteLayout>

only that I need now is to change height of the TabsLayout frame when Im doing a scroll:

 private void OnRootScrollViewScrolled(object sender, ScrolledEventArgs e)
        {
            var position = EmptyLayout.Height + Max(0, RootScrollView.ScrollY - EmptyLayout.Height);
            AbsoluteLayout.SetLayoutBounds(TabsLayout, new Rectangle(0, position, 1, 268));
            if(position > EmptyLayout.Height)
            {
                AbsoluteLayout.SetLayoutBounds(TabsLayout, new Rectangle(0, position, 1, 268-position));
                //TabsLayout.HeightRequest = TabsLayout.HeightRequest - RootScrollView.ScrollY;
                //AbsoluteLayout.SetLayoutBounds(TabsLayout, new Rectangle(0, position, 1, 268 - RootScrollView.ScrollY));
            }
        }

But it doesnt work very well.. the thing is that header needs to be fixed on top with height for example 270, and when I do scrolling to go like animation-transition to 90

AndreiMisiukevich commented

Hi, I don't have access to the file you shared

AndreiMisiukevich commented

I think this repository is not very helpful for achieving your need.
That's quite a different thing.

stefancvetkovic commented

I almost succeeded, but I need only to resize and stick to top whiole scrolling..

AndreiMisiukevich commented

I almost succeeded, but I need only to resize and stick to top whiole scrolling..

image

AndreiMisiukevich commented

Well, anyway you should change the position and height request by Scrolled event, right?
I don't think I can help here :( Because it requires time to try (just need to find how to change height and position...)

stefancvetkovic commented

Sorry for late reply. It's a pity that xf guys didn't realised that this is a must have for scrolling lists..I know that there is a huge amount of work on other stuff, but still..

  • 👍1