WinRT hardcoded ListViewItem vs. DataTemplate, why do they not look/work the same? - xaml

Question

I'm new to WinRT so apologies if this is a silly question. I've created the following ListView:
<ListView x:Name="MyListView1"
Grid.Row="1"
Margin="120,300,0,0"
Width="500"
HorizontalAlignment="Left">
<ListViewItem Background="DodgerBlue">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<TextBlock Text="hardcoded value 1" Grid.Column="0"></TextBlock>
<TextBlock Text="hardcoded value 2" Grid.Column="1"></TextBlock>
</Grid>
</ListViewItem>
</ListView>
This looks the way I want it to look, and if you click an item it will select the whole row. However, if I move this into a DataTemplate it doesn't look the same, and you can no longer click the whole row. (If I add an ItemContainerStyle with the target type ListViewItem and set the background to yellow, it will fill it up so it's the same size as the hardcoded ListItem, but you can only click the yellow outline to select it.) This is the code:
<ListView x:Name="MyListView2"
ItemTemplate="{StaticResource MyTemplate}"
ItemsSource="{Binding MyData}"
Grid.Row="1"
Margin="120,0,0,0"
Width="500"
HorizontalAlignment="Left">
</ListView>
And in StandardStyles.xaml:
<DataTemplate x:Key="MyTemplate">
<ListViewItem Background="DodgerBlue">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding MyDataOne}" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding MyDataTwo}" Grid.Column="1"></TextBlock>
</Grid>
</ListViewItem>
</DataTemplate>
I don't understand why they don't look/work the same - shouldn't it get populated with the exact same code when you bind it? What do I need to do to make it work?

Answer 1

The problem there is the way you created the datatemplate. Remember that ListViewItem is a wrapper added to any object that needs to be displayed in the list, so when you create a datatemplate that contains a listviewitem you are basically wrapping the object twice. All you need to do is remove the listviewitem element from the datatemplate
<DataTemplate x:Key="MyTemplate">
<Grid Background="DodgerBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding MyDataOne}" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding MyDataTwo}" Grid.Column="1"></TextBlock>
</Grid></DataTemplate>