This is a migrated thread and some comments may be shown as answers.

RadCartesianChart how to hide vertical, horizontal or both scrollbars

4 Answers 24 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Devid
Top achievements
Rank 1
Devid asked on 11 Apr 2019, 04:00 PM

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,
                },
......
......
.....

 

4 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 15 Apr 2019, 09:16 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Devid
Top achievements
Rank 1
answered on 15 Apr 2019, 03:42 PM
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.
0
Devid
Top achievements
Rank 1
answered on 15 Apr 2019, 04:27 PM
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)));
0
Martin Ivanov
Telerik team
answered on 17 Apr 2019, 08:25 AM
Hi Devid,

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

Regards,
Martin Ivanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ChartView
Asked by
Devid
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Devid
Top achievements
Rank 1
Share this question
or