GridView renders unexpectedly when ItemsPanel is set to Grid

Question

I have the following GridView on a Page:

<GridView Background="Black">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.Items>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="Hello"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="there"/>
    </GridView.Items>
</GridView>

This renders both "Hello" and "there" on top of each other in the upper left quadrant. I would have expected to find the word "Hello" in the upper left quadrant and "there" in the lower right quadrant.

What am I missing?

Answer 1

The framework will automatically create a GridViewItem to contain each item in the GridView, unless you explicitly create one. Setting Grid.Row or Grid.Column on the contained item will therefore be ineffective. Try this instead:

<GridView Background="Black">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.Items>
        <GridViewItem Grid.Row="0" Grid.Column="0">
            <TextBlock Text="Hello"/>
        </GridViewItem>
        <GridViewItem Grid.Row="1" Grid.Column="1">
            <TextBlock Text="there"/>
        </GridViewItem>
    </GridView.Items>
</GridView>