Adding a table title to a Listview using a DataTemplate in WinRT

Question

In my Xaml, I bind some data from wcf. I do not know how to add table headers to columns. Also, the data in the columns is poorly aligned, I think about it because of ColumnDefinition Width = "auto".

I want the columns to be aligned, as in the example

Example:

My xaml

<ListView Margin="120,30,0,120" ItemsSource="{Binding MainViewModel}" Grid.Row="1"> <ListView.ItemTemplate> <DataTemplate> <Grid Width="500" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="auto" /> </Grid.ColumnDefinitions> <Grid.Resources> <Style TargetType="TextBlock"> <Setter Property="Margin" Value="5,0" /> </Style> </Grid.Resources> <TextBlock Grid.Column="0" Text="{Binding Data, Mode=TwoWay}"/> <TextBlock Grid.Column="1" Text="{Binding Year, Mode=TwoWay}" /> <TextBlock Grid.Column="2" Text="{Binding Month, Mode=TwoWay}" /> <TextBlock Grid.Column="3" Text="{Binding Weekday, Mode=TwoWay}" /> <TextBlock Grid.Column="4" Text="{Binding Day, Mode=TwoWay}" /> <TextBlock Grid.Column="5" Text="{Binding Data2, Mode=TwoWay}"></TextBlock> <TextBlock Grid.Column="6" Text="{Binding Data3, Mode=TwoWay}"></TextBlock> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView> 

Since my trial version and error failed, any help is appreciated! Thanks

Answer 1

To completely style your ListView , you have to modify ListView.ItemContainerStyle , ListView.ItemTemplate and ListView.Template . Here is an example:

  <ListView Margin="120,30,0,120" ItemsSource="{Binding MainViewModel}" Grid.Row="1"> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListViewItem"> <Grid> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListView.ItemContainerStyle> <ListView.ItemTemplate> <DataTemplate> <Grid Width="500" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Grid.Resources> <Style TargetType="TextBlock"> <Setter Property="Margin" Value="5,0" /> <Setter Property="Foreground" Value="White" /> </Style> <Style TargetType="Border"> <Setter Property="BorderThickness" Value="1" /> <Setter Property="BorderBrush" Value="LightGray" /> <Setter Property="Background" Value="DarkGray" /> </Style> </Grid.Resources> <Border Grid.Column="0" > <TextBlock Text="{Binding Data, Mode=TwoWay}" /> </Border> <Border Grid.Column="1" > <TextBlock Text="{Binding Year, Mode=TwoWay}" /> </Border> <Border Grid.Column="2" > <TextBlock Text="{Binding Month, Mode=TwoWay}" /> </Border> <Border Grid.Column="3" > <TextBlock Text="{Binding Weekday, Mode=TwoWay}" /> </Border> <Border Grid.Column="4" > <TextBlock Text="{Binding Day, Mode=TwoWay}" /> </Border> <Border Grid.Column="5" > <TextBlock Text="{Binding Data2, Mode=TwoWay}" /> </Border> <Border Grid.Column="6" > <TextBlock Text="{Binding Data3, Mode=TwoWay}" /> </Border> </Grid> </DataTemplate> </ListView.ItemTemplate> <ListView.Template> <ControlTemplate> <Grid HorizontalAlignment="Left"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid Grid.Row="0" Width="500" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Grid.Resources> <Style TargetType="TextBlock"> <Setter Property="Margin" Value="5,0" /> <Setter Property="Foreground" Value="White" /> <Setter Property="FontWeight" Value="Bold" /> </Style> <Style TargetType="Border"> <Setter Property="BorderThickness" Value="1" /> <Setter Property="BorderBrush" Value="LightGray" /> <Setter Property="Background" Value="MidnightBlue" /> </Style> </Grid.Resources> <Border Grid.Column="0"> <TextBlock >Data</TextBlock> </Border> <Border Grid.Column="1"> <TextBlock >Year</TextBlock> </Border> <Border Grid.Column="2"> <TextBlock >Month</TextBlock> </Border> <Border Grid.Column="3"> <TextBlock >Weekday</TextBlock> </Border> <Border Grid.Column="4"> <TextBlock >Day</TextBlock> </Border> <Border Grid.Column="5"> <TextBlock >Data2</TextBlock> </Border> <Border Grid.Column="6"> <TextBlock >Data3</TextBlock> </Border> </Grid> <ItemsPresenter Grid.Row="1"></ItemsPresenter> </Grid> </ControlTemplate> </ListView.Template> </ListView> 

Screenshot: