Zooming and Scroll with MVVM

[Anand]

Trying to use zoom and scroll MVVM way. ZoomInCommand and ZoomOutCommand get fired however modified MinZoomRange, RangeEnd, RangeStart but zoom is not working. Can you suggest any alternative ?

 <charting:ChartArea Grid.Row="0" Grid.RowSpan="2"
                                       x:Name="chartArea"
                                       Legend="{Binding ElementName=legend}"
                                       EnableAnimations="False"
                                       SmartLabelsEnabled="True"
                                       Padding="5,10,20,10">
 
 
 
                            <charting:ChartArea.ZoomScrollSettingsX>
                                <charting:ZoomScrollSettings ScrollMode="ScrollAndZoom" 
                                                                MinZoomRange="{Binding MinZoomRange, Mode=TwoWay}" 
                                                                RangeEnd ="{Binding RangeEnd, Mode=TwoWay}"
                                                                RangeStart ="{Binding RangeStart, Mode=TwoWay}"/>
                            </charting:ChartArea.ZoomScrollSettingsX>
                            <charting:ChartArea.AxisY>
                                <charting:AxisY AutoRange="True" />
                            </charting:ChartArea.AxisY>
                            <charting:ChartArea.AxisX>
                                <charting:AxisX DefaultLabelFormat="MM.dd&#x0a;yyyy" StepLabelLevelCount="2" />
                            </charting:ChartArea.AxisX>
 
 
 
                        </charting:ChartArea>
 
                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,10,15,5">
                            <telerik:RadButton Command="{Binding ZoomInCommand}" Margin="5,0" Width="20" Height="20" CornerRadius="16" BorderBrush="{StaticResource StrongBrush}">
                                <Path Stretch="Fill" Width="8" Height="8" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="{StaticResource StrongBrush}"/>
                            </telerik:RadButton>
                            <telerik:RadButton Command="{Binding ZoomOutCommand}" Margin="5,0" Width="20" Height="20" CornerRadius="16" BorderBrush="{StaticResource StrongBrush}">
                                <Path Stretch="Fill" Width="8" Height="8" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="{StaticResource StrongBrush}"/>
                            </telerik:RadButton>
                        </StackPanel>

View Model

        #region zoom
    
 
        ICommand _zoomInCommand;
        public ICommand ZoomInCommand
        {
            get
            {
                if (_zoomInCommand == null)
                {
                    _zoomInCommand = new DelegateCommand(ZoomIn, CanZoomIn);
                }
                return _zoomInCommand;
            }
        }
 
        ICommand _zoomOutCommand;
        public ICommand ZoomOutCommand
        {
            get
            {
                if (_zoomOutCommand == null)
                {
                    _zoomOutCommand = new DelegateCommand(ZoomOut, CanZoomOut);
                }
                return _zoomOutCommand;
            }
        }
 
 
 
		private double _MaxZoomRange;
		public double MaxZoomRange
		{
			get { return _MaxZoomRange;}
			set
			{
				{
					_MaxZoomRange = value;
					OnPropertyChanged(()=>this.MaxZoomRange);
				}
			}
		} 
 
        
		private double _Range;
		public double Range
		{
			get { return _Range;}
			set
			{
				{
					_Range = value;
					OnPropertyChanged(()=>this.Range);
				}
			}
		} 
    
 
		private double _RangeEnd;
		public double RangeEnd
		{
			get { return _RangeEnd;}
			set
			{
				{
					_RangeEnd = value;
					OnPropertyChanged(()=>this.RangeEnd);
				}
			}
		} 
        
    
		private double _RangeStart;
		public double RangeStart
		{
			get { return _RangeStart;}
			set
			{
				{
					_RangeStart = value;
					OnPropertyChanged(()=>this.RangeStart);
				}
			}
		} 
    
        
		private double _MinZoomRange;
		public double MinZoomRange
		{
			get { return _MinZoomRange;}
			set
			{
				{
					_MinZoomRange = value;
					OnPropertyChanged(()=>this.MinZoomRange);
				}
			}
		} 
    
        //
        // Summary:
        //     Gets or sets the scroll mode.
        
        public ScrollMode ScrollMode { get; set; }
        //
        // Summary:
        //     Gets or sets the slider selection end.
        
        public double SliderSelectionEnd { get; set; }
        //
        // Summary:
        //     Gets or sets the slider selection start.
        
        public double SliderSelectionStart { get; set; }
        
 
        public void ZoomIn(object parameter)
        {
 
            double zoomCenter = RangeStart + (Range / 2);
            double newRange = Math.Max(MinZoomRange, Range) / 2;
            RangeStart = Math.Max(0, zoomCenter - (newRange / 2));
            RangeEnd = Math.Min(1, zoomCenter + (newRange / 2));
 
 
            ((DelegateCommand)_zoomInCommand).InvalidateCanExecute();
            ((DelegateCommand)_zoomOutCommand).InvalidateCanExecute();
        }
 
        public bool CanZoomIn(object parameter)
        {
 
            return Range > MinZoomRange;
        }
 
        public void ZoomOut(object parameter)
        {
 
            double zoomCenter = RangeStart + (Range / 2);
            double newRange = Math.Min(1, Range) * 2;
 
            if (zoomCenter + (newRange / 2) > 1)
                zoomCenter = 1 - (newRange / 2);
            else if (zoomCenter - (newRange / 2) < 0)
                zoomCenter = newRange / 2;
 
            RangeStart = Math.Max(0, zoomCenter - newRange / 2);
            RangeEnd = Math.Min(1, zoomCenter + newRange / 2);
 
 
 
            ((DelegateCommand)_zoomInCommand).InvalidateCanExecute();
            ((DelegateCommand)_zoomOutCommand).InvalidateCanExecute();
        }
 
        public bool CanZoomOut(object parameter)
        {
 
            return Range < 1d;
        }
        #endregion
        public ViewModel()
        {
            MinZoomRange = 0.005;
            Range = 1.0;
            RangeEnd = 1.0;
            RangeStart = 0.0;
        }

[Ves]

Hi Anand,

Please, find attached a small example, based on your code, which works fine on my end.  Note, that I have updated the Range property, so that it reflects changes in RangeStart and RangeEnd.

Best regards,
Ves
the Telerik team

[Anand]

Code you provided has same issue what I mentioned earlier. Zoom in and Out get fired but not reflecting any on chart 

[Evgenia]

Hi Anand,

Indeed the attached project was created under Silverlight where it worked as expected. Unfortunately it is not fully applicable for WPF. We are sorry for the inconvenience caused.
Have you seen our Zooming and Scrolling demo under WPF? It uses the same approach and you can reuse it in your scenario. Here is the path to it - http://demos.telerik.com/wpf/  Char t-> Zooming and Scrolling.

Kind regards,
Evgenia
the Telerik team

[Senthil]

Telerik RadControls for WPF Q3 2011 has so many bugs, zoom is not working, i think they need to have their products for customer needs but not so now.

In below version Y axis data point are not displaying properly, It is incorrect. I am ready to furnish the evidence for these things.

Runtime version: v4.0.30319
Version: 2011.3.1116.40

[Yavor]

Hi Senthil,

If you suspect that you have spotted a bug/issue with the control, the best course of action would be to open a formal support ticket, and send us a small working project, demonstrating the problematic behavior. We will debug it locally, and provide you with a sulution.

Regards,
Yavor
the Telerik team