ChartPanAndZoomBehavior problems

[Tinja]

Hi!
I have a nasty problem with the ChartPanAndZoomBehavior.
At first I tried binding values to the PanMode and ZoomMode through a converter that returned ChartPanZoomMode, but it didn't work at all. (Also I need to change the behavior depending on the orientation of the phone.) I have ended up writing a whole ton of code-behind to handle the ChartPanAndZoomBehavior, but nothing seems to work.

Here's some background of the "chart implementation":
I have a user control that works as an item template for report items which are displayed on a pivot page. The user control can display all the basic charts and some others (e.g. gauge) according to the data bound to the control. The report model for the charts contains properties that define the properties of a chart. Some of these properties cannot be bound in the xaml even with converters, e.g. CharPanAndZoomBehavior, which is the most frustrating issue I've run into so far.

To explain my problem here's an example: I have two charts, one normal bar chart wrapped in a grid and one "horizontal" bar chart wrapped in a scrollviewer. I set the ChartPanAndZoomBehavior in the code-behind as the chart is loaded/rendered according to the panzoom-property in the model. For some reason I cannot set the behavior of the normal chart, but it works just fine with the "horizontal" bar chart. I have tried so many different ways to get this working, but I can't find anything that works for both chart types.

Thank you and let me know if you need something else to solve this.

BR,
Tinja

And here are zome code examples:
The charts:
- Data series are set in the code behind according to the model

