我正在尝试一个关于 WIndows 8 的教程。我需要添加一个Navigation Bar
. 步骤如下;
以下内容来自教程。
- 在解决方案资源管理器中,双击 MainPage.xaml 将其打开。
- 在文档大纲中,选择“pageRoot”元素。
- 在“属性”面板中,单击“属性”按钮 () 以显示“属性”视图。
- 在 Properties 面板的 Common 下,找到 TopAppBar 属性。
- 单击 TopAppBar 旁边的新建按钮。页面中添加了一个 AppBar 控件。
- 在 Document Outline 中,展开 TopAppBar 属性。
- 选择“photoPageButton”元素,将其拖到 AppBar 上,然后放下。
- 在“属性”面板的“布局”下,将“水平对齐”属性设置为“右”()。
- 按 F5 构建并运行应用程序。要测试应用栏,请右键单击主页。应用栏在屏幕顶部打开。
我双击了MainPage.xaml
,然后在Document Outline
i 中选择了pageRoot
。并在properties
展开的窗口中Common
,我单击了New
旁边的TopAppBar
.
它在它下面添加了其他几个Fields
。Allow Drop
,Background
并且Cache Mode
是其中的一部分。然后在Document Outline
我将按钮拖到AppBar
下面TopAddBar
。更改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
" 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>