how to Sync two GridViewScrollViewer

10 posts, 1 answers
  1. Dario Concilio
    Dario Concilio avatar
    180 posts
    Member since:
    Apr 2016

    Posted 15 Nov 2016 Link to this post

    Hi to all,

    I would to "sync" two GridView, my goal is allow the user to compare two lists, when he moves by scrollbar, both lists are moved in the same way.

    Does anyone have any idea?

  2. Dario Concilio
    Dario Concilio avatar
    180 posts
    Member since:
    Apr 2016

    Posted 15 Nov 2016 Link to this post

    I found old post, but it refers to old version. If I try to use this code with actually version, how can I modify this one?

    private void Grid_Loaded(object sender, RoutedEventArgs e)
            {
                var verticalScrollBar1 = (ScrollBar) this.Griglia1RadGridView.GetChildByName("PART_VerticalScrollBar");
                var horizontalScrollBar1 = (ScrollBar) this.Griglia1RadGridView.GetChildByName("PART_HorizontalScrollBar");
                var verticalScrollBar2 = (ScrollBar) this.Griglia2RadGridView.GetChildByName("PART_VerticalScrollBar");
                var horizontalScrollBar2 = (ScrollBar) this.Griglia2RadGridView.GetChildByName("PART_HorizontalScrollBar");
     
                verticalScrollBar1.ValueChanged += new RoutedPropertyChangedEventHandler<double>(verticalScrollBar1_ValueChanged);
                horizontalScrollBar1.ValueChanged += new RoutedPropertyChangedEventHandler<double>(horizontalScrollBar1_ValueChanged);
                verticalScrollBar2.ValueChanged += new RoutedPropertyChangedEventHandler<double>(verticalScrollBar2_ValueChanged);
                horizontalScrollBar2.ValueChanged += new RoutedPropertyChangedEventHandler<double>(horizontalScrollBar2_ValueChanged);
            }
     
            void horizontalScrollBar1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
            {
                this.Griglia2RadGridView.ScrollViewer SetHorizontalOffset(e.NewValue);
            }
     
            void verticalScrollBar1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
            {
                this.Griglia2RadGridView.ItemsControl.VirtualizingPanel.SetVerticalOffset(e.NewValue);
            }
     
            void horizontalScrollBar2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
            {
                this.Griglia1RadGridView.ItemsControl.VirtualizingPanel.SetHorizontalOffset(e.NewValue);
            }
     
            void verticalScrollBar2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
            {
                this.Griglia1RadGridView.ItemsControl.VirtualizingPanel.SetVerticalOffset(e.NewValue);
            }
  3. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    665 posts

    Posted 16 Nov 2016 Link to this post

    Hello Dario,

    I have attached a sample project for you that shows how to achieve the desired behavior. 

    Regards,
    Stefan Nenchev
    Telerik by Progress
    Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
  4. Dario Concilio
    Dario Concilio avatar
    180 posts
    Member since:
    Apr 2016

    Posted 16 Nov 2016 in reply to Stefan Nenchev Link to this post

    I tryed your solution and works, but I I add you code in my project, ScrollChanged not fire.

    ScrollViewer firstGridBar;
            ScrollViewer secondGridBar;
     
            private void Griglia1RadGridView_Loaded(object sender, RoutedEventArgs e)
            {
                firstGridBar = (sender as RadGridView).ChildrenOfType<ScrollViewer>().FirstOrDefault();
                firstGridBar.ScrollChanged += FirstGridBar_ScrollChanged;
            }
     
            private void Griglia2RadGridView_Loaded(object sender, RoutedEventArgs e)
            {
                secondGridBar = (sender as RadGridView).ChildrenOfType<ScrollViewer>().FirstOrDefault();
                secondGridBar.ScrollChanged += SecondGridBar_ScrollChanged;
            }
     
            private void FirstGridBar_ScrollChanged(object sender, ScrollChangedEventArgs e)
            {
                secondGridBar.ScrollToVerticalOffset(e.VerticalOffset);
                secondGridBar.ScrollToHorizontalOffset(e.HorizontalOffset);
            }
     
            private void SecondGridBar_ScrollChanged(object sender, ScrollChangedEventArgs e)
            {
                firstGridBar.ScrollToVerticalOffset(e.VerticalOffset);
                firstGridBar.ScrollToHorizontalOffset(e.HorizontalOffset);
            }
  5. Dario Concilio
    Dario Concilio avatar
    180 posts
    Member since:
    Apr 2016

    Posted 16 Nov 2016 in reply to Dario Concilio Link to this post

    I'm using Office2013 Theme
  6. Dario Concilio
    Dario Concilio avatar
    180 posts
    Member since:
    Apr 2016

    Posted 16 Nov 2016 in reply to Dario Concilio Link to this post

    Ehm, I'm using Framework 4.0
  7. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    665 posts

    Posted 18 Nov 2016 Link to this post

    Hi Dario,

    I tested the behavior with .NET framework 4.0 and the Office2013 theme and it is working fine at my end. I have attached a sample for your reference. Would it be possible to raise a ticket with a sample project that shows the undesired behavior so I can have a more detailed look?

    Regards,
    Stefan Nenchev
    Telerik by Progress
    Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
  8. Dario Concilio
    Dario Concilio avatar
    180 posts
    Member since:
    Apr 2016

    Posted 18 Nov 2016 in reply to Stefan Nenchev Link to this post

    Thank you, I found the reason, I'm using ShowSearchPanel="True" that disable firing (or I don't konw.....) ScrollChange event.

    This one is know, how can use this "link" between two grdiview and use SearchPanel?

  9. Answer
    Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    665 posts

    Posted 21 Nov 2016 Link to this post

    Hi Dario,

    When you enable the SearchPanel, an additional ScrollViewer appears. With this in mind, when subscribing to the ScrollChanged event of the ScrollViewer, you need to make sure that the correct element is targeted. You can apply the following change:

    private void clubsGrid_Loaded(object sender, RoutedEventArgs e)
            {
                firstGridBar = (sender as RadGridView).ChildrenOfType<ScrollViewer>().Where(x => x.Name == "PART_ItemsScrollViewer").FirstOrDefault();
                firstGridBar.ScrollChanged += FirstGridBar_ScrollChanged;
            }
     
            private void clubsGrid2_Loaded(object sender, RoutedEventArgs e)
            {
                secondGridBar = (sender as RadGridView).ChildrenOfType<ScrollViewer>().Where(x => x.Name == "PART_ItemsScrollViewer").LastOrDefault();
                secondGridBar.ScrollChanged += SecondGridBar_ScrollChanged;
            }

    Regards,
    Stefan Nenchev
    Telerik by Progress
    Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
  10. Dario Concilio
    Dario Concilio avatar
    180 posts
    Member since:
    Apr 2016

    Posted 21 Nov 2016 in reply to Stefan Nenchev Link to this post

    Perfect! Thank you Stefan!
Back to Top