{"id":18001454,"url":"https://github.com/egbakou/timeline","last_synced_at":"2025-03-26T08:30:47.020Z","repository":{"id":150080144,"uuid":"179032517","full_name":"egbakou/Timeline","owner":"egbakou","description":"Awesome UI: Timeline with images in Xamarin.Forms.","archived":false,"fork":false,"pushed_at":"2019-05-04T12:31:55.000Z","size":9238,"stargazers_count":33,"open_issues_count":0,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-21T11:50:33.198Z","etag":null,"topics":["android","cross-platform","ios","timeline","ui","vs2019","xamarin-forms"],"latest_commit_sha":null,"homepage":"https://lioncoding.com/2019/04/08/2019-04-08-ui-concevoir-un-timeline-dans-xamarin-forms/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/egbakou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-02T08:26:17.000Z","updated_at":"2025-01-15T15:28:22.000Z","dependencies_parsed_at":"2023-04-19T10:04:58.631Z","dependency_job_id":null,"html_url":"https://github.com/egbakou/Timeline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egbakou%2FTimeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egbakou%2FTimeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egbakou%2FTimeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egbakou%2FTimeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egbakou","download_url":"https://codeload.github.com/egbakou/Timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245618556,"owners_count":20645023,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","cross-platform","ios","timeline","ui","vs2019","xamarin-forms"],"created_at":"2024-10-29T23:17:33.257Z","updated_at":"2025-03-26T08:30:47.013Z","avatar_url":"https://github.com/egbakou.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Awesome Timeline in Xamarin.Forms\n\n![](Timeline/screenshots/tweet.png)\n\n### Lioncoding article Link\n\n[Awesome Timeline in Xamarin.Forms](https://lioncoding.com/2019/04/08/2019-04-08-ui-concevoir-un-timeline-dans-xamarin-forms/)\n\n### Create your project(I'm using VS2019)\n\n![](Timeline/screenshots/create_project.PNG)\n\n\n\n![](Timeline/screenshots/select_type.PNG)\n\n\n\n![](Timeline/screenshots/project_location.PNG)\n\n![](Timeline/screenshots/project_model.PNG)\n\n### Add the following NuGet packages to your solution\n\n- [Xamarin.FFImageLoading.Forms 2.4.4.859](https://www.nuget.org/packages/)\n- [Xamarin.FFImageLoading.Transformations 2.4.4.859](https://www.nuget.org/packages/)\n- [Xamarin.Forms 3.4.0.1009999](https://www.nuget.org/packages/)\n\n### Initialization\n\n##### Android project\n\n- MainActivity.cs\n\n```csharp\nprotected override void OnCreate(Bundle savedInstanceState)\n{\n\tTabLayoutResource = Resource.Layout.Tabbar;\n\tToolbarResource = Resource.Layout.Toolbar;\n\n\tbase.OnCreate(savedInstanceState);\n    // Init FFImageLoading plugin\n\tCachedImageRenderer.Init(false);\n\tglobal::Xamarin.Forms.Forms.Init(this, savedInstanceState);\n\tLoadApplication(new App());\n}\n```\n\n##### IOSproject\n\n- AppDelegate.cs\n\n```csharp\npublic override bool FinishedLaunching(UIApplication app, NSDictionary options)\n{\n\t// Init FFImageLoading plugin\n\tFFImageLoading.Forms.Platform.CachedImageRenderer.Init();\n    \n\tglobal::Xamarin.Forms.Forms.Init();\n\tLoadApplication(new App());\n\treturn base.FinishedLaunching(app, options);\n}\n```\n\n\n\n### UI\n\n```xaml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\" ?\u003e\n\u003cContentPage\n    x:Class=\"Timeline.Views.TimelineView\"\n    xmlns=\"http://xamarin.com/schemas/2014/forms\"\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n    xmlns:template=\"clr-namespace:Timeline.Views.Templates\"\n    xmlns:viewModel=\"clr-namespace:Timeline.ViewModels\"\n    Title=\"{Binding Title}\"\n    BackgroundImage=\"bg.jpg\"\u003e\n\n    \u003cContentPage.BindingContext\u003e\n        \u003cviewModel:TimelineViewModel /\u003e\n    \u003c/ContentPage.BindingContext\u003e\n\n    \u003cContentPage.Content\u003e\n        \u003cStackLayout\u003e\n            \u003cListView\n                CachingStrategy=\"RecycleElement\"\n                HasUnevenRows=\"False\"\n                ItemsSource=\"{Binding TimelineEvents}\"\n                RowHeight=\"107\"\n                SelectionMode=\"None\"\n                SeparatorColor=\"Gray\"\n                SeparatorVisibility=\"None\"\u003e\n                \u003cListView.ItemTemplate\u003e\n                    \u003cDataTemplate\u003e\n                        \u003cViewCell\u003e\n                            \u003ctemplate:TimelineWithImage /\u003e\n                        \u003c/ViewCell\u003e\n                    \u003c/DataTemplate\u003e\n                \u003c/ListView.ItemTemplate\u003e\n            \u003c/ListView\u003e\n        \u003c/StackLayout\u003e\n    \u003c/ContentPage.Content\u003e\n\u003c/ContentPage\u003e\n```\n\n### ViewCell Template\n\n```xaml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\" ?\u003e\n\u003cContentView\n    x:Class=\"Timeline.Views.Templates.TimelineWithImage\"\n    xmlns=\"http://xamarin.com/schemas/2014/forms\"\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n    xmlns:ff=\"clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms\"\n    xmlns:ffTransformations=\"clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations\"\u003e\n\n    \u003cStackLayout\n        Margin=\"20,0,0,0\"\n        Orientation=\"Horizontal\"\n        VerticalOptions=\"Center\"\u003e\n\n        \u003c!--  VERTICAL LINE WITH IMAGE  --\u003e\n        \u003cStackLayout\n            x:Name=\"firstStackLayout\"\n            Margin=\"0,0,0,-6\"\n            HorizontalOptions=\"Center\"\n            Orientation=\"Vertical\"\n            VerticalOptions=\"Center\"\u003e\n            \u003c!--  FIRST CENTER VERTICAL LINE  --\u003e\n            \u003cBoxView\n                Grid.Row=\"0\"\n                Grid.Column=\"0\"\n                Margin=\"0,0,0,-6\"\n                HeightRequest=\"30\"\n                HorizontalOptions=\"Center\"\n                WidthRequest=\"3\"\n                Color=\"Accent\" /\u003e\n            \u003c!--  IMAGE  --\u003e\n            \u003cff:CachedImage\n                Grid.Row=\"1\"\n                Grid.Column=\"0\"\n                Margin=\"0,0,0,0\"\n                HeightRequest=\"55\"\n                Source=\"{Binding AuthorImage}\"\n                WidthRequest=\"55\"\u003e\n                \u003cff:CachedImage.Transformations\u003e\n                    \u003cffTransformations:RoundedTransformation\n                        BorderHexColor=\"#FF4081\"\n                        BorderSize=\"20\"\n                        Radius=\"240\" /\u003e\n                \u003c/ff:CachedImage.Transformations\u003e\n            \u003c/ff:CachedImage\u003e\n            \u003c!--  LAST CENTER VERTICAL LINE  --\u003e\n            \u003cBoxView\n                Grid.Row=\"2\"\n                Grid.Column=\"0\"\n                Margin=\"0,-6,0,0\"\n                HeightRequest=\"30\"\n                HorizontalOptions=\"Center\"\n                WidthRequest=\"3\"\n                Color=\"Accent\" /\u003e\n        \u003c/StackLayout\u003e\n\n        \u003c!--  MESSAGE  --\u003e\n        \u003cStackLayout\n            Margin=\"5,0,0,0\"\n            HorizontalOptions=\"FillAndExpand\"\n            Orientation=\"Horizontal\"\n            VerticalOptions=\"Center\"\u003e\n            \u003cStackLayout\n                Margin=\"0,0,5,0\"\n                HorizontalOptions=\"Start\"\n                Orientation=\"Vertical\"\n                VerticalOptions=\"Center\"\u003e\n                \u003cLabel\n                    FontAttributes=\"Bold\"\n                    FontSize=\"15\"\n                    HorizontalOptions=\"Start\"\n                    Text=\"{Binding Title}\"\n                    TextColor=\"Accent\"\n                    XAlign=\"Start\" /\u003e\n                \u003cStackLayout\n                    Margin=\"0,0,5,0\"\n                    Orientation=\"Horizontal\"\n                    VerticalOptions=\"EndAndExpand\"\u003e\n                    \u003cLabel\n                        FontSize=\"14\"\n                        Text=\"{Binding Detail}\"\n                        TextColor=\"#4e5156\" /\u003e\n                \u003c/StackLayout\u003e\n                \u003cStackLayout Orientation=\"Horizontal\" VerticalOptions=\"EndAndExpand\"\u003e\n                    \u003cLabel\n                        FontAttributes=\"Bold\"\n                        FontSize=\"12\"\n                        Text=\"{Binding DateToString}\"\n                        TextColor=\"#3b0999\" /\u003e\n                \u003c/StackLayout\u003e\n            \u003c/StackLayout\u003e\n        \u003c/StackLayout\u003e\n    \u003c/StackLayout\u003e\n\u003c/ContentView\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegbakou%2Ftimeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegbakou%2Ftimeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegbakou%2Ftimeline/lists"}