Question

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

我需要在X轴上方放置滚动条。

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

这是正确的解决方案吗？如果AxisAlignment为Top，则可视树可能不同。如果这是正确的方法，我在哪里可以找到表面的风格？布兰德不承认图表，我无法使用它。

Answer 1

我正在玩这个，可以通过模板化轴控制本身来实现XAxis上方的滚动条。

以下是AxisBase控件的默认控件模板（SciChart v4）

 $rootScope = $rootScope.$new();
 element = $compile(html)($rootScope);
 $rootScope.$digest(element);

 controller = element.controller('ngModel');
 scope = element.scope();

以下是修改后的模板（包括转换器）

<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>

此代码包含SciChart中AxisBase的默认控件模板，但删除了两个关键附加属性：AxisLayoutHelper.IsOutsideItem / IsInsideItem。这些属性用于调整Axis vs，Scrollbar的顺序，具体取决于轴的对齐方式。删除它们，您可以将滚动条的ContentPresenter放置在任何位置，它将保持不变。

这是在SciChart WPF

的第4版中进行测试的

交换滚动条和X轴标签

1 个答案: