Active frame Line

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

@@ -0,0 +1,27 @@
+using System.Globalization;
+using Avalonia;
+
+namespace PixiEditor.AvaloniaUI.Helpers.Converters;
+
+internal class TimelineSliderValueToMarginConverter : SingleInstanceMultiValueConverter<TimelineSliderValueToMarginConverter>
+{
+    public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        return Convert(new List<object?> { value }, targetType, parameter, culture);
+    }
+
+    public override object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (values.Count != 3)
+        {
+            throw new ArgumentException("TimelineSliderValueToMarginConverter requires 3 values");
+        }
+
+        if (values[0] is int frame && values[1] is double scale && values[2] is Vector offset)
+        {
+            return new Thickness(frame * scale + offset.X, 0, 0, 0);
+        }
+
+        return new Thickness();
+    }
+}

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

@@ -71,7 +71,7 @@
                                     <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                              Path="Scale" />
                                     <Binding RelativeSource="{RelativeSource TemplatedParent}"
-                                             Path="ScrollOffset"/>
+                                             Path="ScrollOffset" />
                                 </MultiBinding>
                             </animations:TimelineSlider.Maximum>
                             <Interaction.Behaviors>
@@ -85,6 +85,22 @@
                             </Interaction.Behaviors>
                         </animations:TimelineSlider>
 
+                        <Panel Grid.Row="1" Grid.Column="1" Margin="29, -16, 0, 0" VerticalAlignment="Stretch"
+                               ZIndex="11" HorizontalAlignment="Left">
+                            <Border Width="2" Background="{DynamicResource ThemeAccentBrush}">
+                                <Border.Margin>
+                                    <MultiBinding Converter="{converters:TimelineSliderValueToMarginConverter}">
+                                        <Binding Path="ActiveFrame"
+                                                 RelativeSource="{RelativeSource TemplatedParent}" />
+                                        <Binding Path="Scale"
+                                                 RelativeSource="{RelativeSource TemplatedParent}" />
+                                        <Binding Path="ScrollOffset"
+                                                 RelativeSource="{RelativeSource TemplatedParent}" />
+                                    </MultiBinding>
+                                </Border.Margin>
+                            </Border>
+                        </Panel>
+
                         <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"
                                       Name="PART_TimelineHeaderScroll"
                                       Grid.Row="1" Grid.Column="0">
@@ -130,9 +146,10 @@
                                                 </ItemsControl.ItemContainerTheme>
                                                 <ItemsControl.ItemsPanel>
                                                     <ItemsPanelTemplate>
-                                                        <Grid Margin="{Binding  Path=MinLeftOffset,
+                                                        <Grid
+                                                            Margin="{Binding  Path=MinLeftOffset,
                                                         RelativeSource={RelativeSource FindAncestor, AncestorType=animations:Timeline},
-                                                        Converter={converters:DoubleToThicknessConverter}, ConverterParameter=LR}"/>
+                                                        Converter={converters:DoubleToThicknessConverter}, ConverterParameter=LR}" />
                                                     </ItemsPanelTemplate>
                                                 </ItemsControl.ItemsPanel>
                                             </ItemsControl>