如何在 Xamarin Forms 中滚动时折叠（隐藏或向上滑动）导航栏（标题栏）？

Posted 2023-04-12

【中文标题】如何在 Xamarin Forms 中滚动时折叠（隐藏或向上滑动）导航栏（标题栏）？

【英文标题】：How to collapse (hide or swipe up) Navigation Bar (Title Bar) while scrolling in Xamarin Forms?

【发布时间】：2021-09-09 19:02:59

【问题描述】：

我有一个ContentPage，上面有一个包含页面标题的导航栏（标题栏）。我希望导航栏在内容（可能是ListView）向上滚动时折叠，并且导航栏必须在内容向下滚动时再次出现（向下滑动）。

请注意，我使用的是FlyoutPage，以前称为MasterDetailPage。

这是我的 XAML 代码

<ContentPage ...
             NavigationPage.HasNavigationBar="True"
             Title="Home">
    <ContentPage.Content>

        <ListView VerticalOptions="FillAndExpand" HasUnevenRows="True" CachingStrategy="RecycleElement"
                        ItemsSource="Binding ListItems" SeparatorVisibility="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout...>
                            <Label... />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </ContentPage.Content>
</ContentPage>

与此类似：

如何在 Xamarin.Forms 中实现这一点？

【参考方案1】：

步骤：

伪造标题栏并设置参考名称。 附加滚动事件。 添加动画。

查看示例代码或sample project here。

XAML 页面

<ContentPage NavigationPage.HasNavigationBar="False">
    <ContentPage.Content>
        <StackLayout Spacing="0">
            <StackLayout
                x:Name="TitleLayout"
                BackgroundColor="#2296f3"
                HeightRequest="58"
                Orientation="Horizontal">
                <Label
                    Margin="40,0,0,0"
                    FontSize="20"
                    Text="Title"
                    TextColor="White"
                    VerticalOptions="CenterAndExpand" />
            </StackLayout>
            <ListView ...
                      Scrolled="ScrollView_Scrolled" >
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

XAML.cs 类

        private double previousOffset;

        private async void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
        
            double translation;
            bool visibility;

            if (previousOffset < e.ScrollY - 45) //scroll sensitivity
            
                translation = -58; //same Title bar height
                visibility = false;
            
            else if (previousOffset > e.ScrollY + 45)
            
                translation = 0;
                visibility = true;
            
            else
            
                return;
            

            await TitleLayout.TranslateTo(TitleLayout.TranslationX, translation, 300);
            await Task.Delay(100);
            TitleLayout.IsVisible = visibility;
            previousOffset = e.ScrollY;