Zooming and Scroll with MVVM

6 posts, 0 answers
  1. Anand
    Anand avatar
    12 posts
    Member since:
    Dec 2011

    Posted 11 Jan 2012 Link to this post

    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;
            }
    
  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 16 Jan 2012 Link to this post

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

  3. UI for WPF is Visual Studio 2017 Ready
  4. Anand
    Anand avatar
    12 posts
    Member since:
    Dec 2011

    Posted 16 Jan 2012 Link to this post

    Code you provided has same issue what I mentioned earlier. Zoom in and Out get fired but not reflecting any on chart 
  5. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 18 Jan 2012 Link to this post

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

  6. Senthil
    Senthil avatar
    1 posts
    Member since:
    Sep 2011

    Posted 25 Jan 2012 Link to this post

    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

  7. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 30 Jan 2012 Link to this post

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

Back to Top
UI for WPF is Visual Studio 2017 Ready