Stick panel to top when scrolling

How-to Discussions
1

Hi,

i’ve seen quite complex examples but i am not able to resolve the easiest one:

how to use scrollingAnimation to stick the panel to the top when scrolling down.

any help?

thnx

   <App Background="#fff">
    <iOS.StatusBarConfig Style="Dark" />

    <JavaScript>
        function Item(text, color) {
            this.text = text;
            this.color = color
        }

        var list = [
            new Item("Item1", "#ff0000"),
            new Item("Item2", "#00ff00"),
            new Item("Item3", "#0000ff"),
            new Item("Item4", "#ff0000"),
            new Item("Item5", "#00ff00")
        ];
        module.exports = {
            list: list
        };
    </JavaScript>

    <Panel ux:Class="ListItem" Background="{color}" Height="150">
        
        <Text Value="{text}" Color="#000000" FontSize="16" Alignment="VerticalCenter" TextAlignment="Center" />

    </Panel>

    <Panel ux:Class="Header" Height="56" Background="#ffffff">
        <Text Value="HEADER" Alignment="VerticalCenter" TextAlignment="Center" TextColor="#000000"/>
    </Panel>

    <ClientPanel>
        <Header Dock="Top"/>

        <ScrollView Background="#f3f4f6" ux:Name="sc1">

            <StackPanel ux:Name="content">

                <Panel Height="100" Background="#ff44aa">
                    <Text Value="This panel should hide" Alignment="VerticalCenter" TextAlignment="Center" TextColor="#000000"/>
                </Panel>

                <Panel Height="40" Background="#aa44ff" ux:Name="stickPanel">
                    <Text Value="This panel should stick" Alignment="VerticalCenter" TextAlignment="Center" TextColor="#000000"/>
                </Panel>

                <Each Items="{list}">
                    <ListItem/>
                </Each>
    
            </StackPanel>

        </ScrollView>

    </ClientPanel>
</App>
2

You can do that

<DockPanel>
	<Header Dock="Top"/>
  <Panel Dock="Top" ux:Name="panel1" Height="100" Background="#ff44aa">
      <Text Value="This panel should hide" Alignment="VerticalCenter" TextAlignment="Center" TextColor="#000000"/>
  </Panel>

  <Panel Dock="Top"  Height="40" Background="#aa44ff" ux:Name="stickPanel">
      <Text Value="This panel should stick" Alignment="VerticalCenter" TextAlignment="Center" TextColor="#000000"/>
  </Panel>

	  <ScrollView Dock="Fill"  SnapMinTransform="false" Background="#f3f4f6" ux:Name="sc1">

	      <StackPanel ux:Name="content">

	          <Each Items="{list}">
	              <ListItem/>
	          </Each>

	      </StackPanel>

	      <ScrollingAnimation From="0" To="50">
	      	<Change panel1.Height="0" Duration="1" />
	      	<Change panel1.Opacity="0" Duration="0.5" />
	      </ScrollingAnimation>
	  </ScrollView>
	</DockPanel>
3

Hi!

thnx for ur response but i would like to not change panel1 Height (in the real app it’s a picture and it’s quite weird)

I’ve seen in other codes that the trick is to “move” the panel while scrolling so it feels like if it’s sticked but i don’t know how to solve it here.

4

That does the trick :slight_smile:

thnx for guiding me! :slight_smile:

     <ScrollingAnimation From="0" To="50">
        <Change panel1.Margin="0,-100,0,0"  Duration="1" />
      </ScrollingAnimation>