From 36e3e88276abf3971064c164b611d00955c18a61 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 23 Mar 2023 14:53:43 +0800
Subject: [PATCH] feat: WIP: add demo and background for layout testing.

---
 demo/Ursa.Demo/Pages/TimelineDemo.axaml       | 88 ++++++++++++++++---
 .../ViewModels/TimelineDemoViewModel.cs       | 12 +--
 src/Ursa.Themes.Semi/Controls/Timeline.axaml  | 28 ++++--
 3 files changed, 105 insertions(+), 23 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/TimelineDemo.axaml b/demo/Ursa.Demo/Pages/TimelineDemo.axaml
index 674a2c4..0093166 100644
--- a/demo/Ursa.Demo/Pages/TimelineDemo.axaml
+++ b/demo/Ursa.Demo/Pages/TimelineDemo.axaml
@@ -8,18 +8,82 @@
     xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:CompileBindings="True"
+    x:CompileBindings="False"
     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.Resources>
+        <u:TimelineFormatConverter x:Key="FormatConverter" />
+    </UserControl.Resources>
+    <StackPanel>
+        <Grid Width="600">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="1*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="1*" />
+            </Grid.ColumnDefinitions>
+            <Border
+                Grid.Column="0"
+                Width="300"
+                Height="100"
+                Background="Red" />
+            <Ellipse
+                Grid.Column="1"
+                Width="8"
+                Height="8"
+                Fill="Red" />
+            <Border
+                Grid.Column="2"
+                Width="500"
+                Height="100"
+                Background="Green" />
+        </Grid>
+        <ItemsControl Grid.IsSharedSizeScope="True" ItemsSource="{Binding Items}">
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <Grid>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="1*" SharedSizeGroup="Left" />
+                            <ColumnDefinition Width="Auto" SharedSizeGroup="Line" />
+                            <ColumnDefinition Width="1*" SharedSizeGroup="Left" />
+                        </Grid.ColumnDefinitions>
+                        <ContentPresenter
+                            Grid.Column="0"
+                            HorizontalAlignment="Stretch"
+                            Background="Aqua"
+                            Content="121231233" />
+                        <Ellipse
+                            Grid.Column="1"
+                            Width="8"
+                            Height="8"
+                            Fill="Red" />
+                        <ContentPresenter
+                            Name="content"
+                            Grid.Column="2"
+                            HorizontalAlignment="Stretch"
+                            Background="Yellow"
+                            Content="{Binding}" />
+                    </Grid>
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+        <u:Timeline HorizontalAlignment="Left" ItemsSource="{Binding Items}">
+            <u:Timeline.ItemTemplate>
+                <DataTemplate x:DataType="viewModels:TimelineItemViewModel">
+                    <u:TimelineItem
+                        Content="{Binding Content}"
+                        Time="{Binding Time}"
+                        TimeFormat="{Binding TimeFormat}">
+                        <u:TimelineItem.ContentTemplate>
+                            <DataTemplate>
+                                <TextBlock
+                                    MaxWidth="100"
+                                    Text="{Binding}"
+                                    TextWrapping="Wrap" />
+                            </DataTemplate>
+                        </u:TimelineItem.ContentTemplate>
+                    </u:TimelineItem>
+                </DataTemplate>
+            </u:Timeline.ItemTemplate>
+        </u:Timeline>
+    </StackPanel>
 </UserControl>
diff --git a/demo/Ursa.Demo/ViewModels/TimelineDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/TimelineDemoViewModel.cs
index 29f72f7..9c51cc4 100644
--- a/demo/Ursa.Demo/ViewModels/TimelineDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/TimelineDemoViewModel.cs
@@ -54,42 +54,42 @@ public class TimelineDemoViewModel: ObservableObject
             Time = DateTime.Now,
             TimeFormat = "HH:mm:ss",
             Description = "Item 7",
-            Content = "Content 7"
+            Content = "Content 71231"
         },
         new()
         {
             Time = DateTime.Now,
             TimeFormat = "HH:mm:ss",
             Description = "Item 8",
-            Content = "Content 8"
+            Content = "Content 8123123"
         },
         new()
         {
             Time = DateTime.Now,
             TimeFormat = "HH:mm:ss",
             Description = "Item 9",
-            Content = "Content 9"
+            Content = "Content 9123123"
         },
         new()
         {
             Time = DateTime.Now,
             TimeFormat = "HH:mm:ss",
             Description = "Item 10",
-            Content = "Content 10"
+            Content = "Content 1231231231231231231230"
         },
         new()
         {
             Time = DateTime.Now,
             TimeFormat = "HH:mm:ss",
             Description = "Item 11",
-            Content = "Content 11"
+            Content = "Content 11231231"
         },
         new()
         {
             Time = DateTime.Now,
             TimeFormat = "HH:mm:ss",
             Description = "Item 12",
-            Content = "Content 12"
+            Content = "Content 12123123123123"
         },
         new()
         {
diff --git a/src/Ursa.Themes.Semi/Controls/Timeline.axaml b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
index 002d236..8d01b88 100644
--- a/src/Ursa.Themes.Semi/Controls/Timeline.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
@@ -27,8 +27,16 @@
     <ControlTheme x:Key="{x:Type u:TimelineItem}" TargetType="u:TimelineItem">
         <Setter Property="u:TimelineItem.Template">
             <ControlTemplate TargetType="u:TimelineItem">
-                <StackPanel>
-                    <ContentPresenter>
+                <Grid Background="Pink">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="1*" SharedSizeGroup="Left" />
+                        <ColumnDefinition Width="Auto" SharedSizeGroup="Line" />
+                        <ColumnDefinition Width="1*" SharedSizeGroup="Left" />
+                    </Grid.ColumnDefinitions>
+                    <ContentPresenter
+                        Grid.Column="0"
+                        HorizontalAlignment="Stretch"
+                        Background="Aqua">
                         <ContentPresenter.Content>
                             <MultiBinding Converter="{StaticResource FormatConverter}">
                                 <Binding Path="Time" RelativeSource="{RelativeSource TemplatedParent}" />
@@ -36,9 +44,19 @@
                             </MultiBinding>
                         </ContentPresenter.Content>
                     </ContentPresenter>
-                    <ContentPresenter Name="content" Content="{TemplateBinding Content}" />
-
-                </StackPanel>
+                    <Ellipse
+                        Grid.Column="1"
+                        Width="8"
+                        Height="8"
+                        Fill="Red" />
+                    <ContentPresenter
+                        Name="content"
+                        Grid.Column="2"
+                        HorizontalAlignment="Stretch"
+                        Background="Yellow"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}" />
+                </Grid>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:first /template/ ContentPresenter#content">