A layout I’m seeing more and more these days is a timeline of activities.  This is useful for things like transportation schedules or class times.  So let’s put together a simple layout for a timeline using a ListView with headers and footers and a custom ViewCell.


Page Structure

This page is just a simple ListView, nothing really more complex than that.  I turned the Separators off.  Set the RowHeight to something that feels nice.

Also, you may notice I have an ItemTapped hooked up that doesn’t do much:

It just disables a row from being selected, mainly because it  looks rubbish when one of the rows is selected… but of course depending on your layout, you might actually want to do Master / Detail style navigation.


If you want something to appear above your ListView and have it scroll with the ListView use a header.

Pro Tip: Whatever you do, do NOT put a ScrollView around the entire page.  Having nested scrolling containers (eg. ScrollView with ListView inside) is just going end with tears.  Use a Header instead.

For our header, it’s just a simple stack layout with some labels and a bit of padding


Down the bottom of the list, we have just put an image.  Not for any particularly good reason, just to jazz up the page a bit and show how footers work.  You could easily get rid of it and have a nice layout, I figured I’d just include it to complete the header / footer idea.

In our case the footer contains a Grid with two rows. The actual background image “Footer.png” occupies both the rows.  Then we have a transparent-to-white gradient image that is overlaid in the first row.  Basically just creating a fade in effect for the image.


All the real magic happens in the ViewCell which defines what each row is going to look like.

At it’s core it’s just a simple Grid with 3 columns and two rows.

The only really interesting bit of this is the actual lines and circles that form the timeline.  This is achieved by a thin vertical BoxView that runs the height of the Viewcell.  Overlayed in the first row is our circle image.  Nothing magical here.

Now you might notice that it uses a ValueConverter for the IsVisible property, this is kind of a hack to make the line not appear in the last row.  Our model object (which would actually probably be a ViewModel in a real app) has a property called IsLast which is set to true for the last row.  And then we have a NotBooleanConverter assigned to the IsVisible of the line, so basically the line isn’t rendered on the last row.  It feels a bit awkward, but off the top of my head, given the time, I couldn’t think of a better option.

Wrap Up

So that is it, a simple timeline using a ListView.  It works pretty nicely.

Here are some links for further information about some of the techniques:

As YouTubers would say: “let me know in the comments if you liked this” 🙂 Also, If you have any layouts that you thing would be interesting to cover, just let me know.

Oh yeah, and you can grab the project over at

Also, make sure you check out some of the other layouts in Xamarin.Forms Layout Challenges.

Happy Layouts!





Mobile, Xamarin, Windows Store Apps, Agile -- I love 'em all! Check out more

Published on

Show Comments
  1. Great Example how to use Forms to great amazin UIs.
    Love it
    Thomas aka Escamoteur

  2. Sawan says:


  3. Jesus Garza says:

    Hi Kym, I am having this error in my App.xaml:
    No property, bindable property, or event found for ‘FontSize’.

    This happens on the line with the first font declaration (<Font x:Key="TitleFont" …).
    The strange thing is that there is no problem in neither of your projects, only in mine.
    I am using the same profile and Xamarin.Forms version. Any idea of what could be wrong?

    Thank you and best regards.

  4. Jerone says:

    So simple. Thanks for a real live example.

  5. Vinod says:

    This blog post completely changed my mindset of how I wanted to do timeline. Nice work Kym and Thanks for sharing

    1. Kym says:

      Pleased you liked it 🙂

  6. Yuri says:

    You could use 2 types of cells – regular and last. Using selector Show appropriate cell.

    1. Kym says:

      Yeah, using a DataTemplateSelector would work for sure. Still there is the challenge of knowing it’s the last row in the series.

  7. Greg Moore says:

    Really good stuff here. The whole reason I embraced Xamarin was to be as cross platform as I could be. Seeing these examples really make me want to learn and use X.Forms more. Please, please keep it up. Great job! Greg

    1. Kym says:

      Thanks Greg. XF is really a great framework. I’ll try to keep these designs coming.

  8. Hi Kim!
    Great stuff!

    I made a translation of your material for Russian-speaking developers
    I pointed out the link to your original article

    Waiting for new challenges)

Leave a Reply

Your email address will not be published. Required fields are marked *

Kym Phillpotts

I write about Xamarin Forms, mobile development or whatever else I might be concentrating on.

Back to Home