Horizontally scroll all rows within column at the same time using one scrollbar

Question

How can i horizontally scroll a listview within single column in a DataGrid, using a scrollbar that is external to the DataGrid, ensuring that each row scrolls at the same time?

(I would also like the starting position of the scrollbar to be all the way to the right, so that the last item in the listview is visible when the data is loaded)

I cannot use and third-party libraries or dlls.

Any help would be greatly appreciated.

Many thanks

EDIT

First column sample code

This is what i have so far. The scrollbars are all linked internally but they arent linked to any external scrollbar

pushpraj · Accepted Answer

I managed to create a synchronous scroll behavior using Attached properties

may this help you achieve your goal in some way

for this I have made some changes to your template as well

ListBox to ItemsControl
Wrapped ItemsControl in a ScrollViewer
Added ScrollHelper.IsSyncScrollEnabled & ScrollHelper.ScrollValue to ScrollViewer
added a Name to main DataGrid

sample xaml


    
        
            
                
                    
                        
                            
                                
                                   ... your item template here
                                
                                
                                    
                                        
                                    
                                
                            
                        
                    
                
            
             ... other columns etc

ScrollHelper class

namespace CSharpWPF
{
    class ScrollHelper : DependencyObject
    {
        public static bool GetIsSyncScrollEnabled(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsSyncScrollEnabledProperty);
        }

        public static void SetIsSyncScrollEnabled(DependencyObject obj, bool value)
        {
            obj.SetValue(IsSyncScrollEnabledProperty, value);
        }

        // Using a DependencyProperty as the backing store for IsSyncScrollEnabled.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsSyncScrollEnabledProperty =
            DependencyProperty.RegisterAttached("IsSyncScrollEnabled", typeof(bool), typeof(ScrollHelper), new PropertyMetadata(false, OnIsSyncScrollEnabledChanged));

        private static void OnIsSyncScrollEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ScrollViewer sv = d as ScrollViewer;
            if ((bool)e.NewValue)
                sv.ScrollChanged += sv_ScrollChanged;
            else
                sv.ScrollChanged -= sv_ScrollChanged;
        }

        static void sv_ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            if (e.HorizontalChange != 0)
            {
                ScrollViewer sv = sender as ScrollViewer;
                SetScrollValue(sv, sv.HorizontalOffset);
            }
        }

        public static double GetScrollValue(DependencyObject obj)
        {
            return (double)obj.GetValue(ScrollValueProperty);
        }

        public static void SetScrollValue(DependencyObject obj, double value)
        {
            obj.SetValue(ScrollValueProperty, value);
        }

        // Using a DependencyProperty as the backing store for ScrollValue.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ScrollValueProperty =
            DependencyProperty.RegisterAttached("ScrollValue", typeof(double), typeof(ScrollHelper), new PropertyMetadata(0.0, OnScrollValueChange));

        private static void OnScrollValueChange(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ScrollViewer sv = d as ScrollViewer;
            if (sv != null)
            {
                double offset = (double)e.NewValue;
                if (sv.HorizontalOffset != offset)
                    sv.ScrollToHorizontalOffset(offset);
            }
        }
    }
}

result is synchronous scrolling between all of the scrollviewers

result

Extra

if you do not want scroll bar to appear on all rows you can make use of triggers

eg


    
        
            
                
                    
                        
                            
                                
                                  ... your template here

result is a single scroll bar scrolls all the rows data

result

EDIT

to get the default scroll position to show the last item in the itemscontrol, change the method sv_ScrollChanged as follows

    static void sv_ScrollChanged(object sender, ScrollChangedEventArgs e)
    {
        ScrollViewer sv = sender as ScrollViewer;
        if (e.HorizontalChange != 0)
        {
            SetScrollValue(sv, sv.HorizontalOffset);
        }
        if (e.ExtentWidthChange != 0)
        {
            SetScrollValue(sv, e.ExtentWidth);
        }
    }

Horizontally scroll all rows within column at the same time using one scrollbar

Answers (2)

Related Questions