チュートリアル: Windows Phone のアプリ バー テスト アプリの作成

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

 

このチュートリアルでは、アプリ バーのテスト アプリを作成します。このチュートリアルで作成するアプリを使用すると、不透明度、色、モードなど、アプリ バーのさまざまなプロパティをテストできます。また、通常のページ、ピボット ページ、およびパノラマ ページのアプリ バーをテストすることもできます。

アプリの各ページのユーザー インターフェイスには、アプリ バーの各プロパティに対応するオプション ボタンがあります。オプション ボタンをクリックすると、アプリ バーが動的に変更され、さまざまなプロパティとそれらの相互作用をテストできます。詳細については、「Windows Phone のアプリ バー」を参照してください。

メモメモ:

このアプリの完成したバージョンはダウンロードとして提供されています。詳細については、Windows Phone デベロッパー センターのサンプル ギャラリーを参照してください。

このチュートリアルでは次のタスクを実行します。

  • 4 つのアイコン ボタンと 2 つのメニュー項目を備えたアプリ バーを作成します。

  • アプリ バーのプロパティを動的に変更します。

  • アプリ バーのクリック イベントのハンドラーを作成します。

  • ナビゲーション サービスを使用してアプリのページ間を移動します。

完成したアプリは次のようになります。

The app in the emulator

このトピックは、次のセクションで構成されています。

 

このチュートリアルを最後まで行うには、Windows Phone SDK がインストールされている必要があります。詳細については、「SDK を取得する」を参照してください。

最初に、新しい Windows Phone アプリ プロジェクトを AppBarTester という名前で作成します。この後の手順でアプリにコードを追加するときは、アプリ名が AppBarTester であるということが前提になります。アプリに別の名前を選択する場合、コードの名前空間の参照を変更する必要があります。

