locked
ChangeView method of ScrollViewer not working with WrapGrid

    Question

  • Hi,

    I'm playing around in Windows 10 Visual Studio CTP 6. I have a simple Gridview with a WrapGrid to change the orientation. ScrollViewer.ChangeView does not work properly because the scrollableWidth property appears to be wrong. Here is some code to scroll the GridView horizontally when you press escape. Why is the ScrollableWidth incorrect at run time?

    thnx

    Brian

    <Page
        x:Class="FoodieMoiety.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:FoodieMoiety"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
    
    
        <Grid x:Name="grid1" Width="1920" Height="1080">
    
            <GridView x:Name="gridView1" Height="220" Width="620" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible" SelectionChanged="gridView1_SelectionChanged">
    
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Vertical"></WrapGrid>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
    
    
                <GridViewItem Width="200" Height="200">
                    <Border BorderBrush="White" BorderThickness="0">
                        <Rectangle Width="200" Height="200" Fill="Red"></Rectangle>
                    </Border>
                </GridViewItem>
                <GridViewItem Width="200" Height="200">
                    <Border BorderBrush="White" BorderThickness="0">
                        <Rectangle Width="200" Height="200" Fill="Purple"  ></Rectangle>
                    </Border>
                </GridViewItem>
                <GridViewItem Width="200" Height="200">
                    <Border BorderBrush="White" BorderThickness="0">
                        <Rectangle Width="200" Height="200" Fill="Green"  ></Rectangle>
                    </Border>
                </GridViewItem>
                <GridViewItem Width="200" Height="200">
                    <Border BorderBrush="White" BorderThickness="0">
                        <Rectangle Width="200" Height="200" Fill="Yellow"  ></Rectangle>
                    </Border>
                </GridViewItem>
    
    
    
            </GridView>
    
    
        </Grid>
    
    </Page>
    

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.System;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    using Windows.UI.Xaml.Shapes;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
    
    namespace FoodieMoiety
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            private Thickness borderThicknessSelected = new Thickness(1);
            private Thickness borderThicknessUnselected = new Thickness(0);
            private double offSet = 0;
            private ScrollViewer scrollViewer;
            public MainPage()
            {
                this.InitializeComponent();
                this.Loaded += MainPage_Loaded;
                Window.Current.CoreWindow.KeyDown += CoreWindow_KeyDown;
    
            }
    
            private void CoreWindow_KeyDown(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.KeyEventArgs args)
            {
                if (args.VirtualKey == VirtualKey.Escape)
                {
                    var temp = scrollViewer.ScrollableWidth; // THIS VALUE IS WRONG AT RUN TIME
                    var temp2 = scrollViewer.ExtentWidth;
                    scrollViewer.ChangeView(200, null, null);
                }
            }
    
            static T FindChildOfType<T>(DependencyObject root) where T : class
            {
                var queue = new Queue<DependencyObject>();
                queue.Enqueue(root);
                while (queue.Count > 0)
                {
                    DependencyObject current = queue.Dequeue();
                    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(current); i++)
                    {
                        var child = VisualTreeHelper.GetChild(current, i);
                        var typedChild = child as T;
                        if (typedChild != null)
                        {
                            return typedChild;
                        }
                        queue.Enqueue(child);
                    }
                }
                return null;
            }
    
            private void MainPage_Loaded(object sender, RoutedEventArgs e)
            {
                scrollViewer = FindChildOfType<ScrollViewer>(gridView1);
            }
    
            private void gridView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                
                foreach (GridViewItem item1 in gridView1.Items)
                {
                    Border border1 = item1.Content as Border;
                    border1.BorderThickness = borderThicknessUnselected;
                }
    
                GridViewItem selected = gridView1.SelectedItem as GridViewItem;
                Border selectedBorder = selected.Content as Border;
                selectedBorder.BorderThickness = borderThicknessSelected;
                
            }
    
    
        }
    }
    

    Wednesday, April 8, 2015 3:51 PM

Answers

  • I changed WrapGrid to VariableSizedWrapGrid and it started working. 
    • Marked as answer by duffybr Wednesday, April 8, 2015 5:29 PM
    Wednesday, April 8, 2015 5:29 PM