xaml - 如何在 XamarinForms 中为列表添加粘性标题

Question

我尝试了几天来创建一个包含两个部分的页面：

• 一个标题
• 列表

标题是可拉伸的，所以当用户在列表上滚动时，第一个标题达到 90dp 的高度，然后开始滚动列表，当用户向上滚动列表时，当到达列表顶部时，标题将被拉伸到最大268dp

这是我的想法的示例视频： 示例视频

所以，我有以下问题：我只需要在标题中包含一个元素，现在我有两个元素（黄色和红色堆栈）。

这是 xaml 文件：

        <AbsoluteLayout>
            <ScrollView x:Name="RootScrollView"
                    AbsoluteLayout.LayoutFlags="All"
                    AbsoluteLayout.LayoutBounds="0,0,1,1"
                    Scrolled="OnRootScrollViewScrolled">
                <AbsoluteLayout>
                    <StackLayout
                    x:Name="EmptyLayout"
                    BackgroundColor="Yellow"
                    AbsoluteLayout.LayoutFlags="WidthProportional"
                    AbsoluteLayout.LayoutBounds="0,0,1,178"
                    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"
                    x:Name="TabsLayout"
                    Padding="0"
                    CornerRadius="0"
                    HasShadow="True"
                    AbsoluteLayout.LayoutFlags="WidthProportional"
                    AbsoluteLayout.LayoutBounds="0,178,1,90">
                    </Frame>
                </AbsoluteLayout>
            </ScrollView>
        </AbsoluteLayout>
    </ContentPage.Content>

代码隐藏：

 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, TabsLayout.Height));
    }

标签： xamlxamarinxamarin.forms