Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / WPF > Chart > Zooming and Scroll with MVVM

Not answered Zooming and Scroll with MVVM

Feed from this thread
  • Anand avatar

    Posted on Jan 11, 2012 (permalink)

    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;
            }
    

    Reply

  • Ves Ves admin's avatar

    Posted on Jan 16, 2012 (permalink)

    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 >>

    Attached files

    Reply

  • Anand avatar

    Posted on Jan 16, 2012 (permalink)

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

    Reply

  • Evgenia Evgenia admin's avatar

    Posted on Jan 18, 2012 (permalink)

    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 >>

    Reply

  • Senthil avatar

    Posted on Jan 25, 2012 (permalink)

    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

    Reply

  • Yavor Yavor admin's avatar

    Posted on Jan 30, 2012 (permalink)

    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 >>

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / WPF > Chart > Zooming and Scroll with MVVM
Related resources for "Zooming and Scroll with MVVM"

WPF Chart Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  ]