how to display data in rows and columns XAML windows 8 - xaml

Question

In metro style windows 8 application, how can i display the data using xaml similar to this (https://dl.dropbox.com/u/59251888/img.png)image. is it possible using ListBox,ListView,GrdView.. ?

Answer 1

Yes, but you need to style it up so that it looks like a datagrid. (Assuming you are developing in XAML based on the tags you've assigned to this question). The trick is to make a data template that uses a Grid with columns with proper widths, alignments etc.
I've done something similar - using a ListView. This could be modified to make the backgrounds appear only for cells as opposed to rows - which I have done. Hope this helps:
XAML:
<ListView
VerticalAlignment="Top"
Margin="0,5"
ItemsSource="{Binding HighestExpensesAlternatingList}"
ItemTemplate="{StaticResource HighestExpensesTemplate}"
BorderBrush="#19FFFFFF" BorderThickness="1,0,0,0"
SelectionMode="None" IsItemClickEnabled="False"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ItemContainerStyle="{StaticResource SimpleListViewItemStyle}"
IsHitTestVisible="False"/>
<DataTemplate x:Key="HighestExpensesTemplate">
<Grid Width="500" VerticalAlignment="Center" Margin="5,0"
Background="{Binding AlternatingIndexBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="5" TextWrapping="NoWrap"
Style="{StaticResource BasicTextStyle}"
VerticalAlignment="Center"
Text="{Binding Item.DateString}" />
<TextBlock Grid.Column="1" Margin="5" TextWrapping="NoWrap"
Style="{StaticResource BasicTextStyle}"
VerticalAlignment="Center"
Text="{Binding Item.Description}" />
<TextBlock Grid.Column="2" Margin="5" TextWrapping="NoWrap"
Style="{StaticResource BasicTextStyle}"
VerticalAlignment="Center"
Text="{Binding Item.AmountStringCurrencyFormat}"
HorizontalAlignment="Right"/>
</Grid>
</DataTemplate>
<Style x:Key="SimpleListViewItemStyle" TargetType="ListViewItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="False"/>
<Setter Property="IsDoubleTapEnabled" Value="False"/>
<Setter Property="IsRightTapEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Margin="{TemplateBinding Margin}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation TargetName="Container"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Container">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>