CODEWITHSUNDEEP
xamarin.forms
ArthurCPPCLI
ArthurCPPCLI

Reputation: 1092

Xamarin Forms Title transition in navigation bar

I'm wondering how we can achieve in Xamarin Forms a title transition in nav bar when user scrolling. For example, the Message app on iOS :

enter image description here

When user scroll :

enter image description here

Title "Messages" transition from page content to navigation bar. Is there a way to accomplish this in the same way on Android and iOS with Xamarin Forms ?

Upvotes: 2

Views: 475

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

We could define a custom TitleView and set the TextColor of title when scrolling the page .

in Xaml

<NavigationPage.TitleView>
        <Grid>
            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="0.2*" />
                <ColumnDefinition Width="0.6*" />
                <ColumnDefinition Width="0.2*" />

            </Grid.ColumnDefinitions>

            <Label x:Name="TitleLabel" Text="Message" FontSize="22" TextColor="Transparent"  Grid.Column="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

            //... you can put any other elements on other two Columns like button and image icon
        </Grid>
    </NavigationPage.TitleView>

For content I defined a simple ScrollView for show the effect

<ScrollView Scrolled="ScrollView_Scrolled" Orientation="Vertical">

        <StackLayout>

            <Label Text="Message" FontSize="35" HorizontalTextAlignment="Start" HeightRequest="60" />
            <BoxView BackgroundColor="LightBlue"  HeightRequest="300" />
            <BoxView BackgroundColor="LightGreen"  HeightRequest="300" />
            <BoxView BackgroundColor="LightPink"  HeightRequest="300" />

        </StackLayout>
    </ScrollView>

In code behind

Note :

60 here is the height of label in content Page . The alpha of title Label will set to 1 when the message label scrolls out of the screen. I didn't used data binding just for demo . Of course you could binding the TextColor to ViewModel .

private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
   var scrollView = sender as ScrollView;

   var TransY = e.ScrollY;

   if(TransY>0)
   {
       double alpha = TransY / 60;
       TitleLabel.TextColor = Color.FromRgba(0.0,0.0,0.0,alpha);
   }

           
}

enter image description here

Upvotes: 2

Related Questions