Image and text (collection) 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 with an image and text.

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

<DataTemplate x:Key="ImageTextCollectionTemplate">          
    <StackPanel Orientation="Horizontal" Width="500" Height="130">
        <Border Height="110" Width="110" Margin="10,10,0,10">
            <Image Source="/SampleImage.png" Stretch="UniformToFill"/>
        </Border>
       <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0,10,0,0">
            <TextBlock Text="Aellus nec ipsum tempor id laoreet viverra" 
                       Margin="10,0,0,0" Width="350" Height="20" TextTrimming="WordEllipsis" />
            <TextBlock Text="Phasellus faucibus" 
                       Margin="10,2,0,0" Width="350" Height="14" TextTrimming="WordEllipsis" 
                       HorizontalAlignment="Left" FontSize="9" Opacity="0.49"/>                        
            <TextBlock Text="A Proin leo nulla, scelerisque non congue nec, facilisis a tellus. Sed varius rhoncus metus, et condimentum ipsum luctus ullamcorper." 
                       Margin="10,2,0,0" Width="350" TextTrimming="WordEllipsis" TextWrapping="Wrap"/>
        </StackPanel>
    </StackPanel>            
</DataTemplate>

<GridView x:Name="ImageTextCollectionGrid" 
          CanReorderItems="True" CanDragItems="True" 
          ItemTemplate="{StaticResource ImageTextCollectionTemplate}" >
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid MaximumRowsOrColumns="4"/>                      
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>