RadCartesianChart how to hide vertical, horizontal or both scrollbars

[Devid]

I want to hide only the horizontal or vertical scrollbar. Is that possible ?

The only solution I found now is the following style :

<Style TargetType="telerik:PanZoomBar">
                <Setter Property="Visibility" Value="{Binding Customization.ChartZoomMode, Converter={StaticResource ChartScrollbarVisibilityConverter}}"/>
            </Style>

The problem here is that it is hiding both Scrollbars. Is there a option where I can decide which one I want to hide ?

How can I use correctly the above xaml in code behind ? 

This is not working :

   return new RadCartesianChart
            {
                //Resources = new ResourceDictionary()
                //{
                //    {"HideScrollBarStyle", new Style(typeof(PanZoomBar))
                //        {
                //            Setters =
                //            {
                //                new Setter()
                //                {
                //                    Property = ContentControl.VisibilityProperty,
                //                    Value = Visibility.Collapsed,
                //                }
                //            }
                //        }
                //    }
                //},
                HorizontalAxis = new CategoricalAxis()
                {
                    LabelFitMode = AxisLabelFitMode.Rotate,
                    PlotMode     = hasBarSeries ? AxisPlotMode.BetweenTicks : AxisPlotMode.OnTicks,
                    Title = Customization.XAxisName?.ToUpper(),
                    SmartLabelsMode = AxisSmartLabelsMode.SmartStep ,
                    LabelTemplate = new DataTemplate()
                    {
                        VisualTree = xAxisFormat,
                    },

                    //GapLength = 0.15,
                },
                VerticalAxis = this.HasMultipleAxis ? null : GetYAxis(),
                SmartLabelsStrategy = new ChartSmartLabelsStrategy()
                {
                    ShouldMinimizeConnectorConflicts = true,
                },
......
......
.....

 

[Martin Ivanov]

Hello Devid,

To hide the horizontal or vertical panzoombar only, you can add the custom Style in the Resources of the corresponding axis. For example:

<telerik:RadCartesianChart.HorizontalAxis>
    <telerik:CategoricalAxis>
        <telerik:CategoricalAxis.Resources>
            <Style TargetType="telerik:PanZoomBar">
                <Setter Property="Visibility" Value="{Binding Customization.ChartZoomMode, Converter={StaticResource ChartScrollbarVisibilityConverter}}"/>
            </Style>
        </telerik:CategoricalAxis.Resources>
    </telerik:CategoricalAxis>
</telerik:RadCartesianChart.HorizontalAxis>

To create the style in code you can use the following syntax:

var style = new Style(typeof(PanZoomBar));
style.Setters.Add(new Setter(PanZoomBar.VisibilityProperty, new Binding("Customization.ChartZoomMode")
{
    Converter = new ChartScrollbarVisibilityConverter()
}));
horizontalAxis.Resources.Add(typeof(PanZoomBar), style);

Regards,
Martin Ivanov
Progress Telerik

[Devid]

I am using the code behind method but it is not working, can it be that BasedOn is missing in Style ? How can I set that in code behind ? That is in your second example.

[Devid]

Altough very tricky I found it out.

From ViewModel you have to access the View and then use the FindResource method. I just added object FindResource(object resourceKey)  to my IView Interface 

var style = new Style(typeof(PanZoomBar), (Style) ExtendedView.FindResource(typeof(PanZoomBar)));

[Martin Ivanov]

Hi Devid,

I am glad to hear that you found the solution. And thank you for sharing it here.

Regards,
Martin Ivanov
Progress Telerik