在 Windows 8 中添加顶部导航栏 - 教程问题

Question

我正在 WIndows 8 上试用 tutorial。我需要添加 Navigation Bar。步骤如下；

以下内容来自教程。

1. 在解决方案资源管理器中，双击 MainPage.xaml 将其打开。
2. 在文档大纲中，选择“pageRoot”元素。
3. 在“属性”面板中，单击“属性”按钮 () 以显示“属性”视图。
4. 在“属性”面板的“常用”下，找到 TopAppBar 属性。
5. 单击 TopAppBar 旁边的新建按钮。页面中添加了一个 AppBar 控件。
6. 在文档大纲中，展开 TopAppBar 属性。
7. 选择“photoPageButton”元素，将其拖放到 AppBar 上。
8. 在“属性”面板的“布局”下，将“水平对齐”属性设置为“右”()。
9. 按 F5 构建并运行应用程序。要测试应用栏，请右键单击主页。应用栏会在屏幕顶部打开。

我双击MainPage.xaml，然后在Document Outline 中我选择了pageRoot。在properties 窗口中展开Common，然后我点击TopAppBar 旁边的New。

它在其下方添加了其他几个Fields。 Allow Drop、Background 和 Cache Mode 就是其中的一部分。然后在Document Outline 中，我将按钮拖到TopAddBar 下的AppBar。将HorizontalAlignment 更改为Right，构建并执行应用程序。但我没有看到添加到顶部导航栏的按钮。我在这里做错了什么？

更新

<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 中的按钮没有名称，并显示文本“下一页”。

将 photoPageButton 拖到 TopAppBar 后，TopAppBar 的 XAML 标记应如下所示：

<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，所以这也很好。