Creating Custom Controls Part 3: TimelineView

Hey Guys!

In the second part of this series of articles about creating custom controls, we learned how to create an SlideView that supports sliding through different elements and displaying visual feedback to our users using a StepperView.

In this article we are going to see our next use case which is creating a TimelineView to support displaying timelines in our Xamarin Forms Apps.

Prerequisites

You will need previous knowledge on the following subjects to follow along with the sample project in this 3rd part (all of this is discussed on the first part of the series, you can revisit it to refresh any doubts you might have while reading this article):

  • MVVM Pattern
  • Using Fody Property Change Plugin
  • BindableProperties
  • Commanding
  • Handling and Raising Events

Getting Started!

Sometimes we want to display a timeline of events that we have logged in our application for our users in a compact and friendly way, in which they can go back and see the changes over time of their logs.

To achieve this we are going to be using some a complement between one of the controls we learned how to create previously in our series and other basic controls that Xamarin Forms provides us:

ExtendedListView

Since we are probably going to be loading the list of logs from a webservice we can directly use our ExtendedListView to manage the loading of this items and add Infinite scrolling, and interaction with them at the same time.

Grid

This will be the base layout for our Timeline control and is the one that is going to help us design our timeline with ease.

BoxViews

We are going to be using BoxViews to form the timeline structure and visual feedback for our user.

SO LET’S GET TO WORK!🙌☺️

Adding our ExtendedListView

To create our timeline we first need to have a list of items, and for that, we are going to use our previous control discussed on part 1 of this series.

STEP 1: DEFINING OUR ITEMS

Our control can be used for different types of scenarios, like displaying logs, or the progress of a business process (Example: ordering a pizza), etc. for the sake of our demo we will be creating a timeline of logs and each log will be represented with this model:

STEP 2: CREATING A LIST OF ITEMS FOR OUR TimeLine

Now that we have defined our items, we can create a list of Items in our DataService which we will feed to our ExtendedListView so we can scroll through each of them and interact on our page.

STEP 3: ADDING Extendedlistview TO PAGE

To add our ExtendedListView to our page we first need to add the namespace where we can find our new component:

Once we have added the namespace correctly we can now use our ExtendedListView in our Page normally like any other component, we bind the DataSource Property to our List of Items and define our DataTemplate to Display them on our TimeLine.

Goodjob Guys!! Now that we have our ExtendedListView all that is left is displaying our Logs as a TimeLine thinking a little bit out of the box and using the power of Grids + BoxViews, let’s take a close look at what exactly it is we want to achieve with our UI.

BUILDING OUR TIMELINE

Once we look closely to our UI we notice that we can actually build our Timeline up like a puzzle, dividing the end product by parts and building it up bit by bit, but what will each part consist of?

pARTS OF TIMELINE

Now that we have found each part that we will need, how can we actually implement it in our control?

Starter Icon

For our starter icon to be included in our layout just once, we will need to use our ExtendedListView header and declare our icon there, so it doesn’t repeat and only is visible at the start of the timeline.

Title and Description of Logs

To recreate the layout of our logs, we notice that we have basically 2 rows of data, the first one will be for our title of the log that consist of the Author and Date of the log, and the 2nd row is basically the description of the log. So right away we know that we can just use a Grid to aid us on this task.

Timeline Conectors and Dot

Last but not least we can notice that our connectors can be created basically using 2 BoxViews (1 Horizontal, 1 Vertical) and an image in the intersection of both for our Dot, by adding a new column to our Grid we can create the first column just for our connectors and move the information of the log to our second column, and each time a new item is added the BoxViews will connect to each other.

Ce Finito Guys!🥳

You made it! now you should have a timeline control that displays your logs connected and the user can see how your events happend through time.

Bonus:

Try updating the layout of your timeline to change the use case and display the progress of a process for example: Ordering a Pizza. (Hint: add a bool variable IsCompleted to your model and display the dot based on it).

Full Source Code for the sample App can be found on my Github Repo [TimelineViewSample]

Made with ♥️by Pujols.


References:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/bindable-properties

https://blog.xamarin.com/simplifying-events-with-commanding/

https://docs.microsoft.com/en-us/dotnet/standard/events/

Credits for artwork components:
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
Workstation on Banner Designed by Eightonesix

Author: Pujolsluis

I'm Luis Pujols a Software Engineer originally from the Dominican Republic. I currently work at CrossGeeks as part of an awesome team, developing in Xamarin Forms, and I'm currently working towards my certification on it as well. In my free time, I'm co-organizer of the DotNetDo software community, I also enjoy experimenting with new tech's, mentoring peers and attending or organizing software community events.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.