locked
[UWP] Gridview scrolling sync with slider RRS feed

  • Question

  • Hi All,

    I have gridview and above that one slider, I want to sync those two elements, i.e while moving slider gridview has to scroll and vice versa.

    please suggest how to implement.I have tried by getting scroll viewer inside  gridview but there is no accuracy.

    please find attachment for reference.

    Thanks

    Sarvesh.


    sarvesh

    Thursday, November 10, 2016 10:32 AM

Answers

  • Hi SARVESH.RVN, 

    We should be able to add the ScrollViewer.ViewChanged event of the ScrollViewer. That in the event we can use the ScrollViewer.HorizontalOffset divide by ScrollViewer.ScrollableWidth to get the percent of the location of the ScrollViewbar is.

    For example:

    private int MyValue;
    
    private void MyScrollView_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        var myScroller = sender as ScrollViewer;
        double i = (myScroller.HorizontalOffset / myScroller.ScrollableWidth);
        MyValue = Convert.ToInt32(i * 100);
        MySlider.Value = MyValue;
    }
    
    private void MyGrid_Loaded(object sender, RoutedEventArgs e)
    {
        List<ScrollViewer> mylists = new List<ScrollViewer>();
        Untils.FindChildren<ScrollViewer>(mylists, MyGrid);
        var MyScrollView = mylists[0];
        MyScrollView.ViewChanged += MyScrollView_ViewChanged;
    }
    

    Best Regards,

    Jayden Gu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Proposed as answer by Jayden Gu Thursday, November 17, 2016 3:12 AM
    • Marked as answer by SARVESH.RVN Monday, November 21, 2016 5:55 AM
    Wednesday, November 16, 2016 12:10 PM

All replies

  • Hi SARVESH.RVN,

    There is no property for slider to bind the Value to the GridView to scrlling the GridViewItems.

    You should able to add a attachproperty to the GridView to use it bind to the Value property of the GridView.

    Also we should able to get the ScrollView in the GridView by the VisualTreeHelper, and use the ScrollViewer.ScrollableWidth property to get the ScrollableWidth. That we can use the ScrollViewer.ScrollToHorizontalOffset  to scroll to the current location.

    For example:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Slider Name="MySlider" MaxHeight="100"></Slider>
        <GridView ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled" local:Untils.MyValue="{Binding ElementName=MySlider,Path=Value}" VerticalAlignment="Center"  Name="MyGrid">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Orientation="Vertical"  MaximumRowsOrColumns="1" GroupPadding="0,0,20,0">
                    </ItemsWrapGrid>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock x:Name="grpName"  Text="{Binding }"  Margin="5" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
    </Grid>
    

     The code behind:

    public sealed partial class MainPage : Page
    {
        public ObservableCollection<string> items;
    
        public MainPage()
        {
            this.InitializeComponent();
            items = new ObservableCollection<string>();
            for (int i = 0; i < 1000; i++)
            {
                items.Add(i.ToString());
            }
            MyGrid.ItemsSource = items;
        }
    }
    
    public class Untils
    {
        public static readonly DependencyProperty MyValueProperty = DependencyProperty.RegisterAttached("MyValue", typeof(string), typeof(Untils), new PropertyMetadata("", OnMyValueChanged));
    
        public static string GetMyValue(DependencyObject obj)
        {
            return obj.GetValue(MyValueProperty).ToString();
        }
    
        public static void SetMyValue(DependencyObject obj, string value)
        {
            obj.SetValue(MyValueProperty, value);
        }
    
        private static void OnMyValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var gridView = d as GridView;
            List<ScrollViewer> lists = new List<ScrollViewer>();
            FindChildren<ScrollViewer>(lists, gridView);
            var MyScrollView = lists[0];
            var width = MyScrollView.ScrollableWidth;
            var value = e.NewValue.ToString();
            var newValue = Convert.ToDouble(value);
            double percent = newValue / 100;
            Debug.WriteLine((width * percent).ToString());
            MyScrollView.ScrollToHorizontalOffset(width * percent);
        }
    
        internal static void FindChildren<T>(List<T> results, DependencyObject startNode)
          where T : DependencyObject
        {
            int count = VisualTreeHelper.GetChildrenCount(startNode);
            for (int i = 0; i < count; i++)
            {
                DependencyObject current = VisualTreeHelper.GetChild(startNode, i);
                if ((current.GetType()).Equals(typeof(T)) || (current.GetType().GetTypeInfo().IsSubclassOf(typeof(T))))
                {
                    T asType = (T)current;
                    results.Add(asType);
                }
                FindChildren<T>(results, current);
            }
        }
    }
    

    Best Regards,

    Jayden Gu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, November 11, 2016 6:55 AM
  • Hi Jayden,

    Thank you for reply.

    I got gridview scroll when slider changes but i want vice versa i.e when gridview is scrolling scroll bar have to move.

    please suggest how to do it.

    Thanks


    sarvesh

    Friday, November 11, 2016 7:40 AM
  • Hi Jayden,

    Thank you for reply.

    I got gridview scroll when slider changes but i want vice versa i.e when gridview is scrolling scroll bar have to move.

    please suggest how to do it.

    Thanks


    sarvesh

    Wednesday, November 16, 2016 9:34 AM
  • Hi SARVESH.RVN, 

    We should be able to add the ScrollViewer.ViewChanged event of the ScrollViewer. That in the event we can use the ScrollViewer.HorizontalOffset divide by ScrollViewer.ScrollableWidth to get the percent of the location of the ScrollViewbar is.

    For example:

    private int MyValue;
    
    private void MyScrollView_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        var myScroller = sender as ScrollViewer;
        double i = (myScroller.HorizontalOffset / myScroller.ScrollableWidth);
        MyValue = Convert.ToInt32(i * 100);
        MySlider.Value = MyValue;
    }
    
    private void MyGrid_Loaded(object sender, RoutedEventArgs e)
    {
        List<ScrollViewer> mylists = new List<ScrollViewer>();
        Untils.FindChildren<ScrollViewer>(mylists, MyGrid);
        var MyScrollView = mylists[0];
        MyScrollView.ViewChanged += MyScrollView_ViewChanged;
    }
    

    Best Regards,

    Jayden Gu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Proposed as answer by Jayden Gu Thursday, November 17, 2016 3:12 AM
    • Marked as answer by SARVESH.RVN Monday, November 21, 2016 5:55 AM
    Wednesday, November 16, 2016 12:10 PM
  • Thank you Jayden

    I am also done in same way and looked for different way.


    sarvesh

    Monday, November 21, 2016 5:58 AM