WIP: layout with new panel.

2024-01-04 20:33:42 +08:00
parent 1d6d8feaec
commit 66bc512ae2
7 changed files with 250 additions and 47 deletions
--- a/src/Ursa.Themes.Semi/Controls/Timeline.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Timeline.axaml
@@ -18,7 +18,7 @@
    <ControlTheme x:Key="{x:Type u:Timeline}" TargetType="u:Timeline">
        <Setter Property="Template">
            <ControlTemplate TargetType="u:Timeline">
-                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
+                <ItemsPresenter Grid.IsSharedSizeScope="True" ItemsPanel="{TemplateBinding ItemsPanel}" />
            </ControlTemplate>
        </Setter>
    </ControlTheme>
@@ -32,51 +32,64 @@
        WarningBrush="{DynamicResource WarningTimelineIconForeground}" />

    <ControlTheme x:Key="{x:Type u:TimelineItem}" TargetType="u:TimelineItem">
+        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+        <Setter Property="VerticalAlignment" Value="Top"></Setter>
        <Setter Property="u:TimelineItem.Template">
            <ControlTemplate TargetType="u:TimelineItem">
-                <Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="*, Auto, *">
-                    <Rectangle
+                <Grid Name="PART_RootGrid" 
+                      RowDefinitions="Auto, Auto, Auto" 
+                      ColumnDefinitions="Auto, Auto, Auto">
+                    <!--  Icon and Axis  -->
+                    <Grid
+                        Name="PART_IconAxisRoot"
                        Grid.Row="0"
+                        Grid.RowSpan="3"
                        Grid.Column="1"
-                        Width="1"
-                        Height="8"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Top"
-                        Classes="start"
-                        Fill="{DynamicResource TimelineLineBrush}" />
-                    <ContentPresenter
-                        Name="PART_IconPresenter"
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center"
-                        Content="{TemplateBinding Icon}"
-                        ContentTemplate="{TemplateBinding IconTemplate}" />
-                    <Rectangle
-                        Grid.Row="2"
-                        Grid.Column="1"
-                        Width="1"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Stretch"
-                        Classes="end"
-                        Fill="{DynamicResource TimelineLineBrush}" />
+                        RowDefinitions="Auto, *">
+                        <ContentPresenter
+                            Name="PART_Icon"
+                            Grid.Row="0"
+                            Margin="8"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Icon}"
+                            ContentTemplate="{TemplateBinding IconTemplate}" />
+                        <Rectangle
+                            Grid.Row="1"
+                            Width="1"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Stretch"
+                            Classes="end"
+                            Fill="{DynamicResource TimelineLineBrush}" />
+                    </Grid>
                    <ContentPresenter
                        Grid.Row="0"
-                        Grid.Column="1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Bottom"
+                        Grid.Column="2"
+                        Name="PART_Header"
+                        Margin="8 4"
                        Content="{TemplateBinding Header}"
-                        ContentTemplate="{TemplateBinding HeaderTemplate}"
-                        Foreground="Gray" />
+                        ContentTemplate="{TemplateBinding HeaderTemplate}" />
                    <ContentPresenter
-                        Name="content"
                        Grid.Row="1"
-                        Grid.Column="1"
-                        Margin="0,0,0,16"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
+                        Grid.Column="2"
+                        Name="PART_Content"
+                        Margin="8 2"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    <TextBlock
+                        Grid.Row="0"
+                        Grid.Column="0"
+                        Name="PART_Time"
+                        Margin="8 2"
+                        TextWrapping="Wrap"
+                        >
+                        <TextBlock.Text>
+                            <MultiBinding Converter="{StaticResource FormatConverter}">
+                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Time"></Binding>
+                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="TimeFormat"></Binding>
+                            </MultiBinding>
+                        </TextBlock.Text>
+                    </TextBlock>
                </Grid>
            </ControlTemplate>
        </Setter>
@@ -86,12 +99,57 @@
        <Style Selector="^:last /template/ Rectangle.end">
            <Setter Property="Rectangle.Fill" Value="Transparent" />
        </Style>
