How to synchronise ListView and GridView scroll positions when using a custom Grid for Windows Store App?

Question

I have a GridView in SemanticZoom.ZoomedOutView and a ListView in SemanticZoom.ZoomedInView. I require when clicking an item in the zoomed out view (GridView) that the zoomed in view will not show, instead it will activate the same view as when clicking an item in the zoomed in view. I have solved this by following the instructions here which uses a custom Grid implementing ISemanticZoomInformation.

Now I also need to synchronise the GridView and ListView so the items being displayed is the same just in a different format. What is the best way to achieve this?

So far I have tried to get the scroll position of the view but I haven't worked out how I can then get the first item that is visible on the display so I can make the other view display the same item position.

Here's the xaml for the two semantic zoom views:

    <SemanticZoom x:Name="semanticZoomControl" Grid.Row="2" Grid.ColumnSpan="100" ViewChangeStarted="OnViewChangeStarted" ViewChangeCompleted="OnViewChangedCompleted">
        <SemanticZoom.ZoomedInView>
            <ListView
        x:Name="itemsFullListView"
        TabIndex="1"
        Grid.Row="2"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
        ItemTemplate="{StaticResource ItemsListTemplate}"
        SelectionMode="Extended"
        IsSwipeEnabled="True"
        IsItemClickEnabled="True"
        ItemClick="OnSelectedItem"
                SelectionChanged="itemsFullListView_SelectionChanged">
                <ListView.Header>
                    <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200"/>

                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Row="1" Grid.Column="0" Text="Description" FontSize="20" FontWeight="Bold" Margin="5 0"/>

                    </Grid>

                </ListView.Header>
            </ListView>
        </SemanticZoom.ZoomedInView>


        <SemanticZoom.ZoomedOutView>
            <local:SemanticGrid>
            <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        TabIndex="1"
        Grid.Row="1"
        Grid.RowSpan="100"
        Grid.ColumnSpan="100"
        Padding="30,0,30,0"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
        SelectionMode="Extended"
        IsSwipeEnabled="True"
        IsItemClickEnabled="True"
        ItemClick="OnSelectedItem"
                SelectionChanged="itemGridView_SelectionChanged" 
                ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                />
            </local:SemanticGrid>
        </SemanticZoom.ZoomedOutView>
    </SemanticZoom>

Here's SemanticGrid:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Windows.UI.Xaml.Controls;

namespace App2
{
    public class SemanticGrid: Grid, ISemanticZoomInformation
    {
        public void CompleteViewChange()
        {

        }

        public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)
        {
        }
    public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
    {
    }

    public void InitializeViewChange()
    {
    }

    public bool IsActiveView
    {
        get;
        set;
    }

    public bool IsZoomedInView
    {
        get;
        set;
    }

    public void MakeVisible(SemanticZoomLocation item)
    {

    }

    public SemanticZoom SemanticZoomOwner
    {
        get;
        set;
    }

    public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)
    {
    }

    public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
    {
    }
}

}