アプリ プロジェクトを作成するには

  1. Visual Studio で、[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログが表示されます。

  2. 左側のペインで [インストールされたテンプレート] をクリックし、[Visual C#] または [Visual Basic] を展開してから、[Windows Phone] をクリックします。

  3. プロジェクトの種類の一覧の [Windows Phone アプリ ] をクリックします。

  4. [名前] ボックスに「AppBarTester」と入力します。

  5. [OK] をクリックします。

    Windows Phone プラットフォームの選択ダイアログ ボックスが表示されます。

  6. [対象の Windows Phone バージョン] ボックスから [Windows Phone OS 8.0] を選択し、[OK] をクリックします。

    新しいアプリ プロジェクトが作成され、Visual Studio で開きます。

このアプリには 1 つのメイン ページがあり、そこに 3 つのセカンダリ ページへのリンクが含まれています。メイン ページは、ナビゲーションのためにのみ使用されます。アプリ バーのテストは 3 つのセカンダリ ページで行います。この手順では、メイン ページを作成し、3 つのセカンダリ ページを追加し、ナビゲーションを設定します。この後の手順では、アプリ バーをセカンダリ ページに追加します。

メイン ページを作成するには

  1. ソリューション エクスプローラーで、MainPage.xaml をダブルクリックしてデザイナーで開きます。

  2. XAML コードで、LayoutRoot という GRID 要素を見つけます。そこから、ファイルの末尾までのすべてのコードを次のコードに置き換えます。これにより、セカンダリ ページへの 3 つのリンクが作成されます。

        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="App Bar Tester" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <StackPanel Grid.Row="1">
                <TextBlock Text="experiment with an Application Bar on different page types:" Margin="24" Style="{StaticResource PhoneTextLargeStyle}" TextWrapping="Wrap" />
    
                <HyperlinkButton Content="a plain page" Name="linkPlainPage" Margin="24" Click="linkPlainPage_Click" />
                <HyperlinkButton Content="a pivot page" Name="linkPivotPage" Margin="24" Click="linkPivotPage_Click" />
                <HyperlinkButton Content="a panorama page" Name="linkPanoramaPage" Margin="24" Click="linkPanoramaPage_Click" />
            </StackPanel>
        </Grid>
    </phone:PhoneApplicationPage>
    
  3. ソリューション エクスプローラーで、MainPage.xaml を右クリックし、[コードの表示] をクリックして、コード エディターで分離コード ファイルを開きます。

  4. MainPage クラスで、コンストラクターの後に、次のコードを追加します。このコードは、3 つのリンクのクリック イベント ハンドラーを作成します。各メソッドのコードは、対応するページへの移動を行います。これらのページは次の手順で作成します。

    private void linkPlainPage_Click(object sender, RoutedEventArgs e)
    {
        NavigationService.Navigate(new Uri("/PlainPage.xaml", UriKind.Relative));
    }
    
    private void linkPivotPage_Click(object sender, RoutedEventArgs e)
    {
        NavigationService.Navigate(new Uri("/PivotPage.xaml", UriKind.Relative));
    }
    
    private void linkPanoramaPage_Click(object sender, RoutedEventArgs e)
    {
        NavigationService.Navigate(new Uri("/PanoramaPage.xaml", UriKind.Relative));
    }
    

セカンダリ ページを追加するには

  1. ソリューション エクスプローラーで、プロジェクトを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。

    [新しい項目の追加] ダイアログが表示されます。

  2. [Windows Phone ポートレート ページ] を選択し、名前として「PlainPage.xaml」を入力してから [追加] をクリックします。

  3. 手順 1. を繰り返し、[Windows Phone ピボット ページ] を選択し、名前として「PivotPage.xaml」を入力してから [追加] をクリックします。

  4. 手順 1. を繰り返し、[Windows Phone パノラマ ページ] を選択し、名前として「PanoramaPage.xaml」を入力してから [追加] をクリックします。

この手順では、アプリを実行して、アプリの構造とナビゲーションをテストします。

アプリをテストするには

  1. [ファイル] メニューの [すべてを保存] をクリックします。(Ctrl + Shift + S)

  2. [ビルド] メニューの [ソリューションのビルド] をクリックします。(Ctrl + Shift + B)

  3. 標準のツール バーで、アプリの展開対象を [Windows Phone Emulator] に設定します。

    Target on Standard Toolbar selecting emulator

  4. [デバッグ] メニューの [デバッグ開始] をクリックします。(F5)

    アプリがエミュレーターで起動し、メイン ページが表示されます。

  5. 最初のリンクをタップし、正しいページに移動することを確認します。

  6. [戻る] ボタンを押してメイン ページに戻ります。

  7. 他の 2 つのリンクをテストし、正しいページに移動することを確認します。

  8. [デバッグ] メニューの [デバッグの停止] をクリックします。(F5)

この手順では、アプリ バーのボタン アイコンとして使用する 4 つの画像ファイルをアプリに追加します。これらの画像ファイルは、Windows Phone SDK と共にインストールされるアイコンの標準セットの一部です。詳細については、「Windows Phoneのアプリケーション バー アイコン ボタン」を参照してください。

アイコンのボタン画像をアプリに追加するには

  1. ソリューション エクスプローラーで、プロジェクトを右クリックし、[追加] をポイントして、[新しいフォルダー] をクリックします。

  2. フォルダーに Images という名前を付けます。

  3. ソリューション エクスプローラーで、[Images] フォルダーを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。

    [既存の項目の追加] ダイアログが表示されます。

  4. 次の場所を参照して、標準のアイコンを見つけます。

    C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\dark

  5. 次のファイルをすべて選択し、[追加] をクリックします。

    • delete.png

    • feature.settings.png

    • questionmark.png

    • save.png

  6. ソリューション エクスプローラーで、新しい 4 つのファイルをすべて選択します。

  7. [プロパティ] ウィンドウで、新しいファイルに次のプロパティを設定します。

    プロパティ

    ビルド アクション

    コンテンツ

    出力ディレクトリにコピー

    新しい場合はコピーする

    注意注意:

    これらのアイコンをボタン画像として使用するには、ビルド アクションを [コンテンツ] に設定する必要があります。

  8. 次の表の情報に従って、ファイルの名前を変更します。

    古い名前

    新しい名前

    delete.png

    delete.png

    feature.settings.png

    settings.png

    questionmark.png

    help.png

    save.png

    save.png

表示:
© 2014 Microsoft