Image and text list (inbox) 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 image and text items in a style suitable for an email inbox.

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

<DataTemplate x:Key="ImageTextListInboxTemplate">          
    <StackPanel Orientation="Horizontal" Width="470" Height="85">
        <Border Height="40" Width="40" Margin="10,10,0,10" VerticalAlignment="Top">
            <Image Source="/SampleImage.png" Stretch="UniformToFill"/>
        </Border>
        <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0,10,0,0">
            <TextBlock Text="A Lorem Ipsum" FontSize="20" FontWeight="Semilight" 
                       Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis" 
                       HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <TextBlock Text="Dolor sit amet lorem ipsumy" 
                       Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap" 
                       HorizontalAlignment="Left"/>
            <TextBlock Text="Sed varius rhoncus metus, et condimentum" 
                       Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap" 
                       HorizontalAlignment="Left"/>
        </StackPanel>
        <TextBlock Text="00:00 AM" FontSize="9" Margin="20,0,0,0" VerticalAlignment="Center"/>
    </StackPanel>            
</DataTemplate>

<ListView x:Name="ImageTextListInboxGrid" Width="500" 
          VerticalAlignment="Stretch" HorizontalAlignment="Left" 
          CanReorderItems="True" CanDragItems="True" 
          ItemTemplate="{StaticResource ImageTextListInboxTemplate}"/>