Zoom / PanOffset binding problem

[ManniAT]

Hi,

I use a RadCartesianChartView in a MVVM application.
I bind Zoom and PanOffset to two properties in the model.
Both values are set depending on the data.

So for an example if I get a lot of data I use greater zoom values.
And I also try to set PanOffset - which brings up a different problem.
But let me stay at the binding here....

With this markup nothing happens.

<telerik:RadCartesianChart Grid.Row="1" x:Name="rcData" PanOffset="{Binding PanOffset, Mode=OneWay}" Zoom="{Binding Zoom, Mode=OneWay}">

When I change it to

<telerik:RadCartesianChart Grid.Row="1" x:Name="rcData" PanOffset="{Binding PanOffset, Mode=OneWay}" Zoom="{Binding Zoom, Mode=TwoWay}">

it works for zoom.
Notice I changed the binding to TwoWay - which is not intended in my case - but unfortunately I have to do this else the value is not bound.

About Panning - is there a MVVM fitting way to scroll to the last item?
With CartesianChart where I have "percentage values" this is easy (the problem there - these values are not bindable).
I just set RangeStart and SliderSelectionStart to the same 0.X value and the end to 1.

But with RadChartView I have to know the layout (width) in order to set the scroll position.

By the way - the binding problem also occures with WPF.

Regards
Manfred

[Yavor]

Hello Manfred,

The pan zoom bar (the slider that controls the zoom and pan) knows the relative values that you are used to from RadChart. You can apply implicit style with TargetType=PanZoomBar to set two-way binding between the PanZoomBar.SelectionStart / SelectionEnd properties and properties in your ViewModel: 

XAML:

<UserControl x:Class="SilverlightApplication15.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:SilverlightApplication15"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.DataContext>
        <local:ViewModel />
    </UserControl.DataContext>

    <Grid>
        <Grid.Resources>
            <Style TargetType="telerik:PanZoomBar">
                <Setter Property="SelectionStart" Value="{Binding RangeStart, Mode=TwoWay}" />
                <Setter Property="SelectionEnd" Value="{Binding RangeEnd, Mode=TwoWay}" />
             </Style>
        </Grid.Resources>

        <telerik:RadCartesianChart x:Name="RadChart1" Grid.Row="1" Palette="Metro" Margin="0,0,0,0" IsHitTestVisible="true">
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartTrackBallBehavior SnapMode="ClosestPoint" />
                <telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" />
            </telerik:RadCartesianChart.Behaviors>

            <telerik:LineSeries ItemsSource="{Binding Data}" ValueBinding="Value" CategoryBinding="Category" CombineMode="None" Stroke="Gray" >
                <telerik:LineSeries.TrackBallInfoTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock FontFamily="Segoe UI" FontSize="10" Text="{Binding DataPoint.Category,StringFormat='Time: {0:H:mm}'}"/>
                            <TextBlock FontFamily="Segoe UI" FontSize="10" Text="{Binding DataPoint.Value,StringFormat='Total: {0}'}"/>
                        </StackPanel>
                    </DataTemplate>
                </telerik:LineSeries.TrackBallInfoTemplate>
            </telerik:LineSeries>

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis MajorStepUnit="Hour"
                                           LabelFormat="HH:mm dd-MMM"
                                                 LabelInterval="2"
                                           MaximumTicks="24"
                                           PlotMode="OnTicks" FontFamily="Segoe UI" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Minimum="0" FontFamily="Segoe UI">
                </telerik:LinearAxis>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid StripLinesVisibility="None" MajorLinesVisibility="XY">
                    <telerik:CartesianChartGrid.YStripeBrushes>
                        <SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
                        <SolidColorBrush Color="Transparent" />
                    </telerik:CartesianChartGrid.YStripeBrushes>
                </telerik:CartesianChartGrid>
            </telerik:RadCartesianChart.Grid>

        </telerik:RadCartesianChart>
    </Grid>
</UserControl>

C#

public class ViewModel : ViewModelBase
{
    private Random rand = new Random(123456);
    private List<ChartData> data;
    private double rangeStart = 0d;
    private double rangeEnd = 1d;

    public ViewModel()
    {
        this.Data = this.GetData();
    }

    public double RangeStart
    {
        get
        {
            return this.rangeStart;
        }
        set
        {
            if (this.rangeStart != value)
            {
                this.rangeStart = value;
                this.OnPropertyChanged("RangeStart");
            }
        }
    }

    public double RangeEnd
    {
        get
        {
            return this.rangeEnd;
        }
        set
        {
            if (this.rangeEnd != value)
            {
                this.rangeEnd = value;
                this.OnPropertyChanged("RangeEnd");
            }
        }
    }

    public List<ChartData> Data
    {
        get
        {
            return this.data;
        }
        set
        {
            if (this.data != value)
            {
                this.data = value;
                this.OnPropertyChanged("Data");
            }
        }
    }

    private List<ChartData> GetData()
    {
        List<ChartData> data = new List<ChartData>();
        for (int i = 0; i < 20; i++)
        {
            data.Add(new ChartData(DateTime.Today.AddDays(i), rand.Next(10, 50)));
        }

        return data;
    }
}

public class ChartData
{
    public ChartData(DateTime category, double value)
    {
        this.Category = category;
        this.Value = value;
    }

    public DateTime Category { get; set; }
    public double Value { get; set; }
}

Knowing the relative values in your model you can easily scroll to the last item.

Hope this helps! Regards,
Yavor
the Telerik team