Language: HTML | XAML

Image overlay (album) template (XAML)

Use this item template with a GridView to display a collection using an image with a text overlay.

Image grid with overlay

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


<DataTemplate x:Key="ImageOverlayAlbumDataTemplate">
    <Grid Background="#FF939598" Height="130" Width="130">
        <Image Source="/SampleImage.png"  Stretch="UniformToFill"/>                        
        <StackPanel Orientation="Vertical" Background="#CC000000" Height="50" VerticalAlignment="Bottom">
            <TextBlock Text="Ay Lorem Ipsum" Margin="10,3,0,0" Width="120" Height="20" 
                       TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>
            <TextBlock Text="Dolor sit amet" Margin="10,0,0,10" Width="120" Height="20" 
                       TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>
        </StackPanel>
    </Grid>                           
</DataTemplate>



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


 

 

Show:
© 2015 Microsoft