Поменять полосу прокрутки и метки оси X

Question

Я использую пробную версию SciChart и делаю некоторые тесты.

Мне нужно перенести полосу прокрутки в верхней части оси X.

После некоторых исследований и анализа визуального дерева я планирую изменить стиль SciChartSurface и заменить ось и полосу прокрутки, которые расположены внутри панели стека.

Это правильное решение? Если AxisAlignment имеет значение Top, визуальное дерево может отличаться. Если это правильный путь, где я могу найти стиль поверхности? Блэнд не распознает график, и я не могу его использовать.

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>

Этот код включает шаблон элемента управления по умолчанию для AxisBase в SciChart, но удаляет два критически важных вложенных свойства: AxisLayoutHelper.IsOutsideItem / IsInsideItem. Эти свойства используются для настройки порядка осей и полос прокрутки в зависимости от выравнивания оси. Удаляя их, вы можете разместить ContentPresenter для полосы прокрутки где угодно, и она останется на месте.

Это проверено как работа в v4 SciChart WPF