在轴和滚动条顶部显示工具提示

Question

我正在使用 CursorModifier 显示工具提示。我的工具提示比 SciChartSurface 大，我使用 ClipModifierSurface="False" 来显示整个工具提示。但在这种情况下，轴标签和滚动条位于工具提示的顶部。
描述的问题可以在 Featured Apps > Scientific Charts > Oscilloscope Demo.
上看到有什么方法可以将工具提示置于图表表面之上？

谢谢

Answer 1

唯一的方法是重新模板化整个 SciChartSurface，使其 PART_ChartModifierSurface 高于 PART_TopAxisArea / PART_LeftAxisArea / PART_BottomAxisArea / PART_RightAxisArea .

SciChartSurface 的默认控件模板如下。转换器包含在 SciChart 库中

<ControlTemplate TargetType="visuals:SciChartSurface">
    <Border Background="{TemplateBinding Background}"
            Padding="{TemplateBinding Padding}"
            ap:Device.SnapsToDevicePixels="True">

        <visuals:MainGrid x:Name="PART_MainGrid" ap:Device.SnapsToDevicePixels="True">
            <visuals:MainGrid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" MinWidth="10" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </visuals:MainGrid.ColumnDefinitions>
            <visuals:MainGrid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" MinHeight="10" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </visuals:MainGrid.RowDefinitions>

            <!--  Chart Title  -->
            <TextBlock Grid.Column="2"
                       Margin="0,0,0,9"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="{TemplateBinding FontSize}"
                       FontWeight="{TemplateBinding FontWeight}"
                       Foreground="{TemplateBinding Foreground}"
                       Text="{TemplateBinding ChartTitle}"
                       Visibility="{Binding ChartTitle, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" />

            <!--  GridLines panel (legacy, gridlines now in RenderSurface, but panel left for border and background  -->
            <axes:GridLinesPanel x:Name="PART_GridLinesArea"
                                 Grid.Row="3"
                                 Grid.Column="2"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsTabStop="False"
                                 Style="{TemplateBinding GridLinesPanelStyle}"
                                 ap:Device.SnapsToDevicePixels="True" />

            <themes:PolarPanel Grid.Row="3"
                               Grid.Column="2"
                               StretchToSize="{Binding IsPolarChart, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InvertBooleanConverter}}"
                               ap:Device.SnapsToDevicePixels="True">
                <Grid HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch"
                      ap:Device.SnapsToDevicePixels="True">

                    <!--  Annotations behind chart series  -->
                    <a:AnnotationSurface x:Name="PART_AnnotationsUnderlaySurface"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
                                         ap:ClipToBoundsHelper.ClipToBounds="{TemplateBinding ClipUnderlayAnnotations}"
                                         ap:Device.SnapsToDevicePixels="True" />

                    <!--  Render Surface (Chart Series)  -->
                    <ContentControl HorizontalContentAlignment="Stretch"
                                    VerticalContentAlignment="Stretch"
                                    Content="{TemplateBinding RenderSurface}"
                                    IsTabStop="False"
                                    ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
                                    ap:Device.SnapsToDevicePixels="True" />

                    <axes:AxisArea x:Name="PART_CenterYAxisArea"
                                   ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
                                   ItemsPanel="{TemplateBinding CenterYAxesPanelTemplate}"
                                   ap:Device.SnapsToDevicePixels="True" />

                    <!--  Annotations over the chart series  -->
                    <a:AnnotationSurface x:Name="PART_AnnotationsOverlaySurface"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
                                         ap:ClipToBoundsHelper.ClipToBounds="{TemplateBinding ClipOverlayAnnotations}"
                                         ap:Device.SnapsToDevicePixels="True" />

                    <!--  Modifier canvas, e.g. rubber band rectangles, rollover  -->
                    <visuals:ChartModifierSurface x:Name="PART_ChartModifierSurface"
                                                  HorizontalAlignment="Stretch"
                                                  VerticalAlignment="Stretch"
                                                  ClipToBounds="{TemplateBinding ClipModifierSurface}"
                                                  IsPolarChart="{TemplateBinding IsPolarChart}"
                                                  IsTabStop="False"
                                                  ap:Device.SnapsToDevicePixels="True" />

                    <!--  Adorners, e.g. annotation resize  -->
                    <Canvas x:Name="PART_ChartAdornerLayer"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            ap:ClipToBoundsHelper.ClipToBounds="{TemplateBinding ClipModifierSurface}"
                            ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
                            ap:Device.SnapsToDevicePixels="True">
                        <Canvas.Resources>
                            <Style TargetType="Thumb">
                                <Setter Property="BorderThickness" Value="2" />
                                <Setter Property="IsTabStop" Value="False" />
                                <Setter Property="Cursor" Value="Hand" />
                                <Setter Property="BorderBrush" Value="{me:ThemeBinding DefaultAnnotationsGripsBorderBrush}" />
                                <Setter Property="Background" Value="{me:ThemeBinding DefaultAnnotationsGripsBackroundBrush}" />
                                <Setter Property="Width" Value="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
                                <Setter Property="Height" Value="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Thumb">
                                            <Grid>
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal" />
                                                        <VisualState x:Name="MouseOver">
                                                            <Storyboard>
                                                                <DoubleAnimation Duration="0"
                                                                                 Storyboard.TargetName="Ellipse"
                                                                                 Storyboard.TargetProperty="Width"
                                                                                 To="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
                                                                <DoubleAnimation Duration="0"
                                                                                 Storyboard.TargetName="Ellipse"
                                                                                 Storyboard.TargetProperty="Height"
                                                                                 To="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Pressed">
                                                            <Storyboard>
                                                                <DoubleAnimation Duration="0"
                                                                                 Storyboard.TargetName="Ellipse"
                                                                                 Storyboard.TargetProperty="Width"
                                                                                 To="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
                                                                <DoubleAnimation Duration="0"
                                                                                 Storyboard.TargetName="Ellipse"
                                                                                 Storyboard.TargetProperty="Height"
                                                                                 To="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <Ellipse x:Name="Ellipse"
                                                         Width="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingThumbSize}"
                                                         Height="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingThumbSize}"
                                                         Fill="{TemplateBinding Background}"
                                                         Stroke="{TemplateBinding BorderBrush}"
                                                         StrokeThickness="{TemplateBinding BorderThickness}"
                                                         Effect="{Binding Source={x:Static me:EffectManager.Instance}, Path=EnableDropShadows, Converter={StaticResource EffectConverter}, ConverterParameter={StaticResource EllipseShadowEffect}}">                                                                    
                                                </Ellipse>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Canvas.Resources>
                    </Canvas>

                </Grid>

                <axes:AxisArea Name="PART_CenterXAxisArea"
                               ItemsPanel="{TemplateBinding CenterXAxesPanelTemplate}"
                               ap:Device.SnapsToDevicePixels="True" />

            </themes:PolarPanel>

            <!--  Chart area border only  -->
            <Border Grid.Row="3"
                    Grid.Column="2"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    BorderBrush="{Binding ElementName=PART_GridLinesArea, Path=BorderBrush}"
                    BorderThickness="{Binding ElementName=PART_GridLinesArea, Path=BorderThickness}"
                    ap:Device.SnapsToDevicePixels="True" />

            <!--  Axis areas  -->
            <axes:AxisArea x:Name="PART_TopAxisArea"
                           Grid.Row="2"
                           Grid.Column="2"
                           ItemsPanel="{TemplateBinding TopAxesPanelTemplate}"
                           Style="{StaticResource AxisAreaStyle}"
                           ap:Device.SnapsToDevicePixels="True" />
            <axes:AxisArea x:Name="PART_LeftAxisArea"
                           Grid.Row="3"
                           Grid.Column="1"
                           ItemsPanel="{TemplateBinding LeftAxesPanelTemplate}"
                           Style="{StaticResource AxisAreaStyle}"
                           ap:Device.SnapsToDevicePixels="True" />
            <axes:AxisArea x:Name="PART_BottomAxisArea"
                           Grid.Row="4"
                           Grid.Column="2"
                           ItemsPanel="{TemplateBinding BottomAxesPanelTemplate}"
                           Style="{StaticResource AxisAreaStyle}"
                           ap:Device.SnapsToDevicePixels="True" />
            <axes:AxisArea x:Name="PART_RightAxisArea"
                           Grid.Row="3"
                           Grid.Column="3"
                           ItemsPanel="{TemplateBinding RightAxesPanelTemplate}"
                           Style="{StaticResource AxisAreaStyle}"
                           ap:Device.SnapsToDevicePixels="True" />
        </visuals:MainGrid>
    </Border>
</ControlTemplate>

或者，我会建议最小化工具提示大小（覆盖整个图表的工具提示实际上没有用！），或者绑定到 TooltipModifier、RolloverModifier 的 SeriesInfo 输出以将数据放置在其他地方

在轴和滚动条顶部显示工具提示

Show Tooltip on top of Axis and Scroll bar

scichart