Databases
StackOverflow2013
Postsdbo
POAdding a Top Navigation Bar in Windows 8 - Tutorial Issue
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding a Top Navigation Bar in Windows 8 - Tutorial Issue
    text
    copied!<p>I am trying out a <a href="http://msdn.microsoft.com/en-us/library/windows/apps/jj215600.aspx" rel="nofollow">tutorial</a> on WIndows 8. I need to add a <code>Navigation Bar</code>. The steps are given below;</p> <p>The following is from the tutorial.</p> <ol> <li>In Solution Explorer, double-click MainPage.xaml to open it.</li> <li>In the Document Outline, select the "pageRoot" element.</li> <li>In the Properties panel, click the Properties button () to show the Properties view.</li> <li>Under Common in the Properties panel, find the TopAppBar property.</li> <li>Click the New button next to TopAppBar. An AppBar control is added to the page.</li> <li>In the Document Outline, expand the TopAppBar property.</li> <li>Select the "photoPageButton" element, drag it onto the AppBar, and drop it.</li> <li>Under Layout in the Properties panel, set the HorizontalAlignment property to Right ().</li> <li>Press F5 to build and run the app. To test the app bar, right-click on the main page. The app bar opens at the top of the screen.</li> </ol> <p>I Double-clicked on the <code>MainPage.xaml</code>, and then in the <code>Document Outline</code> i selected <code>pageRoot</code>. and in the <code>properties</code> Window expanded <code>Common</code> and i clicked on <code>New</code> next to <code>TopAppBar</code>.</p> <p>It added several other <code>Fields</code> below it. <code>Allow Drop</code>, <code>Background</code> and <code>Cache Mode</code> are some of it. Then in the <code>Document Outline</code> i dragged the button to the <code>AppBar</code> under <code>TopAddBar</code>. Changed the <code>HorizontalAlignment</code> to <code>Right</code>, build and executed the application. But i don't see the button added to the top Navigation bar. What have i done wrong here ?</p> <p>UPDATE</p> <p></p> <pre><code>&lt;Page.Resources&gt; &lt;!-- TODO: Delete this line if the key AppName is declared in App.xaml --&gt; &lt;x:String x:Key="AppName"&gt;My Application&lt;/x:String&gt; &lt;/Page.Resources&gt; &lt;common:LayoutAwarePage.TopAppBar&gt; &lt;AppBar Background="#E5A41D1D" AllowDrop="True" BorderBrush="#E5C5A7A7" HorizontalAlignment="Right"&gt; &lt;Button Content="Next Page&amp;#xD;&amp;#xA;" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="230" Height="70" Background="#FF12668D" FontFamily="Shruti" FontSize="36" Click="Button_Click_2"/&gt; &lt;/AppBar&gt; &lt;/common:LayoutAwarePage.TopAppBar&gt; &lt;!-- 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 --&gt; &lt;Grid Style="{StaticResource LayoutRootStyle}" Background="#FF282D40"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="140"/&gt; &lt;RowDefinition Height="*"/&gt; &lt;/Grid.RowDefinitions&gt; &lt;!-- Back button and page title --&gt; &lt;!-- Back button and page title --&gt; &lt;!-- Back button and page title --&gt; &lt;Grid&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="*"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/&gt; &lt;TextBlock x:Name="pageTitle" Grid.Column="1" Text="Welcome !!! " Style="{StaticResource PageHeaderTextStyle}" Foreground="#DE2374AC"/&gt; &lt;/Grid&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;!-- Visual states reflect the application's view state --&gt; &lt;VisualStateGroup x:Name="ApplicationViewStates"&gt; &lt;VisualState x:Name="FullScreenLandscape"/&gt; &lt;VisualState x:Name="Filled"/&gt; &lt;!-- The entire page respects the narrower 100-pixel margin convention for portrait --&gt; &lt;VisualState x:Name="FullScreenPortrait"&gt; &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;!-- The back button and title have different styles when snapped --&gt; &lt;VisualState x:Name="Snapped"&gt; &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;/Grid&gt; </code></pre> <p></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload