How to collapse (hide or swipe up) Navigation Bar (Title Bar) while scrolling in Xamarin Forms?

user_8304176 0
Viewed 654

I am having a ContentPage that has a Navigation Bar (Title Bar) above that contains Title of the page. I want the Navigation Bar to collapse whenever the content (possibly ListView) is scrolled up, and the Navigation Bar must appear again (swipe down) when content is scrolled down.

Please note that I am using FlyoutPage formerly known as MasterDetailPage.

Here is my XAML code

<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>

Similar to this:

Similar to this1

How can I achieve this in Xamarin.Forms?

xamarin.forms xamarin listview xaml c#
1 Answers

Steps:

  1. Fake a title bar and set a reference name.
  2. Attach scrolled event.
  3. Add animation.

Check sample code or sample project here.

XAML page

<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 class

        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;
        }
user_103663030
Related