In the second part of this series of articles about creating custom controls, we learned how to create
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.
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
- Handling and Raising Events
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:
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.
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.
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.
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?
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
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.