Windows 8 Metro App – How to get a data grid like UI for a collection of Items?

 In developing windows 8 metro app, I didn’t find a data grid control that can be used to present a collection of items (e.g. Orders). With the sample code here, I am able to realize the following data grid like UI:

Sampel XAML code

<Page

    x:Class="Microsft.IT.Marketing.IOExplorer.IODetailForecast"

    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Microsft.IT.Marketing.IOExplorer"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

<Page.Resources>  

<SolidColorBrush x:Key="BlockBackgroundBrush" Color="#FF6BBD46"/>

<SolidColorBrush x:Key="StackPanelBackgroundBrush" Color="#FFDDDDDD"/>

        <Style x:Key="TextBlockHeader" TargetType="TextBlock">

            <Setter Property="Height" Value="15"/>

            <Setter Property="Margin" Value="5,0,2,0"/>

            <Setter Property="Foreground" Value="White"/>

        </Style>

        <Style x:Key="BorderHeader" TargetType="Border">

            <Setter Property="Background" Value="{StaticResource BlockBackgroundBrush}"/>

            <Setter Property="BorderThickness" Value="1"/>

        </Style>

        <Style x:Key="TextBlockCell" TargetType="TextBlock">

            <Setter Property="Height" Value="15"/>

            <Setter Property="Margin" Value="5,0,2,0"/>

            <Setter Property="Foreground" Value="Black"/>

            <Setter Property="FontSize" Value="10"/>

        </Style>

        <Style x:Key="BorderCell" TargetType="Border">

            <Setter Property="Background" Value="White"/>

            <Setter Property="BorderBrush" Value="{StaticResource BlockBackgroundBrush}"/>

            <Setter Property="BorderThickness" Value="1"/>

        </Style>

        <DataTemplate x:Key="DefaultItemDetailTemplate">

            <Grid HorizontalAlignment="Left">

                <Grid.RowDefinitions>

                    <RowDefinition Height="20"/>

                </Grid.RowDefinitions>

                <Border Background="{StaticResource BlockBackgroundBrush}"/>

                <StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="="{StaticResource StackPanelBackgroundBrush}" Width="250" HorizontalAlignment="Left">

                    <Border Style="{StaticResource BorderCell}">

                        <TextBlock Text="{Binding ItemNumber}" Style="{StaticResource TextBlockCell}" Width="50"/>

                    </Border>

                    <Border Style="{StaticResource BorderCell}">

                        <TextBlock Text="{Binding Description}" Style="{StaticResource TextBlockCell}" Width="120"/>

                    </Border>

                    <Border Style="{StaticResource BorderCell}">

                        <TextBlock Text="{Binding Date}" Style="{StaticResource TextBlockCell}" Width="80"/>

                    </Border>

                </StackPanel>

            </Grid>

        </DataTemplate>

</Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="22"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Orientation="Horizontal" Background="{StaticResource StackPanelBackgroundBrush}"/>" Width="250" HorizontalAlignment="Left">

            <Border Style="{StaticResource BorderHeader}">

                <TextBlock Text="Item #" Style="{StaticResource TextBlockHeader}" Width="50"/>

            </Border>

            <Border Style="{StaticResource BorderHeader}">

                <TextBlock Text="Description" Style="{StaticResource TextBlockHeader}" Width="120"/>

            </Border>

            <Border Style="{StaticResource BorderHeader}">

                <TextBlock Text="Date" Style="{StaticResource TextBlockHeader}" Width="80"/>

            </Border>

        </StackPanel>

        <ItemsControl Grid.Row="1"

                ItemsSource="{Binding Items}"

                ItemTemplate="{StaticResource DefaultItemDetailTemplate}"

            />

    </Grid>

</Page>