-        <Style Selector="^:empty-icon /template/ ContentPresenter#PART_IconPresenter">
+        <Style Selector="^:empty-icon /template/ ContentPresenter#PART_Icon">
            <Setter Property="Content">
                <Template>
-                    <Ellipse Width="8" Height="8" Fill="Gray"></Ellipse>
+                    <Ellipse
+                        Width="8"
+                        Height="8"
+                        Fill="Gray" />
                </Template>
            </Setter>
        </Style>
+        <Style Selector="^:all-left">
+            <Style Selector="^ /template/ ContentPresenter#PART_Header">
+                <Setter Property="Grid.Row" Value="0"></Setter>
+                <Setter Property="Grid.Column" Value="0"></Setter>
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_Content">
+                <Setter Property="Grid.Row" Value="1"></Setter>
+                <Setter Property="Grid.Column" Value="0"></Setter>
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Time">
+                <Setter Property="Grid.Row" Value="2"></Setter>
+                <Setter Property="Grid.Column" Value="0"></Setter>
+            </Style>
+        </Style>
+        <Style Selector="^:all-right">
+            <Style Selector="^ /template/ ContentPresenter#PART_Header">
+                <Setter Property="Grid.Row" Value="0"></Setter>
+                <Setter Property="Grid.Column" Value="2"></Setter>
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_Content">
+                <Setter Property="Grid.Row" Value="1"></Setter>
+                <Setter Property="Grid.Column" Value="2"></Setter>
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Time">
+                <Setter Property="Grid.Row" Value="2"></Setter>
+                <Setter Property="Grid.Column" Value="2"></Setter>
+            </Style>
+        </Style>
+        <Style Selector="^:separate">
+            <Style Selector="^ /template/ ContentPresenter#PART_Header">
+                <Setter Property="Grid.Row" Value="0"></Setter>
+                <Setter Property="Grid.Column" Value="2"></Setter>
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_Content">
+                <Setter Property="Grid.Row" Value="1"></Setter>
+                <Setter Property="Grid.Column" Value="2"></Setter>
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Time">
+                <Setter Property="Grid.Row" Value="0"></Setter>
+                <Setter Property="Grid.Column" Value="0"></Setter>
+            </Style>
+        </Style>
    </ControlTheme>
 </ResourceDictionary>
--- a/src/Ursa/Controls/Timeline/Timeline.cs
+++ b/src/Ursa/Controls/Timeline/Timeline.cs
@@ -69,6 +69,27 @@ public class Timeline: ItemsControl
        set => SetValue(DescriptionTemplateProperty, value);
    }

+    public static readonly StyledProperty<IBinding?> TimeMemberBindingProperty = AvaloniaProperty.Register<Timeline, IBinding?>(
+        nameof(TimeMemberBinding));
+
+    [AssignBinding]
+    [InheritDataTypeFromItems(nameof(ItemsSource))]
+    public IBinding? TimeMemberBinding
+    {
+        get => GetValue(TimeMemberBindingProperty);
+        set => SetValue(TimeMemberBindingProperty, value);
+    }
+
+    public static readonly StyledProperty<string?> TimeFormatProperty = AvaloniaProperty.Register<Timeline, string?>(
+        nameof(TimeFormat), defaultValue:"yyyy-MM-dd HH:mm:ss");
+
+    public string? TimeFormat
+    {
+        get => GetValue(TimeFormatProperty);
+        set => SetValue(TimeFormatProperty, value);
+    }
+    
+
    public static readonly StyledProperty<TimelineDisplayMode> ModeProperty = AvaloniaProperty.Register<Timeline, TimelineDisplayMode>(
        nameof(Mode));

@@ -124,6 +145,11 @@ public class Timeline: ItemsControl
            {
                t.Bind(ContentControl.ContentProperty, DescriptionMemberBinding);
            }
