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

i have gridview in semanticzoom.zoomedoutview , listview in semanticzoom.zoomedinview. require when clicking item in zoomed out view (gridview) zoomed in view not show, instead activate same view when clicking item in zoomed in view. have solved following instructions here uses custom grid implementing isemanticzoominformation.

now need synchronise gridview , listview items being displayed same in different format. best way achieve this?

so far have tried scroll position of view haven't worked out how can first item visible on display can make other view display same item position.

here's xaml 2 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)     {     } } 

}