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

Zooming and Scroll with MVVM

5 Answers 105 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Anand
Top achievements
Rank 1
Anand asked on 11 Jan 2012, 05:25 PM
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 { getset; }
        //
        // Summary:
        //     Gets or sets the slider selection end.
        
        public double SliderSelectionEnd { getset; }
        //
        // Summary:
        //     Gets or sets the slider selection start.
        
        public double SliderSelectionStart { getset; }
        
 
        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;
        }

5 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 16 Jan 2012, 01:11 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Anand
Top achievements
Rank 1
answered on 16 Jan 2012, 03:44 PM
Code you provided has same issue what I mentioned earlier. Zoom in and Out get fired but not reflecting any on chart 
0
Evgenia
Telerik team
answered on 18 Jan 2012, 03:24 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Senthil
Top achievements
Rank 1
answered on 25 Jan 2012, 04:50 PM

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

0
Yavor
Telerik team
answered on 30 Jan 2012, 10:38 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
Chart
Asked by
Anand
Top achievements
Rank 1
Answers by
Ves
Telerik team
Anand
Top achievements
Rank 1
Evgenia
Telerik team
Senthil
Top achievements
Rank 1
Yavor
Telerik team
Share this question
or