Zoom / PanOffset binding problem

2 posts, 0 answers
  1. ManniAT
    ManniAT avatar
    885 posts
    Member since:
    Nov 2003

    Posted 30 Aug 2012 Link to this post


    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.

  2. Yavor
    Yavor avatar
    401 posts

    Posted 04 Sep 2012 Link to this post

    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: 


    <UserControl x:Class="SilverlightApplication15.MainPage"
        d:DesignHeight="300" d:DesignWidth="400">
            <local:ViewModel />
                <Style TargetType="telerik:PanZoomBar">
                    <Setter Property="SelectionStart" Value="{Binding RangeStart, Mode=TwoWay}" />
                    <Setter Property="SelectionEnd" Value="{Binding RangeEnd, Mode=TwoWay}" />
            <telerik:RadCartesianChart x:Name="RadChart1" Grid.Row="1" Palette="Metro" Margin="0,0,0,0" IsHitTestVisible="true">
                    <telerik:ChartTrackBallBehavior SnapMode="ClosestPoint" />
                    <telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" />
                <telerik:LineSeries ItemsSource="{Binding Data}" ValueBinding="Value" CategoryBinding="Category" CombineMode="None" Stroke="Gray" >
                                <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}'}"/>
                    <telerik:DateTimeContinuousAxis MajorStepUnit="Hour"
                                               LabelFormat="HH:mm dd-MMM"
                                               PlotMode="OnTicks" FontFamily="Segoe UI" />
                    <telerik:LinearAxis Minimum="0" FontFamily="Segoe UI">
                    <telerik:CartesianChartGrid StripLinesVisibility="None" MajorLinesVisibility="XY">
                            <SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />
                            <SolidColorBrush Color="Transparent" />

    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
                return this.rangeStart;
                if (this.rangeStart != value)
                    this.rangeStart = value;
        public double RangeEnd
                return this.rangeEnd;
                if (this.rangeEnd != value)
                    this.rangeEnd = value;
        public List<ChartData> Data
                return this.data;
                if (this.data != value)
                    this.data = value;
        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,
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top