read

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.

Header

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

Footer

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.

ViewCell

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 https://github.com/kphillpotts/XamarinFormsLayoutChallenges

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

Happy Layouts!

 

 

 

Kym

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
    Cheesrs
    Thomas aka Escamoteur

  2. Sawan says:

    AWESOME UI

  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.


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