交换滚动条和 X 轴标签

Question

我正在使用 SciChart 的试用版并进行了一些测试。

我需要将滚动条放在 X 轴的顶部。

经过一些研究和解析可视化树后，我打算更改 SciChartSurface 的样式并替换放置在堆栈面板内的轴和滚动条。

这是正确的解决方案吗？如果 AxisAlignment 为 Top，可视化树可能会有所不同。如果这是正确的方法，我在哪里可以找到表面风格？ Bland 无法识别图表，我无法使用它。

Answer 1

我正在研究这个，可以通过对轴控件本身进行模板化来实现 XAxis 上方的滚动条。

这是 AxisBase 控件 (SciChart v4) 的默认控件模板

<ControlTemplate TargetType="axes:AxisBase">
    <Border Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            ap:Device.SnapsToDevicePixels="True">

        <StackPanel x:Name="PART_AxisContainer"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Orientation="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, Converter={StaticResource AxisAlignmentToAxisOrientationConverter}, ConverterParameter=Inverse}"
                    ap:Device.SnapsToDevicePixels="True"
                    apc:AxisLayoutHelper.AxisAlignment="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}">

            <Grid HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  Canvas.ZIndex="1"
                  ap:Device.SnapsToDevicePixels="True"
                  apc:AxisLayoutHelper.IsInsideItem="True">

                <themes:AxisPanel x:Name="PART_AxisCanvas"
                                  AxisAlignment="{TemplateBinding AxisAlignment}"
                                  Background="Transparent"
                                  DrawLabels="{TemplateBinding DrawLabels}"
                                  DrawMajorTicks="{TemplateBinding DrawMajorTicks}"
                                  DrawMinorTicks="{TemplateBinding DrawMinorTicks}"
                                  IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
                                  MajorTickLineStyle="{TemplateBinding MajorTickLineStyle}"
                                  MinorTickLineStyle="{TemplateBinding MinorTickLineStyle}"
                                  ap:Device.SnapsToDevicePixels="True">

                    <Image x:Name="PART_AxisBitmapImage"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Stretch"
                           Stretch="Fill"
                           ap:Device.SnapsToDevicePixels="True" />

                    <Grid x:Name="PART_LabelsCanvas" Margin="{Binding LabelToTickIndent, RelativeSource={RelativeSource FindAncestor, AncestorType=themes:AxisPanel}, Mode=OneWay}">
                        <themes:TickLabelAxisCanvas AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
                                                    Background="Transparent"
                                                    ClipToBounds="False"
                                                    IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
                                                    ap:Device.SnapsToDevicePixels="True" />
                        <themes:TickLabelAxisCanvas AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
                                                    Background="Transparent"
                                                    ClipToBounds="False"
                                                    IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
                                                    Visibility="Collapsed"
                                                    ap:Device.SnapsToDevicePixels="True" />
                    </Grid>

                    <labelProviders:AxisTitle Orientation="{TemplateBinding Orientation}"
                                              Style="{TemplateBinding TitleStyle}"
                                              Visibility="{Binding Content, RelativeSource={RelativeSource Self}, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" />
                </themes:AxisPanel>

                <themes:ModifierAxisCanvas x:Name="PART_ModifierAxisCanvas"
                                           HorizontalAlignment="Stretch"
                                           VerticalAlignment="Stretch"
                                           ap:Device.SnapsToDevicePixels="True" />
            </Grid>

            <ContentPresenter Content="{TemplateBinding Scrollbar}" apc:AxisLayoutHelper.IsOutsideItem="True" />
        </StackPanel>
    </Border>
</ControlTemplate>

这里是修改后的模板（包括转换器）

<s:DateTimeAxis AxisAlignment="Bottom"
            AxisTitle="Top Axis"
            BorderThickness="0,0,0,1"
            Id="TopAxisId">
<s:DateTimeAxis.Resources>
    <s:AxisAlignmentToAxisOrientationConverter x:Key="AxisAlignmentToAxisOrientationConverter" />
    <s:CollapseIfNullOrEmptyStringConverter x:Key="CollapseIfNullOrEmptyStringConverter" />
</s:DateTimeAxis.Resources>
<s:DateTimeAxis.Template>
    <ControlTemplate TargetType="s:AxisBase">
        <Border Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        s:Device.SnapsToDevicePixels="True">

            <StackPanel x:Name="PART_AxisContainer"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Orientation="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, Converter={StaticResource AxisAlignmentToAxisOrientationConverter}, ConverterParameter=Inverse}"
                s:Device.SnapsToDevicePixels="True"
                s:AxisLayoutHelper.AxisAlignment="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}">

                <ContentPresenter Content="{TemplateBinding Scrollbar}" />

                <Grid HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              Canvas.ZIndex="1"
              s:Device.SnapsToDevicePixels="True"
              >

                    <s:AxisPanel x:Name="PART_AxisCanvas"
                              AxisAlignment="{TemplateBinding AxisAlignment}"
                              Background="Transparent"
                              DrawLabels="{TemplateBinding DrawLabels}"
                              DrawMajorTicks="{TemplateBinding DrawMajorTicks}"
                              DrawMinorTicks="{TemplateBinding DrawMinorTicks}"
                              IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
                              MajorTickLineStyle="{TemplateBinding MajorTickLineStyle}"
                              MinorTickLineStyle="{TemplateBinding MinorTickLineStyle}"
                              s:Device.SnapsToDevicePixels="True">

                        <Image x:Name="PART_AxisBitmapImage"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       Stretch="Fill"
                       s:Device.SnapsToDevicePixels="True" />

                        <Grid x:Name="PART_LabelsCanvas" Margin="{Binding LabelToTickIndent, RelativeSource={RelativeSource FindAncestor, AncestorType=s:AxisPanel}, Mode=OneWay}">
                            <s:TickLabelAxisCanvas AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
                                                Background="Transparent"
                                                ClipToBounds="False"
                                                IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
                                                s:Device.SnapsToDevicePixels="True" />
                            <s:TickLabelAxisCanvas AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
                                                Background="Transparent"
                                                ClipToBounds="False"
                                                IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
                                                Visibility="Collapsed"
                                                s:Device.SnapsToDevicePixels="True" />
                        </Grid>

                        <s:AxisTitle Orientation="{TemplateBinding Orientation}"
                                          Style="{TemplateBinding TitleStyle}"
                                          Visibility="{Binding Content, RelativeSource={RelativeSource Self}, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" />
                    </s:AxisPanel>

                    <s:ModifierAxisCanvas x:Name="PART_ModifierAxisCanvas"
                                       HorizontalAlignment="Stretch"
                                       VerticalAlignment="Stretch"
                                       s:Device.SnapsToDevicePixels="True" />
                </Grid>


            </StackPanel>
        </Border>
    </ControlTemplate>
</s:DateTimeAxis.Template>
<s:DateTimeAxis.Scrollbar>
    <s:SciChartScrollbar Margin="0 3 0 0" />
</s:DateTimeAxis.Scrollbar>
</s:DateTimeAxis>

此代码在 SciChart 中包含 AxisBase 的默认控件模板，但删除了两个关键的附加属性：AxisLayoutHelper.IsOutsideItem / IsInsideItem。这些属性用于根据轴的对齐方式调整轴与滚动条的顺序。删除它们，您可以将滚动条的 ContentPresenter 放在任何地方，它会保持原样。

这已在 SciChart WPF

的 v4 中进行测试

交换滚动条和 X 轴标签

Swap scroll bar and X axis labels

scichart