Awesome
Awesome Timeline in Xamarin.Forms
Lioncoding article Link
Awesome Timeline in Xamarin.Forms
Create your project(I'm using VS2019)
Add the following NuGet packages to your solution
- Xamarin.FFImageLoading.Forms 2.4.4.859
- Xamarin.FFImageLoading.Transformations 2.4.4.859
- Xamarin.Forms 3.4.0.1009999
Initialization
Android project
- MainActivity.cs
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(savedInstanceState);
// Init FFImageLoading plugin
CachedImageRenderer.Init(false);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
LoadApplication(new App());
}
IOSproject
- AppDelegate.cs
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
// Init FFImageLoading plugin
FFImageLoading.Forms.Platform.CachedImageRenderer.Init();
global::Xamarin.Forms.Forms.Init();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
UI
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="Timeline.Views.TimelineView"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:template="clr-namespace:Timeline.Views.Templates"
xmlns:viewModel="clr-namespace:Timeline.ViewModels"
Title="{Binding Title}"
BackgroundImage="bg.jpg">
<ContentPage.BindingContext>
<viewModel:TimelineViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<ListView
CachingStrategy="RecycleElement"
HasUnevenRows="False"
ItemsSource="{Binding TimelineEvents}"
RowHeight="107"
SelectionMode="None"
SeparatorColor="Gray"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<template:TimelineWithImage />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
ViewCell Template
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
x:Class="Timeline.Views.Templates.TimelineWithImage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:ffTransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations">
<StackLayout
Margin="20,0,0,0"
Orientation="Horizontal"
VerticalOptions="Center">
<!-- VERTICAL LINE WITH IMAGE -->
<StackLayout
x:Name="firstStackLayout"
Margin="0,0,0,-6"
HorizontalOptions="Center"
Orientation="Vertical"
VerticalOptions="Center">
<!-- FIRST CENTER VERTICAL LINE -->
<BoxView
Grid.Row="0"
Grid.Column="0"
Margin="0,0,0,-6"
HeightRequest="30"
HorizontalOptions="Center"
WidthRequest="3"
Color="Accent" />
<!-- IMAGE -->
<ff:CachedImage
Grid.Row="1"
Grid.Column="0"
Margin="0,0,0,0"
HeightRequest="55"
Source="{Binding AuthorImage}"
WidthRequest="55">
<ff:CachedImage.Transformations>
<ffTransformations:RoundedTransformation
BorderHexColor="#FF4081"
BorderSize="20"
Radius="240" />
</ff:CachedImage.Transformations>
</ff:CachedImage>
<!-- LAST CENTER VERTICAL LINE -->
<BoxView
Grid.Row="2"
Grid.Column="0"
Margin="0,-6,0,0"
HeightRequest="30"
HorizontalOptions="Center"
WidthRequest="3"
Color="Accent" />
</StackLayout>
<!-- MESSAGE -->
<StackLayout
Margin="5,0,0,0"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
VerticalOptions="Center">
<StackLayout
Margin="0,0,5,0"
HorizontalOptions="Start"
Orientation="Vertical"
VerticalOptions="Center">
<Label
FontAttributes="Bold"
FontSize="15"
HorizontalOptions="Start"
Text="{Binding Title}"
TextColor="Accent"
XAlign="Start" />
<StackLayout
Margin="0,0,5,0"
Orientation="Horizontal"
VerticalOptions="EndAndExpand">
<Label
FontSize="14"
Text="{Binding Detail}"
TextColor="#4e5156" />
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Label
FontAttributes="Bold"
FontSize="12"
Text="{Binding DateToString}"
TextColor="#3b0999" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</ContentView>