如何在基本頁面的默認xaml下添加控件？

Question

隨着剝離出來爲簡便起見，VisualStateManager代碼，在Windows 8應用的XAML的基本頁面看起來是這樣的：

<!-- 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盛會省略掉

所以我讀它的方式是我在網格中有一個網格，而內部網格在第一個網格的第0行;內部網格向它所在的第一行添加兩列，然後在第一列放置一個按鈕（默認爲0列），並在第一列放置一個文本塊。

我想向頁面添加更多控件，但是所有嘗試/迄今爲止做的實驗失敗了（將行添加到外部網格，然後將行添加到內部網格）。添加另一個內部網格（在第一個內部網格內）似乎有點荒謬。什麼是標準的方法來解決這個問題（或者說「反正」）？

Answer 1

正如你指出，你可以在一行之後添加另一個網格（或StackPanel中）零格：

<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> 

另一種方式來做到這一點是在第一網格定義更多行：

<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}"/>