feat: add demo page, prepare collection changed behavior.

demo/Ursa.Demo/Pages/TimelineDemo.axaml

@@ -0,0 +1,25 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.TimelineDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="viewModels:TimelineDemoViewModel"
+    mc:Ignorable="d">
+
+    <u:Timeline ItemsSource="{Binding Items}">
+        <u:Timeline.ItemTemplate>
+            <DataTemplate x:DataType="viewModels:TimelineItemViewModel">
+                <u:TimelineItem
+                    Content="{Binding Content}"
+                    Time="{Binding Time}"
+                    TimeFormat="{Binding TimeFormat}" />
+            </DataTemplate>
+        </u:Timeline.ItemTemplate>
+    </u:Timeline>
+</UserControl>

demo/Ursa.Demo/Pages/TimelineDemo.axaml.cs

@@ -0,0 +1,15 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Ursa.Demo.ViewModels;
+
+namespace Ursa.Demo.Pages;
+
+public partial class TimelineDemo : UserControl
+{
+    public TimelineDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new TimelineDemoViewModel();
+    }
+}

demo/Ursa.Demo/ViewModels/TimelineDemoViewModel.cs

@@ -0,0 +1,110 @@
+using System;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class TimelineDemoViewModel: ObservableObject
+{
+    public TimelineItemViewModel[] Items { get; } =
+    {
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "yyyy-MM-dd HH:mm:ss",
+            Description = "Item 1",
+            Content = "First"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 2",
+            Content = "Content 2"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 3",
+            Content = "Content 3"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 4",
+            Content = "Content 4"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 5",
+            Content = "Content 5"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 6",
+            Content = "Content 6"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 7",
+            Content = "Content 7"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 8",
+            Content = "Content 8"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 9",
+            Content = "Content 9"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 10",
+            Content = "Content 10"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 11",
+            Content = "Content 11"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 12",
+            Content = "Content 12"
+        },
+        new()
+        {
+            Time = DateTime.Now,
+            TimeFormat = "HH:mm:ss",
+            Description = "Item 13",
+            Content = "Last"
+        }
+    };
+}
+
+public class TimelineItemViewModel: ObservableObject
+{
+    public DateTime Time { get; set; }
+    public string? TimeFormat { get; set; }
+    public string? Description { get; set; }    
+    public string? Content { get; set; }
+}

demo/Ursa.Demo/Views/MainWindow.axaml

@@ -35,6 +35,9 @@
             <TabItem Header="IPv4Box">
                 <pages:IPv4BoxDemo />
             </TabItem>
+            <TabItem Header="Timeline">
+                <pages:TimelineDemo />
+            </TabItem>
         </TabControl>
     </Grid>