Alignment fixes

src/PixiEditor.AvaloniaUI/Helpers/Converters/DurationToWidthConverter.cs

@@ -1,4 +1,5 @@
 using System.Globalization;
+using Avalonia;
 
 namespace PixiEditor.AvaloniaUI.Helpers.Converters;
 
@@ -11,15 +12,18 @@ internal class DurationToWidthConverter : SingleInstanceMultiValueConverter<Dura
 
     public override object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
     {
-        if (values.Count != 2)
+        if (values.Count != 3)
         {
             return 0;
             throw new ArgumentException("DurationToWidthConverter requires 2 values");
         }
         
-        if(values[0] is int duration && values[1] is double scale)
+        if(values[0] is int duration && values[1] is double width && values[2] is double scale && parameter is double margin)
         {
-            return duration * scale;
+            int max = (int)Math.Floor((width) / scale);
+
+            double frameWidth = (width - margin) / max;
+            return frameWidth * duration;
         }
         
         return 0;

src/PixiEditor.AvaloniaUI/Styles/Templates/Timeline.axaml

@@ -8,7 +8,8 @@
                     xmlns:xaml="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
                     xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
                     xmlns:ui="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
-                    xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input">
+                    xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
+                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
     <ControlTheme TargetType="animations:Timeline" x:Key="{x:Type animations:Timeline}">
         <Setter Property="Template">
             <ControlTemplate>
@@ -51,7 +52,7 @@
                                 <ColumnDefinition Width="*" />
                             </Grid.ColumnDefinitions>
 
-                            <ItemsControl Grid.Column="0"
+                            <ItemsControl Grid.Column="0" Margin="0, 35"
                                           ItemsSource="{Binding KeyFrames, RelativeSource={RelativeSource TemplatedParent}}">
                                 <ItemsControl.DataTemplates>
                                     <DataTemplate DataType="document:KeyFrameGroupViewModel">
@@ -87,7 +88,7 @@
                                                 <MultiBinding.Converter>
                                                     <converters:TimelineSliderWidthToMaximumConverter />
                                                 </MultiBinding.Converter>
-                                                <Binding Path="VisualParent.Bounds"
+                                                <Binding Path="Bounds"
                                                          RelativeSource="{RelativeSource Self}" />
                                                 <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                                          Path="Scale" />
@@ -133,7 +134,13 @@
                                                 Item="{Binding}">
                                                 <animations:KeyFrame.Width>
                                                     <MultiBinding Converter="{converters:DurationToWidthConverter}">
+                                                        <MultiBinding.ConverterParameter>
+                                                            <!--TimelineSlider TimelineTickBar margin * 2-->
+                                                            <system:Double>60</system:Double>
+                                                        </MultiBinding.ConverterParameter>
                                                         <Binding Path="DurationBindable" />
+                                                        <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=ItemsPresenter}"
+                                                                 Path="Bounds.Width"/>
                                                         <Binding
                                                             RelativeSource="{RelativeSource FindAncestor, AncestorType=animations:Timeline}"
                                                             Path="Scale" />

src/PixiEditor.AvaloniaUI/Views/Animations/Timeline.cs

@@ -193,6 +193,8 @@ internal class Timeline : TemplatedControl
         
         newScale = Math.Clamp(newScale, 1, 900);
         Scale = newScale;
+        
+        e.Handled = true;
     }
 
     private static void IsPlayingChanged(AvaloniaPropertyChangedEventArgs e)

src/PixiEditor.AvaloniaUI/Views/Animations/TimelineTickBar.cs

@@ -38,8 +38,10 @@ public class TimelineTickBar : Control
     {
         double width = Bounds.Width;
         double height = Bounds.Height;
+        
+        int max = (int)Math.Floor((Bounds.Width + Bounds.X * 2) / Scale);
 
-        double frameWidth = Scale;
+        double frameWidth = width / max;
         int largeTickInterval = possibleLargeTickIntervals[0];
         
         foreach (int interval in possibleLargeTickIntervals)
@@ -60,8 +62,6 @@ public class TimelineTickBar : Control
         Pen largeTickPen = new Pen(Fill);
         Pen smallTickPen = new Pen(Fill, 0.5);
         
-        int max = (int)Math.Ceiling(width / frameWidth);
-        
         for (int i = 0; i <= max; i += largeTickInterval)
         {
             double x = i * frameWidth;