Image overlay (gallery folder) template (Windows Store apps using C#/VB/C++ and XAML)

Use this item template with a GridView to display a collection of image gallery folders with a text overlay.

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


<DataTemplate x:Key="ImageOverlayGalleryFolderDataTemplate">
    <Grid Background="#FF939598" Height="130" Width="190">
        <Image Source="/SampleImage.png"  Stretch="UniformToFill"/>                        
        <StackPanel Orientation="Vertical" Background="#CC000000" Height="30" VerticalAlignment="Bottom">
            <TextBlock Text="Ay lorem ipsum dolor sit" 
                       Margin="10,3,0,0" Width="186" Height="20" 
                       TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>                        
        </StackPanel>
    </Grid>                           
</DataTemplate>

XAML


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

Build date: 11/29/2012