<Grid x:Name="ContentGrid" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid x:Name="Charts">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <ScrollViewer x:Name="HSBCScroll" Grid.Row="2">
                        <telerikChart:RadCartesianChart x:Name="HorizontalChart" Background="Transparent" Margin="0,0,24,6"
                                                    Height="{Binding CurrentReport.DataSet, Converter={StaticResource HeightConverter}, ConverterParameter=DatasetCount}"
                                                    Visibility="{Binding CurrentReport.ChartType, Converter={StaticResource ChartTypeVisibilityConverter}, ConverterParameter=HorizontalChart}"
                                                    Foreground="{StaticResource CustomForegroundBrush}"
                                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" >
                            <telerikChart:RadCartesianChart.HorizontalAxis>
                                <telerikChart:LinearAxis Foreground="{StaticResource CustomForegroundBrush}" LineStroke="{StaticResource ChartLineBrush}"
                                            LabelFormat="{Binding CurrentReport.YLabelFormat}" />
                            </telerikChart:RadCartesianChart.HorizontalAxis>
                            <telerikChart:RadCartesianChart.VerticalAxis>
                                <telerikChart:CategoricalAxis Foreground="{StaticResource CustomForegroundBrush}" LineStroke="{StaticResource ChartLineBrush}" MaxWidth="100"
                                                 LabelFormat="{Binding CurrentReport.XLabelFormat}" LabelFitMode="MultiLine" HorizontalAlignment="Left"/>
                            </telerikChart:RadCartesianChart.VerticalAxis>
                            <telerikChart:RadCartesianChart.Grid>
                                <telerikChart:CartesianChartGrid MajorLinesVisibility="{Binding CurrentReport.GridLine, Converter={StaticResource LineVisibilityConverter}, ConverterParameter=GridLineVisibility}"
                                                         >
                                    <telerikChart:CartesianChartGrid.MajorYLineStyle>
                                        <Style TargetType="Line">
                                            <Setter Property="StrokeDashArray" Value="1,1"/>
                                            <Setter Property="Stroke" Value="{StaticResource ChartLineBrush}"/>
                                        </Style>
                                    </telerikChart:CartesianChartGrid.MajorYLineStyle>
                                </telerikChart:CartesianChartGrid>
                            </telerikChart:RadCartesianChart.Grid>
                            <telerikChart:RadCartesianChart.Behaviors>
                                <!--<telerikChart:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"/>-->
                                <telerikChart:ChartTooltipBehavior  ContextNeeded="ChartTooltipBehaviorContextNeeded" TriggerMode="Hold" SnapToClosestPoint="True"/>
                            </telerikChart:RadCartesianChart.Behaviors>
                            <telerikChart:RadCartesianChart.TooltipTemplate>
                                <DataTemplate>
                                    <Border Background="White" BorderThickness="1" BorderBrush="{StaticResource CustomForegroundBrush}"
                                        Padding="12,18">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition/>
                                                <RowDefinition/>
                                            </Grid.RowDefinitions>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Title}"  Margin="0,0,6,0" FontFamily="Segoe WP Semibold"/>
                                                <TextBlock Text="{Binding Category}" FontFamily="Segoe WP Semibold"/>
                                            </StackPanel>
                                            <ItemsControl Grid.Row="1" ItemsSource="{Binding TooltipDetails}">
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <Grid>
                                                            <StackPanel Orientation="Horizontal">
                                                                <Rectangle Height="20" Width="20" Fill="{Binding FillColor}"/>
                                                                <TextBlock Text="{Binding SeriesName}" Margin="6,0,6,0" FontFamily="Segoe WP"/>
                                                                <TextBlock Text="{Binding Value}" FontFamily="Segoe WP"/>
                                                            </StackPanel>
                                                        </Grid>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </Grid>
                                    </Border>
                                </DataTemplate>
                            </telerikChart:RadCartesianChart.TooltipTemplate>
                        </telerikChart:RadCartesianChart>
                    </ScrollViewer>

                    <telerikChart:RadCartesianChart x:Name="Chart" Background="Transparent"  Grid.Row="2"
                                                    Visibility="{Binding CurrentReport.ChartType, Converter={StaticResource ChartTypeVisibilityConverter}, ConverterParameter=NormalChart}"
                                                    Foreground="{StaticResource CustomForegroundBrush}"
                                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="12" RenderTransformOrigin="0.5,0.5">
                        <telerikChart:RadCartesianChart.HorizontalAxis>
                            <telerikChart:CategoricalAxis Foreground="{StaticResource CustomForegroundBrush}"  LabelFitMode="Rotate" LineStroke="{StaticResource ChartLineBrush}"
                                                          LabelFormat="{Binding CurrentReport.XLabelFormat}" FontSize="12" LabelInterval="{Binding CurrentReport.LabelInterval}"/>
                        </telerikChart:RadCartesianChart.HorizontalAxis>
                        <telerikChart:RadCartesianChart.VerticalAxis>
                            <telerikChart:LinearAxis Foreground="{StaticResource CustomForegroundBrush}"  LineStroke="{StaticResource ChartLineBrush}"
                                                     LabelFormat="{Binding CurrentReport.YLabelFormat}" FontSize="12"/>
                        </telerikChart:RadCartesianChart.VerticalAxis>
                        <telerikChart:RadCartesianChart.Grid>
                            <telerikChart:CartesianChartGrid MajorLinesVisibility="{Binding CurrentReport.GridLine, Converter={StaticResource LineVisibilityConverter}, ConverterParameter=GridLineVisibility}"
                                                             BorderBrush="{StaticResource CustomForegroundBrush}" >
                                <telerikChart:CartesianChartGrid.MajorYLineStyle>
                                    <Style TargetType="Line">
                                        <Setter Property="StrokeDashArray" Value="1,1"/>
                                        <Setter Property="Stroke" Value="{StaticResource ChartLineBrush}"/>
                                    </Style>
                                </telerikChart:CartesianChartGrid.MajorYLineStyle>
                            </telerikChart:CartesianChartGrid>
                        </telerikChart:RadCartesianChart.Grid>
                        <telerikChart:RadCartesianChart.Behaviors>
                            <!--<telerikChart:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"/>-->
                            <telerikChart:ChartTooltipBehavior ContextNeeded="ChartTooltipBehaviorContextNeeded" TriggerMode="Hold" SnapToClosestPoint="True" />
                        </telerikChart:RadCartesianChart.Behaviors>
                        <telerikChart:RadCartesianChart.TooltipTemplate>
                            <DataTemplate>
                                <Border Background="White" BorderThickness="1" BorderBrush="{StaticResource CustomForegroundBrush}"
                                        Padding="12,18">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Title}"  Margin="0,0,6,0" FontFamily="Segoe WP Semibold"/>
                                            <TextBlock Text="{Binding Category}" FontFamily="Segoe WP Semibold"/>
                                        </StackPanel>
                                        <ItemsControl Grid.Row="1" ItemsSource="{Binding TooltipDetails}">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <Grid>
                                                        <StackPanel Orientation="Horizontal">
                                                            <Rectangle Height="20" Width="20" Fill="{Binding FillColor}"/>
                                                            <TextBlock Text="{Binding SeriesName}" Margin="6,0,6,0" FontFamily="Segoe WP"/>
                                                            <TextBlock Text="{Binding Value}" FontFamily="Segoe WP"/>
                                                        </StackPanel>
                                                    </Grid>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </telerikChart:RadCartesianChart.TooltipTemplate>
                    </telerikChart:RadCartesianChart>
                </Grid>

