Image (gallery) template (XAML)

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Use this item template with a GridView to display a collection of images in a grid, with selected items added to the basket below the grid.

This example shows the image gallery DataTemplate and a GridView that uses the template.

<DataTemplate x:Key="ImageGalleryDataTemplate">
    <Border Background="#FF939598">
        <Image Source="/SampleImage.png" Height="130" Width="190" Stretch="UniformToFill"/>
    </Border>                           
</DataTemplate>

<GridView x:Name="ImageGalleryGrid" CanReorderItems="True" CanDragItems="True" 
          ItemTemplate="{StaticResource ImageGalleryDataTemplate}" >
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid MaximumRowsOrColumns="3"/>                      
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

This example shows the image gallery basket DataTemplate and a GridView that uses the template.

<DataTemplate x:Key="ImageGalleryBasketDataTemplate">
    <Border Background="#FF939598">
        <Image Source="/SampleImage.png" Height="40" Width="58" Stretch="UniformToFill"/>
    </Border>                           
</DataTemplate>

<GridView x:Name="ImageGalleryGridBasket" CanReorderItems="True" CanDragItems="True" 
          ItemTemplate="{StaticResource ImageGalleryBasketDataTemplate}" >
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid MaximumRowsOrColumns="1" 
                      VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Center" />                      
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>                
</GridView>