Scroll a GridView inside a SemanticZoom to a certain group from outside the SemanticZoom

Question

I'm trying to add a custom alphabetical selection outside the SemanticZoom in addition to alphabetical selection in the ZoomedOutView, but I can't manage to manipulate the GridView in the ZoomedInView

As of now the ItemSource of the two alphabetical views are the same and are set in the code-behind.

The SemanticZoom works fine, but what I'm trying to achieve is when one of the letters in the top right is clicked, it scrolls to the corresponding group in the ZoomedInView.

Is there any way of achieving this?

(I didn't include any code as the code itself isn't the main issue here, but please let me know if it ought to be included)

Answer 1

Finally I came up with a work around. I am giving the Code but before that download the Gridview sample from msdn link.

GridView Sample

And changes to see the effect is to be done in ScenarioOutput1.xaml and ScenarioOutput1.xaml.cs.

So Lets Start with ScenarioOutput1.xaml Codethat I changed Please copy paste it into the project (GridView Demo from msdn) to see the effect if you have difficulty understanding the code.

ScenarioOutput1.xaml

    <Page
    x:Class="ListViewSimple.ScenarioOutput1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Height="300" VerticalAlignment="Top" Tapped="Grid_Tapped">
        <ScrollViewer x:Name="scroller" HorizontalScrollMode="Enabled" Width="auto" HorizontalScrollBarVisibility="Visible">
            <GridView x:Name="ItemGridView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
            ItemTemplate="{StaticResource StoreFrontTileTemplate}"
            ItemContainerStyle="{StaticResource StoreFrontTileStyle}"
            ItemsPanel="{StaticResource StoreFrontGridItemsPanelTemplate}"
            BorderBrush="LightGray"
            VerticalAlignment="Top"
                      ScrollViewer.HorizontalScrollBarVisibility="Hidden"
            BorderThickness="1" ScrollViewer.VerticalScrollBarVisibility="Auto"
            SelectionMode="None"/>

        </ScrollViewer>
    </Grid>
</Page>

Now the next part the cs file.

ScenarioOutput1.xaml.cs

using System;
using System.Linq;
using System.Collections.Generic;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
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 SDKTemplateCS;
using Expression.Blend.SampleData.SampleDataSource;

namespace ListViewSimple
{
    public sealed partial class ScenarioOutput1 : Page
    {
        // A pointer back to the main page which is used to gain access to the input and output frames and their content.
        MainPage rootPage = null;
        StoreData storeData = null;
        private Item item;
        private Expression.Blend.SampleData.SampleDataSource.ItemCollection _collectionNew = new Expression.Blend.SampleData.SampleDataSource.ItemCollection();
        public ScenarioOutput1()
        {
            InitializeComponent();

            storeData = new StoreData();
            ItemGridView.ItemsSource = storeData.Collection;
        }

        #region Template-Related Code - Do not remove
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Get a pointer to our main page.
            rootPage = e.Parameter as MainPage;

            // We want to be notified with the OutputFrame is loaded so we can get to the content.
            rootPage.InputFrameLoaded += new System.EventHandler(rootPage_InputFrameLoaded);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            rootPage.InputFrameLoaded -= new System.EventHandler(rootPage_InputFrameLoaded);
        }
        #endregion

        #region Use this code if you need access to elements in the input frame - otherwise delete
        void rootPage_InputFrameLoaded(object sender, object e)
        {
            // At this point, we know that the Input Frame has been loaded and we can go ahead
            // and reference elements in the page contained in the Input Frame.

            // Get a pointer to the content within the IntputFrame.
            Page inputFrame = (Page)rootPage.InputFrame.Content;

            // Go find the elements that we need for this scenario
            // ex: flipView1 = inputFrame.FindName("FlipView1") as FlipView;
        }
        #endregion

        Uri _baseUri = new Uri("ms-appx:///");
        private DispatcherTimer _timer;
        private async void Grid_Tapped(object sender, TappedRoutedEventArgs e)
        {
            try
            {
                item = new Item();
                item.Title = "This is a new One First";
                item.SetImage(_baseUri, "SampleData/Images/60SprinklesRainbow.png");
                item.Subtitle = "Ultrices rutrum sapien vehicula semper lorem volutpat sociis sit maecenas praesent taciti magna nunc odio orci vel tellus nam sed accumsan iaculis dis est";
                item.Link = "http://www.blueyonderairlines.com/";
                item.Category = "Ice Cream";
                item.Description = "Consectetuer lacinia vestibulum tristique sit adipiscing laoreet fusce nibh suspendisse natoque placerat pulvinar ultricies condimentum scelerisque nisi ullamcorper nisl parturient vel suspendisse nam venenatis nunc lorem sed dis sagittis pellentesque luctus sollicitudin morbi posuere vestibulum potenti magnis pellentesque vulputate mattis mauris mollis consectetuer pellentesque pretium montes vestibulum condimentum nulla adipiscing sollicitudin scelerisque ullamcorper pellentesque odio orci rhoncus pede sodales suspendisse parturient viverra curabitur proin aliquam integer augue quam condimentum quisque senectus quis urna scelerisque nostra phasellus ullamcorper cras duis suspendisse sociosqu dolor vestibulum condimentum consectetuer vivamus est fames felis suscipit hac";
                item.Content = "aaaA";

                _collectionNew.Add(item);

                item = new Item();
                item.Title = "This is a new One Second";
                item.Subtitle = "Ultrices rutrum sapien vehicula semper lorem volutpat sociis sit maecenas praesent taciti magna nunc odio orci vel tellus nam sed accumsan iaculis dis est";
                item.Link = "http://www.blueyonderairlines.com/";
                item.Category = "Ice Cream";
                item.SetImage(_baseUri, "SampleData/Images/60SprinklesRainbow.png");
                item.Description = "Consectetuer lacinia vestibulum tristique sit adipiscing laoreet fusce nibh suspendisse natoque placerat pulvinar ultricies condimentum scelerisque nisi ullamcorper nisl parturient vel suspendisse nam venenatis nunc lorem sed dis sagittis pellentesque luctus sollicitudin morbi posuere vestibulum potenti magnis pellentesque vulputate mattis mauris mollis consectetuer pellentesque pretium montes vestibulum condimentum nulla adipiscing sollicitudin scelerisque ullamcorper pellentesque odio orci rhoncus pede sodales suspendisse parturient viverra curabitur proin aliquam integer augue quam condimentum quisque senectus quis urna scelerisque nostra phasellus ullamcorper cras duis suspendisse sociosqu dolor vestibulum condimentum consectetuer vivamus est fames felis suscipit hac";
                item.Content = "aaaa";

                _collectionNew.Add(item);
                scroller.ScrollToHorizontalOffset(2000);
                _timer = new DispatcherTimer();
                _timer.Interval = new TimeSpan(3000);
                _timer.Tick += _timer_Tick;
                _timer.Start();

            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        void _timer_Tick(object sender, object e)
        {
            ItemGridView.ItemsSource = null;
            ItemGridView.ItemsSource = _collectionNew;
                 _timer.Stop();
        }
    }


}

Please implement it in the demo and see the effect. there might be other work arounds but wanted to clear the stuff as easy and soon as possible. Let me know if you have any trouble understanding :)