Xamarin forms – keep visual element in view linked to content scroll view

Assume you have some news page that contains a header with the actual news title, some highlight image and a lot of body text.
If this is represented on a mobile device, depending on the screen resolution, this can result in the user needing to scroll the text content to be able to read everything.
Now if you just put the whole page in a ScrollView, the user will loose the content of the article he is reading, because most likely the title will also scroll out of view.
So let me show you what you can do to keep the title fixed as soon as it reaches a certain anchor point on screen, while the user is scrolling the text content.

The starting view looks like this

You will notice the title “Bear found in the wild” is fixed to the bottom of the highlight picture and as soon as the user scrolls, this will also scroll to the top of the screen. But we want to keep it in view when it reaches the top of the image ( it will be fixed below the “Fixed header demo page title ). even if the user keeps scrolling down after we reached our anchor point.

First the design of the page in XAML:

Import thing to note here, is that the actual TitleText label is positioned outside of the ScrollView! This is needed, because we will animate it ourselves depending on the scroll values of the ScrollView.
So how do we position this TitleText to the bottom of the bear image? This is done in the code behind of the page! In the constructor we hookup to the SizeChanged event of the bear image and in that event we will set the margin of the TitleText to the Height of the bear image minus the height of the TitleText itself.

Now when the TitleText has been fixed to it’s starting position, we need to take hold of the top Y coördinate. This is needed to calculate the anchor point while scrolling.
We also hookup to the SizeChanged event of the TitleText and when it changes, we can grab the Y point.

Only one thing left to do, we now have to keep hold of the scroll values of the ScrollView, so we can animate the TitleText in sync with the scroll position and direction.
So we subscribe to the PropertyChanged event of the ScrollView and look for Y value changes.
When we get a change, we validate if it is still lower than our anchor point, if so, animate the TitleText Y coördinate to the same value. If it’s passed the anchor point, we will just keep the TitleText coördinate the same. This will result in the title being kept in view!

And that’s it!
The end result will look like this:

As always a complete demo can be found on my GitHub here…

Xamarin forms – Switch custom font on Style Trigger

Just a small reminder for myself.
I was actually unaware this was possible in XAML styling, but now that I know it can be done, I will be using this more often 🙂 !

So assume you want to use a custom font in your Xamarin Forms app and you want to preset each Label control with it, you can define this in a Styles.xml like so:

But what do you do when your custom font has no build in Bold feature and you have to rely on a separate custom font for that?
Well, you can let your XAML style check for a trigger and swap the font!
It’s fairly easy, so the code will now look like:

And now each time you add the FontAttributes=”Bold” property to your Label control, it will use the correct font type!

Happy coding.