Table with header

Question

I want to create a simple table in Windows RT with a header

I am thinking about something like

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="10" />
      <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>
   <TextBlock Grid.Row="0" Grid.Column="0" Text="Measurement" />
   <TextBlock Grid.Row="1" Grid.Column="2" Text="Value" />
</Grid>

But I do not want to create a RowDefinition for each object, and loop through each object to insert the properties

Can I do that in any way, or should I create it using a Grid?

score 1 · Accepted Answer · edited May 23 '17 at 12:08

To avoid having to loop through rows of your data you should use ItemsControl (or ListView if you need the notion of selected row). Unfortunately in WinRT ColumnDefinition doesn't include SharedSizeGroup property which would allow you to use a Grid in ItemTemplate and share the column sizes between items as seen here.

As the alternative you could use a horizontal StackPanel with fixed control widths:

<StackPanel Orientation="Horizontal">
    <TextBlock Text="Measurement" Width="100" />
    <TextBlock Text="Value" Width="200" />
</StackPanel>
<ItemsControl ItemsSource="{Binding Measurements}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Measurement}" Width="100" />
                <TextBlock Text="{Binding Value}" Width="200" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

In the bindings above I presumed you have your data structured as follows:

public class MeasurementItem
{
    public string Measurement { get; set; }
    public int Value { get; set; }
}

public class ViewModel
{
    public List<MeasurementItem> Measurements { get; set; }
}

The downside is less flexibility because of fixed widths which need to be the same in the header and in the row template. Still, I think it should suffice - you really don't want to start creating UIElements in code.

So I need to create a Grid and loop through the data? Can't I do it with ListView e.g? — The87Boy, Jan 06 '13 at 15:52
@The87Boy I suppose I was to brief in my answer before. I now elaborated in more detail how you could implement your table layout. — Damir Arh, Jan 06 '13 at 16:56
Yes, but I still need to define the width, but I should not do that in the Grid, I think — The87Boy, Jan 06 '13 at 22:58
That's true, you don't need to set the width in grid, although you can. But without `SharedSizeGroup` support which is missing in WinRT you can't make multiple grids have the same column widths as you'd need to in `ItemTemplate` [scenario](http://stackoverflow.com/q/6416139/197913). You could check out [this implementation](http://die-rooter.de/ITworks/archives/27-SharedSize-Grid-with-Silverlight.html) of SharedSize for Silverlight. — Damir Arh, Jan 07 '13 at 05:51

score 0 · Answer 2 · answered Jan 05 '13 at 23:30

0

Do you want to display data inside the grid? Grids are generally used to arrange controls. You might want to use DataGrid if you want to display data inside it along with a header.

For samples please take a look at http://wpftutorial.net/DataGrid.html

answered Jan 05 '13 at 23:30

Chandramouleswaran Ravichandra

697
7
13

Win RT does not have native DataGrid http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465351.aspx – chue x Jan 05 '13 at 23:58
There are two commercial datagrid controls available: [FlexGrid for WinRT XAML](http://www.componentone.com/SuperProducts/FlexGridXAML/) by ComponentOne and [Windows 8 XAML Grid](http://www.devexpress.com/Products/NET/Controls/WinRT/Grid/) by DevExpress. – Damir Arh Jan 06 '13 at 08:31

Table with header

2 Answers2