feat: rename AnchorId to Id and add TopOffset property. Add headless tests.

demo/Ursa.Demo/Pages/AnchorDemo.axaml

@@ -25,21 +25,21 @@
                             </Style>
                         </StackPanel.Styles>
                         <Border
-                            u:Anchor.AnchorId="a1"
+                            u:Anchor.Id="a1"
                             Height="300"
                             HorizontalAlignment="Stretch"
                             Background="{DynamicResource SemiRed2}">
                             <TextBlock Text="Border 1" />
                         </Border>
                         <Border
-                            u:Anchor.AnchorId="a2"
+                            u:Anchor.Id="a2"
                             Height="300"
                             HorizontalAlignment="Stretch"
                             Background="{DynamicResource SemiPink1}">
                             <TextBlock Text="Border 2" />
                         </Border>
                         <Border
-                            u:Anchor.AnchorId="a3"
+                            u:Anchor.Id="a3"
                             Height="300"
                             HorizontalAlignment="Stretch"
                             Background="{DynamicResource SemiPurple1}">
@@ -49,24 +49,24 @@
                             Height="300"
                             HorizontalAlignment="Stretch"
                             Background="{DynamicResource SemiViolet1}">
-                            <TextBlock u:Anchor.AnchorId="a4" Text="Border 4" />
+                            <TextBlock u:Anchor.Id="a4" Text="Border 4" />
                         </Border>
                         <Border
-                            u:Anchor.AnchorId="a5"
+                            u:Anchor.Id="a5"
                             Height="300"
                             HorizontalAlignment="Stretch"
                             Background="{DynamicResource SemiIndigo1}">
                             <TextBlock Text="Border 5" />
                         </Border>
                         <Border
-                            u:Anchor.AnchorId="a6"
+                            u:Anchor.Id="a6"
                             Height="300"
                             HorizontalAlignment="Stretch"
                             Background="{DynamicResource SemiBlue1}">
                             <TextBlock Text="Border 6" />
                         </Border>
                         <Border
-                            u:Anchor.AnchorId="a7"
+                            u:Anchor.Id="a7"
                             Height="300"
                             HorizontalAlignment="Stretch"
                             Background="{DynamicResource SemiLightBlue1}">
@@ -109,70 +109,70 @@
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor1"
+                            u:Anchor.Id="anchor1"
                             Background="{DynamicResource SemiRed2}">
                             <TextBlock Text="Border 1" />
                         </Border>
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor2"
+                            u:Anchor.Id="anchor2"
                             Background="{DynamicResource SemiPink1}">
                             <TextBlock Text="Border 2" />
                         </Border>
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor3"
+                            u:Anchor.Id="anchor3"
                             Background="{DynamicResource SemiPurple1}">
                             <TextBlock Text="Border 3" />
                         </Border>
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor3-1"
+                            u:Anchor.Id="anchor3-1"
                             Background="{DynamicResource SemiPurple1}">
                             <TextBlock Text="Border 3-1" />
                         </Border>
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor3-2"
+                            u:Anchor.Id="anchor3-2"
                             Background="{DynamicResource SemiPurple1}">
                             <TextBlock Text="Border 3-2" />
                         </Border>
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor3-3"
+                            u:Anchor.Id="anchor3-3"
                             Background="{DynamicResource SemiPurple1}">
                             <TextBlock Text="Border 3-3" />
                         </Border>
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor4"
+                            u:Anchor.Id="anchor4"
                             Background="{DynamicResource SemiViolet1}">
                             <TextBlock Text="Border 4" />
                         </Border>
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor5"
+                            u:Anchor.Id="anchor5"
                             Background="{DynamicResource SemiIndigo1}">
                             <TextBlock Text="Border 5" />
                         </Border>
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor6"
+                            u:Anchor.Id="anchor6"
                             Background="{DynamicResource SemiBlue1}">
                             <TextBlock Text="Border 6" />
                         </Border>
                         <Border
                             Height="300"
                             HorizontalAlignment="Stretch"
-                            u:Anchor.AnchorId="anchor7"
+                            u:Anchor.Id="anchor7"
                             Background="{DynamicResource SemiLightBlue1}">
                             <TextBlock Text="Border 7" />
                         </Border>

src/Ursa/Controls/Anchor/Anchor.cs

@@ -23,8 +23,8 @@ public class Anchor : ItemsControl
         AvaloniaProperty.Register<Anchor, ScrollViewer?>(
             nameof(TargetContainer));
 
-    public static readonly AttachedProperty<string?> AnchorIdProperty =
+    public static readonly AttachedProperty<string?> IdProperty =
-        AvaloniaProperty.RegisterAttached<Anchor, Visual, string?>("AnchorId");
+        AvaloniaProperty.RegisterAttached<Anchor, Visual, string?>("Id");
 
     private CancellationTokenSource _cts = new();
 