Code behind:
- The Chart and HorizontalChart's behaviors after this have the ChartPanAndZoomBehavior and the values of the modes are Horizontal | Vertical, but it doesn't behave like that with the Chart.

private void SetChartPanZoomBehavior(Report report)
        {
            ChartPanAndZoomBehavior panZoomModeBehavior = new ChartPanAndZoomBehavior();

            switch (report.PanMode.ToLower())
            {
                case "vertical":
                    panZoomModeBehavior.PanMode = ChartPanZoomMode.Vertical;
                    break;
                case "horizontal":
                    panZoomModeBehavior.PanMode = ChartPanZoomMode.Horizontal;
                    break;
                case "none":
                    panZoomModeBehavior.PanMode = ChartPanZoomMode.None;
                    break;
                default:
                    panZoomModeBehavior.PanMode = ChartPanZoomMode.Both;
                    break;
            }

            switch (report.ZoomMode.ToLower())
            {
                case "vertical":
                    panZoomModeBehavior.ZoomMode = ChartPanZoomMode.Vertical;
                    break;
                case "horizontal":
                    panZoomModeBehavior.ZoomMode = ChartPanZoomMode.Horizontal;
                    break;
                case "none":
                    panZoomModeBehavior.ZoomMode = ChartPanZoomMode.None;
                    break;
                default:
                    panZoomModeBehavior.ZoomMode = ChartPanZoomMode.Both;
                    break;
            }
            if (!HorizontalChart.Behaviors.Any(b => b is ChartPanAndZoomBehavior))
            {
                Chart.Behaviors.Add(panZoomModeBehavior);
                HorizontalChart.Behaviors.Add(panZoomModeBehavior);
            }
            else
            {
                Chart.Behaviors[1] = panZoomModeBehavior;
                HorizontalChart.Behaviors[1] = panZoomModeBehavior;
            }
        }

[Deyan]

Hi Tinja,

Thanks for writing and please excuse us for the delay with our answer.

Based on the code snippets that you are sharing I cannot exactly say what's happening on your side.

Is it possible for you to directly send me your project reproducing the behavior so that we can see what happens and be able to further assist you?

You will have to open a new support ticket to be able to attach your project.

Thanks for your time.

Regards,
Deyan
Telerik

[Tinja]

Hi!
I can't send you that project, but I quickly created another project where I try to work on the same thing.
I'm trying to assing the ChartPanAndZoomBehavior in the code-behind of a user control that is used as a datatemplate for pivot items.
The value for the behavior's modes come from the report model.
Where would you like me to send this project?

Tinja

[Deyan]

Hi Tinja,

You just need to open a new support ticket and attach your project there.
Here on the forums that's not possible.

Regards,
Deyan
Telerik