在Windows 8中添加頂部導航欄 - 教程問題

Question

我正在試用WIndows 8上的tutorial。我需要添加Navigation Bar。步驟如下：

以下是本教程。

1. 在解決方案資源管理器中，雙擊MainPage.xaml將其打開。
2. 在文檔大綱中，選擇「pageRoot」元素。
3. 在「屬性」面板中，單擊「屬性」按鈕（）以顯示「屬性」視圖。
4. 在「屬性」面板的「常用」下，找到TopAppBar屬性。
5. 單擊TopAppBar旁邊的New按鈕。一個AppBar控件被添加到頁面中。
6. 在文檔大綱中，展開TopAppBar屬性。
7. 選擇「photoPageButton」元素，將其拖到AppBar上並放下。
8. 在「屬性」面板的「佈局」下，將Horizo​​ntalAlignment屬性設置爲Right（）。
9. 按F5構建並運行應用程序。要測試應用欄，請右鍵單擊主頁面。應用欄在屏幕頂部打開。

我雙擊在MainPage.xaml，然後在Document Outline我選擇pageRoot。並在properties窗口展開Common和我點擊New旁邊TopAppBar。

它在其下面添加了其他幾個Fields。 Allow Drop,Background和Cache Mode就是其中的一部分。然後在Document Outline我把按鈕拖到下TopAddBar。將HorizontalAlignment更改爲Right，構建並執行應用程序。但是我沒有看到添加到頂部導航欄的按鈕。我在這裏做錯了什麼？

UPDATE

<Page.Resources> 

    <!-- TODO: Delete this line if the key AppName is declared in App.xaml --> 
    <x:String x:Key="AppName">My Application</x:String> 
</Page.Resources> 
<common:LayoutAwarePage.TopAppBar> 
    <AppBar Background="#E5A41D1D" AllowDrop="True" BorderBrush="#E5C5A7A7" HorizontalAlignment="Right"> 
     <Button Content="Next Page&#xD;&#xA;" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="230" Height="70" Background="#FF12668D" FontFamily="Shruti" FontSize="36" Click="Button_Click_2"/> 
    </AppBar> 
</common:LayoutAwarePage.TopAppBar> 

<!-- 
    This grid acts as a root panel for the page that defines two rows: 
    * Row 0 contains the back button and page title 
    * Row 1 contains the rest of the page layout 
--> 
<Grid Style="{StaticResource LayoutRootStyle}" Background="#FF282D40"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="140"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <!-- Back button and page title --> 

    <!-- Back button and page title --> 
    <!-- 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="Welcome !!! " Style="{StaticResource PageHeaderTextStyle}" Foreground="#DE2374AC"/> 
    </Grid> 

    <VisualStateManager.VisualStateGroups> 

     <!-- Visual states reflect the application's view state --> 
     <VisualStateGroup x:Name="ApplicationViewStates"> 
      <VisualState x:Name="FullScreenLandscape"/> 
      <VisualState x:Name="Filled"/> 

      <!-- The entire page respects the narrower 100-pixel margin convention for portrait --> 
      <VisualState x:Name="FullScreenPortrait"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 

      <!-- The back button and title have different styles when snapped --> 
      <VisualState x:Name="Snapped"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid> 

Answer 1

您正在關注this tutorial here，正確嗎？它看起來像你把錯誤的按鈕拖到你的TopAppBar。

您應該拖動的按鈕名爲photoPageButton（它的x：Name屬性）。相反，您在TopAppBar中的按鈕沒有名稱，並顯示文本「下一頁」。

爲TopAppBar XAML標記應該是這個樣子你拖着photoPageButton後到TopAppBar：

<common:LayoutAwarePage.TopAppBar> 
    <AppBar HorizontalAlignment="Right"> 
     <Button x:Name="photoPageButton" Content="Go to photo page"/> 
    </AppBar> 
</common:LayoutAwarePage.TopAppBar> 

後你在本教程稍遠一點和應用樣式的按鈕，那麼您對TopAppBar標記看起來就像這樣：

<common:LayoutAwarePage.TopAppBar> 
    <AppBar HorizontalAlignment="Right"> 
     <Button x:Name="photoPageButton" 
      Click="photoPageButton_Click" 
      HorizontalAlignment="Right" 
      Style="{StaticResource PicturesAppBarButtonStyle}"/> 
    </AppBar> 
</common:LayoutAwarePage.TopAppBar> 

這是完全可以接受的在那裏等AppBar設置，以及 - 背景，BorderBrush;這些都是對顏色無害的改變 - 我相信AllowDrop默認爲true，所以也沒關係。