Icon and text (applications) 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.

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

<DataTemplate x:Key="IconTextDataTemplate">          
    <StackPanel Orientation="Horizontal" Width="220" Height="60">
        <Border Background="#66727272" Width="40" Height="40" Margin="10">
            <Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>
        </Border>
        <StackPanel Orientation="Vertical" VerticalAlignment="Center">
            <TextBlock Text="Ay Lorem Ipsum" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
            <TextBlock Text="Dolor sit amet" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
        </StackPanel>
    </StackPanel>            
</DataTemplate>

<ListView x:Name="IconTextGrid" Height="500" CanReorderItems="True" CanDragItems="True" 
          ItemTemplate="{StaticResource IconTextDataTemplate}" >
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid MaximumRowsOrColumns="8"/>                      
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

Note  This ListView uses a WrapGrid as its ItemsPanel to achieve a grid layout.