+            if (TimeMemberBinding != null)
+            {
+                t.Bind(TimelineItem.TimeProperty, TimeMemberBinding);
+            }
+            t.SetCurrentValue(TimelineItem.TimeFormatProperty, TimeFormat);
            t.SetCurrentValue(TimelineItem.IconTemplateProperty, IconTemplate);
            t.SetCurrentValue(HeaderedContentControl.HeaderTemplateProperty, ItemTemplate);
            t.SetCurrentValue(ContentControl.ContentTemplateProperty, DescriptionTemplate);
--- a/src/Ursa/Controls/Timeline/TimelineDisplayMode.cs
+++ b/src/Ursa/Controls/Timeline/TimelineDisplayMode.cs
@@ -6,4 +6,11 @@ public enum TimelineDisplayMode
    Center,
    Right,
    Alternate,
+}
+
+public enum TimelineItemDisplayMode
+{
+    Left,
+    Right,
+    Separate,
 }
--- a/src/Ursa/Controls/Timeline/TimelineItem.cs
+++ b/src/Ursa/Controls/Timeline/TimelineItem.cs
@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
 using Avalonia.Data;
@@ -9,11 +10,30 @@ using Avalonia.Media;
 namespace Ursa.Controls;

 [PseudoClasses(PC_First, PC_Last, PC_EmptyIcon)]
+[TemplatePart(PART_Header, typeof(ContentPresenter))]
+[TemplatePart(PART_Icon, typeof(ContentPresenter))]
+[TemplatePart(PART_Content, typeof(ContentPresenter))]
+[TemplatePart(PART_Time, typeof(TextBlock))]
+[TemplatePart(PART_RootGrid, typeof(Grid))]
 public class TimelineItem: HeaderedContentControl
 {
    public const string PC_First = ":first";
    public const string PC_Last = ":last";
    public const string PC_EmptyIcon = ":empty-icon";
+    public const string PC_AllLeft=":all-left"; 
+    public const string PC_AllRight=":all-right";
+    public const string PC_Separate = ":separate";
+    public const string PART_Header = "PART_Header";
+    public const string PART_Icon = "PART_Icon";
+    public const string PART_Content = "PART_Content";
+    public const string PART_Time = "PART_Time";
+    public const string PART_RootGrid = "PART_RootGrid";
+    
+    private ContentPresenter? _headerPresenter;
+    private ContentPresenter? _iconPresenter;
+    private ContentPresenter? _contentPresenter;
+    private TextBlock? _timePresenter;
+    private Grid? _rootGrid;
    
    public static readonly StyledProperty<object?> IconProperty = AvaloniaProperty.Register<TimelineItem, object?>(
        nameof(Icon));
@@ -41,6 +61,15 @@ public class TimelineItem: HeaderedContentControl
        get => GetValue(TypeProperty);
        set => SetValue(TypeProperty, value);
    }
+
+    public static readonly StyledProperty<TimelineItemDisplayMode> ModeProperty = AvaloniaProperty.Register<TimelineItem, TimelineItemDisplayMode>(
+        nameof(Mode), defaultValue: TimelineItemDisplayMode.Right);
+
+    public TimelineItemDisplayMode Mode
+    {
+        get => GetValue(ModeProperty);
+        set => SetValue(ModeProperty, value);
+    }
    
    public static readonly DirectProperty<TimelineItem, double> LeftWidthProperty = AvaloniaProperty.RegisterDirect<TimelineItem, double>(
        nameof(LeftWidth), o => o.LeftWidth, (o, v) => o.LeftWidth = v);
@@ -69,9 +98,53 @@ public class TimelineItem: HeaderedContentControl
        set => SetAndRaise(RightWidthProperty, ref _rightWidth, value);
    }

+    public static readonly StyledProperty<DateTime> TimeProperty = AvaloniaProperty.Register<TimelineItem, DateTime>(
+        nameof(Time));
+
+    public DateTime Time
+    {
+        get => GetValue(TimeProperty);
+        set => SetValue(TimeProperty, value);
+    }
+
+    public static readonly StyledProperty<string?> TimeFormatProperty = AvaloniaProperty.Register<TimelineItem, string?>(
+        nameof(TimeFormat));
+
+    public string? TimeFormat
+    {
+        get => GetValue(TimeFormatProperty);
+        set => SetValue(TimeFormatProperty, value);
+    }
+
    static TimelineItem()
    {
        IconProperty.Changed.AddClassHandler<TimelineItem, object?>((item, args) => { item.OnIconChanged(args); });
+        ModeProperty.Changed.AddClassHandler<TimelineItem, TimelineItemDisplayMode>((item, args) => { item.OnModeChanged(args); });
+        AffectsMeasure<TimelineItem>(LeftWidthProperty, RightWidthProperty, IconWidthProperty);
+    }
+
+    private void OnModeChanged(AvaloniaPropertyChangedEventArgs<TimelineItemDisplayMode> args)
+    {
+        SetMode(args.NewValue.Value);
+    }
+
+    private void SetMode(TimelineItemDisplayMode mode)
+    {
+        PseudoClasses.Set(PC_AllLeft, mode == TimelineItemDisplayMode.Left);
+        PseudoClasses.Set(PC_AllRight, mode == TimelineItemDisplayMode.Right);
+        PseudoClasses.Set(PC_Separate, mode == TimelineItemDisplayMode.Separate);
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        PseudoClasses.Set(PC_EmptyIcon, Icon is null);
+        _headerPresenter = e.NameScope.Find<ContentPresenter>(PART_Header);
+        _iconPresenter = e.NameScope.Find<ContentPresenter>(PART_Icon);
+        _contentPresenter = e.NameScope.Find<ContentPresenter>(PART_Content);
+        _timePresenter = e.NameScope.Find<TextBlock>(PART_Time);
+        _rootGrid = e.NameScope.Find<Grid>(PART_RootGrid);
+        SetMode(Mode);
    }

    private void OnIconChanged(AvaloniaPropertyChangedEventArgs<object?> args)
@@ -84,4 +157,14 @@ public class TimelineItem: HeaderedContentControl
        PseudoClasses.Set(PC_First, start);
        PseudoClasses.Set(PC_Last, end);
    }
+
+    internal (double?, double?, double?, double?) GetWidth()
+    {
+        return (_headerPresenter?.Bounds.Width, _contentPresenter?.Bounds.Width, _iconPresenter?.Bounds.Width, _timePresenter?.Bounds.Width);
+    }
+
+    internal void SetWidth(double? header, double? content, double? icon, double? time)
+    {
+        _rootGrid.ColumnDefinitions[0].Width = new GridLength(200);
+    }
 }
--- a/src/Ursa/Controls/Timeline/TimelinePanel.cs
+++ b/src/Ursa/Controls/Timeline/TimelinePanel.cs
@@ -25,19 +25,48 @@ public class TimelinePanel: Panel
        double left = 0;
        double right = 0;
        double icon = 0;
+        double width = 0;
+        double height = 0;
+        foreach (var child in Children)
+        {
+            child.Measure(availableSize);
+            if (child is TimelineItem t)
+            {
+                var doubles = t.GetWidth();
+            }
+            width = Math.Max(width, child.DesiredSize.Width);
+            height+=child.DesiredSize.Height;
+        }
        foreach (var child in Children)
        {
            if (child is TimelineItem t)
            {
-                
+                t.LeftWidth = left;
+                t.RightWidth = right;
+                t.IconWidth = icon;
            }
        }
-        return base.MeasureOverride(availableSize);
+
+        return new Size(width, height);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
-        return base.ArrangeOverride(finalSize);
-        
+        Rect rect = new Rect();
+        foreach (var child in Children)
+        {
+            rect = rect.WithWidth(Math.Max(rect.Width, child.DesiredSize.Width));
+            rect = rect.WithHeight(rect.Height + child.DesiredSize.Height);
+            child.Arrange(rect);
+            rect = rect.WithY(rect.Y+child.DesiredSize.Height);
+            if (child is TimelineItem t)
+            {
+                var doubles = t.GetWidth();
+                t.SetWidth(0, 0, 0, 0);
+            }
+            
+        }
+        //return base.ArrangeOverride(finalSize);
+        return rect.Size;
    }
 }