Question

With the VisualStateManager code stripped out for simplicity, the XAML for a Basic Page in a Windows 8 app looks like this:

<!-- Back button and page title -->
<Grid> //row 0 by default
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Account Basic Info" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>

// VisualStateManager extravaganza elided

So the way I read it is that I’ve got a grid within a grid, and the inner grid is in row 0 of the first grid; the inner grid adds two columns to that first row that it’s in and then places a button (in column 0 by default) and a textblock in column 1.

I want to add more controls to the page, but all my attempts/experiments to do so have failed so far (adding rows to the outer grid, then adding rows to the inner grid). To add yet another inner grid (inside the first inner grid) seems a little ridiculous. What is the standard way to pull this off (or “a” way, anyway)?

Answer 1

As you point out, you could add another grid (or StackPanel) after the row zero grid:

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton2" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
    <TextBlock x:Name="pageTitle2" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>

Another way to do it is to define more rows in the first grid:

<Grid.RowDefinitions>
    <!-- notice there are 4 rows now -->
    <RowDefinition Height="140"/>
    <RowDefinition Height="140"/>
    <RowDefinition Height="140"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!-- Back button and page title -->
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>

<!-- My controls are placed in explict rows using Grid.Row -->
<Button x:Name="backButton2" Grid.Row="1" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle2" Grid.Row="2" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
<Button x:Name="backButton3" Grid.Row="3" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>