0

Windows 8でチュートリアルを試していNavigation Barます。手順は次のとおりです。

以下はチュートリアルから。

  1. ソリューション エクスプローラーで、MainPage.xaml をダブルクリックして開きます。
  2. ドキュメント アウトラインで、「pageRoot」要素を選択します。
  3. [プロパティ] パネルで、[プロパティ] ボタン () をクリックして [プロパティ] ビューを表示します。
  4. [プロパティ] パネルの [共通] で、TopAppBar プロパティを見つけます。
  5. TopAppBar の横にある [新規] ボタンをクリックします。ページに AppBar コントロールが追加されます。
  6. ドキュメント アウトラインで、TopAppBar プロパティを展開します。
  7. 「photoPageButton」要素を選択し、AppBar にドラッグ アンド ドロップします。
  8. [プロパティ] パネルの [レイアウト] で、Horizo​​ntalAlignment プロパティを Right () に設定します。
  9. F5 キーを押して、アプリをビルドして実行します。アプリ バーをテストするには、メイン ページを右クリックします。画面上部にアプリバーが開きます。

をダブルクリックしてからMainPage.xaml、Document Outline選択した をダブルクリックしましたpageRoot。propertiesウィンドウが展開され、 の横にある をCommonクリックしました。NewTopAppBar

その下に他のいくつかを追加しまし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&#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>

4

1 に答える 1

1

あなたはここでこのチュートリアルに従っています、正しいですか？間違ったボタンを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設定（Background、BorderBrush）もそこに含めることは完全に許容されます。これらは色に対する無害な変更であり、AllowDropのデフォルトはtrueであると私は信じているので、それも問題ありません。

于 2012-12-27T16:59:07.017 に答える