Working With GridView Items Panel Template

imageGridView is one of the great added controls in windows 8 it will make your live much easier when developing content view with selecting, swaping deleting and adding items.

but sometimes you will need to override the default template of the Items how they look.

If you took alook on the picture you will find that I was trying to display a list of countries in GirdView , The Default behavior will display the content in vertical order while I needed to do this in Horizontal WrapGridView.

To Do this you need to override the default Item Panel in the GridView Item with a new container template, Please check the below code for this

GridView Template

  1. <GridView x:Name="pnlCountries" IsSynchronizedWithCurrentItem="False" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" Height="{Binding ActualHeight, ElementName=userControl}" Width="{Binding ActualWidth, ElementName=userControl}">
  2.             <GridView.ItemContainerTransitions>
  3.                 <TransitionCollection>
  4.                     <EntranceThemeTransition FromHorizontalOffset="100" IsStaggeringEnabled="True"/>
  5.                 </TransitionCollection>
  6.             </GridView.ItemContainerTransitions>
  7.         <GridView.ItemsPanel>
  8.                                             <ItemsPanelTemplate>
  9.                         <WrapGrid Orientation="Horizontal"/>
  10.                     </ItemsPanelTemplate>
  11.         </GridView.ItemsPanel>
  12.         </GridView>

BY Changing the GridView.ItemPanel content, You will be able to override default behavior, in the above sample I used a wrapGrid to display the content inside my Grid.