Xamarin.forms

Question

我正在尝试从 bootstrap 制作效果 "affix"。当用户滚动页面时，我希望 StackLayout 停在他父页面的顶部。

有什么办法吗？

这是我要问的（我在这个例子中使用了视差效果）：

[

谢谢。

Answer 1

我的评论 "Why not to use a ListView with grouping which has this functionality built-in?" 部分正确。

将 ListView 与分组一起使用将自动在 iOS 上提供 "Sticky Header" 功能，但在 Android 上不会。

因此对于 iOS，下一个代码将起作用：

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>

对于 Android，您必须创建一个自定义渲染器，幸运的是有一个 good example on github。

Xamarin.forms - "Affix" 滚动时的 StackLayout

Xamarin.forms - "Affix" StackLayout when scrolling

xamarin

scroll

stacklayout

bootstrap-affix