@@ -39,17 +39,25 @@ public class Anchor : ItemsControl
         set => SetValue(TargetContainerProperty, value);
     }
 
-    public static void SetAnchorId(Visual obj, string? value)
+    public static void SetId(Visual obj, string? value)
     {
-        obj.SetValue(AnchorIdProperty, value);
+        obj.SetValue(IdProperty, value);
     }
 
-    public static string? GetAnchorId(Visual obj)
+    public static string? GetId(Visual obj)
     {
-        return obj.GetValue(AnchorIdProperty);
+        return obj.GetValue(IdProperty);
     }
 
+    public static readonly StyledProperty<double> TopOffsetProperty = AvaloniaProperty.Register<Anchor, double>(
+        nameof(TopOffset));
 
+    public double TopOffset
+    {
+        get => GetValue(TopOffsetProperty);
+        set => SetValue(TopOffsetProperty, value);
+    }
+    
     protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
     {
         return NeedsContainer<AnchorItem>(item, out recycleKey);
@@ -70,7 +78,7 @@ public class Anchor : ItemsControl
         if (targetPosition.HasValue)
         {
             var from = TargetContainer.Offset.Y;
-            var to = TargetContainer.Offset.Y + targetPosition.Value.Y;
+            var to = TargetContainer.Offset.Y + targetPosition.Value.Y - TopOffset;
             if (to > TargetContainer.Extent.Height - TargetContainer.Bounds.Height)
                 to = TargetContainer.Extent.Height - TargetContainer.Bounds.Height;
             if (from == to) return;
@@ -111,11 +119,11 @@ public class Anchor : ItemsControl
     internal void InvalidateAnchorPositions()
     {
         if (TargetContainer is null) return;
-        var items = TargetContainer.GetVisualDescendants().Where(a => GetAnchorId(a) is not null);
+        var items = TargetContainer.GetVisualDescendants().Where(a => GetId(a) is not null);
         var positions = new List<(string, double)>();
         foreach (var item in items)
         {
-            var anchorId = GetAnchorId(item);
+            var anchorId = GetId(item);
             if (anchorId is null) continue;
             var position = item.TransformToVisual(TargetContainer)?.M32 + TargetContainer.Offset.Y;
             if (position.HasValue) positions.Add((anchorId, position.Value));
@@ -149,7 +157,7 @@ public class Anchor : ItemsControl
         if (source is null) return;
         MarkSelectedContainer(source);
         var target = TargetContainer?.GetVisualDescendants()
-                                    .FirstOrDefault(a => GetAnchorId(a) == source.AnchorId);
+                                    .FirstOrDefault(a => GetId(a) == source.AnchorId);
         if (target is null) return;
         ScrollToAnchor(target);
     }
@@ -190,7 +198,7 @@ public class Anchor : ItemsControl
     internal void MarkSelectedContainerByPosition()
     {
         if (TargetContainer is null) return;
-        var top = TargetContainer.Offset.Y;
+        var top = TargetContainer.Offset.Y + TopOffset;
         var topAnchorId = _positions.LastOrDefault(a => a.Item2 <= top).Item1;
         if (topAnchorId is null) return;
         var item = this.GetVisualDescendants().OfType<AnchorItem>()

tests/HeadlessTest.Ursa/Controls/AnchorTests/TestView.axaml

@@ -0,0 +1,90 @@
+<UserControl
+    x:Class="HeadlessTest.Ursa.Controls.AnchorTests.TestView"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <Grid ColumnDefinitions="Auto, *">
+        <ScrollViewer
+            Name="ScrollViewer"
+            Grid.Column="1"
+            VerticalAlignment="Stretch">
+            <StackPanel>
+                <StackPanel.Styles>
+                    <Style Selector="TextBlock">
+                        <Setter Property="HorizontalAlignment" Value="Center" />
+                        <Setter Property="VerticalAlignment" Value="Center" />
+                    </Style>
+                </StackPanel.Styles>
+                <Border
+                    Height="300"
+                    HorizontalAlignment="Stretch"
+                    u:Anchor.Id="a1"
+                    Background="{DynamicResource SemiRed2}">
+                    <TextBlock Text="Border 1" />
+                </Border>
+                <Border
+                    Height="300"
+                    HorizontalAlignment="Stretch"
+                    u:Anchor.Id="a2"
+                    Background="{DynamicResource SemiPink1}">
+                    <TextBlock Text="Border 2" />
+                </Border>
+                <Border
+                    Height="300"
+                    HorizontalAlignment="Stretch"
+                    u:Anchor.Id="a3"
+                    Background="{DynamicResource SemiPurple1}">
+                    <TextBlock Text="Border 3" />
+                </Border>
+                <Border
+                    Height="300"
+                    u:Anchor.Id="a4" 
+                    HorizontalAlignment="Stretch"
+                    Background="{DynamicResource SemiViolet1}">
+                    <TextBlock Text="Border 4" />
+                </Border>
+                <Border
+                    Height="300"
+                    HorizontalAlignment="Stretch"
+                    u:Anchor.Id="a5"
+                    Background="{DynamicResource SemiIndigo1}">
+                    <TextBlock Text="Border 5" />
+                </Border>
+                <Border
+                    Height="300"
+                    HorizontalAlignment="Stretch"
+                    u:Anchor.Id="a6"
+                    Background="{DynamicResource SemiBlue1}">
+                    <TextBlock Text="Border 6" />
+                </Border>
+                <Border
+                    Height="300"
+                    HorizontalAlignment="Stretch"
+                    u:Anchor.Id="a7"
+                    Background="{DynamicResource SemiLightBlue1}">
+                    <TextBlock Text="Border 7" />
+                </Border>
+            </StackPanel>
+        </ScrollViewer>
+        <u:Anchor
+            Name="Anchor"
+            Grid.Column="0"
+            Width="200"
+            TargetContainer="{Binding ElementName=ScrollViewer}">
+            <u:AnchorItem Name="Item1" AnchorId="a1" Header="Rectangle 1">
+                <u:AnchorItem Name="Item2" AnchorId="a2" Header="Rectangle 2" />
+                <u:AnchorItem AnchorId="a3" Header="Rectangle 3" />
+            </u:AnchorItem>
+            <u:AnchorItem Name="Item4" AnchorId="a4" Header="Rectangle 4" />
+            <u:AnchorItem AnchorId="a5" Header="Rectangle 5">
+                <u:AnchorItem AnchorId="a6" Header="Rectangle 6" />
+                <u:AnchorItem AnchorId="a7" Header="Rectangle 7" />
+            </u:AnchorItem>
+        </u:Anchor>
+    </Grid>
+</UserControl>

tests/HeadlessTest.Ursa/Controls/AnchorTests/TestView.axaml.cs

@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace HeadlessTest.Ursa.Controls.AnchorTests;
+
+public partial class TestView : UserControl
+{
+    public TestView()
+    {
+        InitializeComponent();
+    }
+}

tests/HeadlessTest.Ursa/Controls/AnchorTests/Tests.cs

@@ -0,0 +1,82 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Headless;
+using Avalonia.Headless.XUnit;
+using Avalonia.Input;
+using Avalonia.Threading;
+using Ursa.Controls;
+
+namespace HeadlessTest.Ursa.Controls.AnchorTests;
+
+public class Tests
+{
+    [AvaloniaFact]
+    public async void Click_Anchor_With_Mouse_Should_Update_Scroll_Offset()
+    {
+        var window = new Window()
+        {
+            Width = 500,
+            Height = 500,
+        };
+        var view = new TestView();
+        window.Content = view;
+        window.Show();
+        
+        var anchor = view.FindControl<Anchor>("Anchor");
+        var scrollViewer = view.FindControl<ScrollViewer>("ScrollViewer");
+        var item4 = view.FindControl<AnchorItem>("Item4");
+        
+        Assert.NotNull(anchor);
+        Assert.NotNull(scrollViewer);
+        Assert.NotNull(item4);
+
+        var transltion = item4.TranslatePoint(new Point(0, 0), window);
+        
+        Assert.Equal(0, scrollViewer.Offset.Y);
+        
+        // Simulate a click on the anchor
+        window.MouseDown(new Point(10, transltion.Value.Y+10), MouseButton.Left);
+        Dispatcher.UIThread.RunJobs();
+        await Task.Delay(800);
+        Assert.True(item4.IsSelected);
+        Assert.Equal(300.0 * 3, scrollViewer.Offset.Y, 1.0);
+    }
+    
+    [AvaloniaFact]
+    public async void Change_Scroll_Offset_Should_Update_Selected_Item()
+    {
+        var window = new Window()
+        {
+            Width = 500,
+            Height = 500,
+        };
+        var view = new TestView();
+        window.Content = view;
+        window.Show();
+        
+        var anchor = view.FindControl<Anchor>("Anchor");
+        var scrollViewer = view.FindControl<ScrollViewer>("ScrollViewer");
+        var item1 = view.FindControl<AnchorItem>("Item1");
+        var item2 = view.FindControl<AnchorItem>("Item2");
+        var item4 = view.FindControl<AnchorItem>("Item4");
+        
+        Assert.NotNull(anchor);
+        Assert.NotNull(scrollViewer);
+        Assert.NotNull(item1);
+        Assert.NotNull(item2);
+        Assert.NotNull(item4);
+        
+        Dispatcher.UIThread.RunJobs();
+        
+        Assert.True(item1.IsSelected);
+        Assert.False(item2.IsSelected);
+
+        // Change the scroll offset
+        scrollViewer.Offset = new Vector(0, 310.0);
+        Dispatcher.UIThread.RunJobs();
+        
+        // Check if the second item is selected
+        Assert.True(item2.IsSelected);
+        Assert.False(item4.IsSelected);
+    }
+}