Xamarin Forms Title transition in navigation bar - xamarin.forms

Question

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 :
When user scroll :
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 ?

Answer 1

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);
}
}