SciChart多图标事件标记实现：解决AxisMarkerAnnotation异常及可见性问题

针对你的需求，除了拆分为独立标注外，有两种更简洁的方案可以实现多图标始终可见的事件标注，同时规避AxisMarkerAnnotation的问题：

方案1：直接使用CustomAnnotation挂载到ModifierSurface #

这是最快捷的方式，无需自定义类，直接通过XAML配置即可。CustomAnnotation支持自定义内容，且设置SurfacePlacement="ModifierSurface"后，元素会处于图表顶层，不受视口裁剪影响，平移时不会消失。

示例代码（WPF）：

<s:SciChartSurface.Annotations>
    <!-- 绑定事件对应的X/Y轴坐标，设置顶层放置 -->
    <s:CustomAnnotation 
        SurfacePlacement="ModifierSurface"
        X1="2024-01-01"  <!-- 事件对应的X轴数据值 -->
        Y1="50">         <!-- 事件对应的Y轴数据值 -->
        <!-- 用StackPanel排列多个图标 -->
        <StackPanel Orientation="Horizontal" Margin="3">
            <Image Source="/YourProject;component/Assets/Icon1.png" Width="22" Height="22" />
            <Image Source="/YourProject;component/Assets/Icon2.png" Width="22" Height="22" Margin="4,0,0,0" />
        </StackPanel>
    </s:CustomAnnotation>
</s:SciChartSurface.Annotations>

如果需要固定在屏幕某个位置（比如顶部），可以改用相对坐标：

<s:CustomAnnotation 
    SurfacePlacement="ModifierSurface"
    X1="2024-01-01"
    RelativeYCoordinate="0.1"> <!-- Y轴方向相对顶部10%的位置 -->
    <!-- 图标内容同上 -->
</s:CustomAnnotation>

方案2：自定义Annotation类（更灵活的扩展） #

如果需要更复杂的交互或定位逻辑，可以自定义继承自Annotation的类，强制挂载到ModifierSurface，并封装图标布局逻辑。

示例代码（C#）：

public class MultiIconEventAnnotation : Annotation
{
    public MultiIconEventAnnotation()
    {
        // 强制放置在ModifierSurface，避免视口裁剪
        SurfacePlacement = AnnotationSurface.ModifierSurface;
        
        // 构建图标容器
        var iconContainer = new StackPanel 
        { 
            Orientation = Orientation.Horizontal, 
            Background = new SolidColorBrush(Colors.White),
            Padding = new Thickness(2),
            CornerRadius = new CornerRadius(3),
            BorderBrush = new SolidColorBrush(Colors.Gray),
            BorderThickness = new Thickness(1)
        };

        // 添加图标1
        var icon1 = new Image 
        { 
            Source = new BitmapImage(new Uri("pack://application:,,,/YourProject;component/Assets/Icon1.png")),
            Width = 20, Height = 20 
        };
        iconContainer.Children.Add(icon1);

        // 添加图标2
        var icon2 = new Image 
        { 
            Source = new BitmapImage(new Uri("pack://application:,,,/YourProject;component/Assets/Icon2.png")),
            Width = 20, Height = 20,
            Margin = new Thickness(3,0,0,0)
        };
        iconContainer.Children.Add(icon2);

        Content = iconContainer;
    }

    // 重写定位逻辑，自定义图标与事件点的对齐方式
    protected override void UpdateAdornerPosition(double xCoord, double yCoord)
    {
        base.UpdateAdornerPosition(xCoord, yCoord);
        if (Adorner == null) return;
        
        // 让图标中心对齐事件点
        Canvas.SetLeft(Adorner, xCoord - Adorner.ActualWidth / 2);
        Canvas.SetTop(Adorner, yCoord - Adorner.ActualHeight / 2);
    }
}

在XAML中使用自定义标注：

<s:SciChartSurface.Annotations>
    <local:MultiIconEventAnnotation X1="2024-01-01" Y1="50" />
</s:SciChartSurface.Annotations>

核心优势说明 #

1. 避免视口裁剪：ModifierSurface是SciChart的顶层绘图面，所有放置在此的元素不会因图表平移/缩放被裁剪，始终保持可见。
2. 无中点吸附问题：CustomAnnotation和自定义Annotation的定位逻辑完全可控，不会出现AxisMarkerAnnotation的异常吸附行为。
3. 复用性强：自定义类可以封装样式、交互逻辑，方便在多个图表中重复使用。

内容的提问来源于stack exchange，提问作者okipol