Xamarin.forms - "Affix" StackLayout when scrolling

Question

I'm trying to make the effect "affix" from bootstrap. When the user scroll the page, I want StackLayout to stop at the top of his parent.

Is there any way to do so?

Here's what I'm asking (I'm using Parallax effect on this example):

[

Thanks.

Answer 1

My comment "Why not to use a ListView with grouping which has this functionality built-in?" is partly correct.

Using ListView with grouping will automatically provide a "Sticky Header" functionality on iOS but not on Android.

So for iOS the next code will work:

public class ToysList : List<Toy>
{
    public string Header { get; set; }
    public List<Toy> Toys => this;
}

public class Toy
{
    public string Name { get; set; }
}

// Initialise Toys in your ViewModel

<ListView
    ItemsSource="{Binding Toys}"
    IsGroupingEnabled="true">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Header}" />
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
               <Label Text="{Binding Name}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

For Android you will have to create a custom renderer, luckily there is a good example on github.