Share via

Image and text list (collection narrow) 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 ListView to display a collection with image and text data when your app is narrow.

This example shows the DataTemplate and a ListView that uses the template.

<DataTemplate x:Key="ImageTextListCollectionNarrowTemplate">          
    <StackPanel Orientation="Horizontal" Width="292" Height="80">
        <Border Height="60" Width="60" Margin="10,10,0,10">
            <Image Source="/SampleImage.png" Stretch="UniformToFill"/>
        </Border>
        <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0,10,0,0">
            <TextBlock Text="Ayaecenas aliquam tellus nec loren ipsum" 
                       Margin="10,0,0,0" Width="180" Height="42" 
                       TextTrimming="WordEllipsis" TextWrapping="Wrap" HorizontalAlignment="Left"/>
            <TextBlock Text="Phasellus faucibus" 
                       Margin="10,2,0,0" Width="180" Height="14" 
                       TextTrimming="WordEllipsis" HorizontalAlignment="Left" 
                       FontSize="9" Opacity="0.49"/>                        
        </StackPanel>
    </StackPanel>             
</DataTemplate>

<ListView x:Name="ImageTextCollectionNarrowGrid" Width="292" 
          VerticalAlignment="Stretch" HorizontalAlignment="Left" 
          CanReorderItems="True" CanDragItems="True" 
          ItemTemplate="{StaticResource ImageTextListCollectionNarrowTemplate}"/>