Image overlay (landing) 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 create a landing page that displays a collection using an image with a text overlay.

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

<DataTemplate x:Key="ImageOverlayLandingDataTemplate">
    <Grid Background="#FF939598" Height="250" Width="250">
        <Image Source="/SampleImage.png"  Stretch="UniformToFill"/>                        
        <StackPanel Orientation="Vertical" Background="#CC000000" 
                    Height="90" VerticalAlignment="Bottom">
            <TextBlock Text="Ay lorem ipsum dolor sit amet, ectetur adipiscing elit. In vehic ula aliquam nisi non condimentum." 
                       Margin="10,3,0,0" Width="242" Height="62" 
                       TextTrimming="WordEllipsis" TextWrapping="Wrap" HorizontalAlignment="Left"/>                        
            <TextBlock Text="Phasellus faucibus" 
                       Margin="10,2,0,0" Width="186" Height="14" 
                       TextTrimming="WordEllipsis" HorizontalAlignment="Left" FontSize="9" Opacity="0.49"/>                        
        </StackPanel>
    </Grid>                           
</DataTemplate>    

<GridView x:Name="ImageOverlayLandingGrid" 
          CanReorderItems="True" CanDragItems="True" 
          ItemTemplate="{StaticResource ImageOverlayLandingDataTemplate}" >
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid MaximumRowsOrColumns="2"/>                      
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>