方法: Windows Phone 用のピボット アプリケーションを作成する

2012/02/09

このトピックでは、Windows Phone でピボット アプリケーションを作成する方法について説明します。ピボット アプリケーションのサンプルについては、「Windows Phone のコード サンプル」を参照してください。

この演習の目標は次のとおりです。

  • 3 つの異なるコンテンツ ページを含むピボット アプリケーションを作成します

  • PivotItem コントロールにさまざまなコントロールとコンテンツを追加します

このセクションでは、Visual Studio を使用してピボット アプリケーションを作成します。1 つの Pivot コントロールと複数の PivotItem コントロールが既に追加されているプロジェクトに、Windows Phone ピボット ページを追加します。さらに、新しい PivotItem を追加します。

基本のピボット アプリケーションを作成するには

  1. [スタート] メニューから [Visual Studio 2010 Express for Windows Phone] を起動します。

  2. [ファイル]、[新しいプロジェクト] の順にメニュー コマンドを選択して、新しいプロジェクトを作成します。

  3. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for Windows Phone のテンプレートを選択します。

  4. Windows Phone アプリケーション テンプレートを選択します。目的のプロジェクトの [名前] を入力します。

  5. [OK] をクリックします。新しいプロジェクトが作成され、MainPage.xaml が Visual Studio デザイナー ウィンドウに表示されます。

  6. ソリューション エクスプローラーでプロジェクトを右クリックし、[追加] をクリックして、[新しい項目] をクリックします。[Windows Phone ピボット ページ] を選択し、ページの下部にある [追加] をクリックします。このプロジェクトには既定の名前 PivotPage1.xaml が使用されます。

  7. MainPage.xaml で、ContentPanel という名前のグリッド内の XAML コードに以下を追加します。

    <HyperlinkButton Content="Pivot Application Example" Height="57" HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="383" NavigateUri="/PivotPage1.xaml"/>
    
    
    
    注注:

    このハイパーリンクを作成する目的は、アプリケーションの開始点を作成することです。アプリケーションの実行時には、ユーザーはこのハイパーリンクをタップして、ピボット エクスペリエンスに進みます。ピボット アプリケーションへの既定の移行メカニズムとして、ハイパーリンクを使用する必要はありません。この演習では、1 つの例としてハイパーリンクを使用しています。ユーザーがアプリケーションを開始したらすぐに表示されるようにピボット エクスペリエンスを構成してもかまいません。

  8. PivotPage1.xaml には、次のような XAML コードが含まれます。

    <!--LayoutRoot is the root grid where all page content is placed.-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <!--Pivot Control-->
            <controls:Pivot Title="MY APPLICATION">
                <!--Pivot item one-->
                <controls:PivotItem Header="item1">
                    <Grid/>
                </controls:PivotItem>
    
                <!--Pivot item two-->
                <controls:PivotItem Header="item2">
                    <Grid/>
                </controls:PivotItem>
            </controls:Pivot>
        </Grid>
    
    
    注注:

    このコードでは、1 つの Pivot コントロールが作成されて、タイトルが割り当てられます。次に、2 つの PivotItem コントロールを作成し、それぞれにヘッダーを割り当てます。このプロジェクトでは、3 つの PivotItem コントロールを作成し、次の手順でさらにもう 1 つ PivotItem を作成します。

  9. <!--Pivot item two--> セクションの後に、次のコードで新しい PivotItem コントロールを追加します。

       <!--Pivot item three.-->
            <controls:PivotItem Header="item3">
               <Grid/>
            </controls:PivotItem>
    
    
    

このセクションでは、各 PivotItem コントロールにさまざまなコントロールとコンテンツを追加します。

最初のピボット アイテムへのコンテンツの追加

最初の PivotItem に対しては、折り返されるテキストを含む TextBlock コントロールを追加します。

最初のピボット アイテムにコンテンツを追加するには

  • 最初のピボット アイテム <controls:PivotItem Header="item1"> の後の XAML コードに、次のコードを追加します。最初に既存の <Grid/> タグを削除する必要があります。

    <Grid>
        <!--Added TextBlock control with formatted text.-->
        <TextBlock
           TextWrapping="Wrap"
           Style="{StaticResource PhoneTextLargeStyle}">
           <Run>This is a simple sample for the pivot control adding text.</Run>
           <LineBreak/>
           <LineBreak/>
           <Run>You can put any content you want here...</Run>
      </TextBlock>
    </Grid>
    
    注注:

    最初の PivotItem のコンテンツは、このトピックの最後に示されている図のようになります。

2 番目のピボット アイテムへのコンテンツの追加

このページには、背景イメージと折り返しテキストを含む一連のコンテンツを追加します。このトピックでは、samplePhoto.jpg のサンプル イメージを使用します。必要に応じて次のコードを変更し、画像を組み込む必要があります。

2 番目のピボット アイテムにコンテンツを追加するには

  • 2 番目のピボット アイテムのコード行 <controls:PivotItem Header="item2"> の後の XAML コードに、次のコードを追加します。最初に既存の <Grid/> タグを削除する必要があります。

    <!--Added background image and text content.-->
        <Border
            BorderBrush="{StaticResource PhoneForegroundBrush}"
            BorderThickness="{StaticResource PhoneBorderThickness}">
                 <Grid>
                     <Image
                        Source="samplePhoto.jpg"
                        Stretch="UniformToFill"/>
                     <TextBlock
                        Text="Here is some generic content to take up space."
                        TextWrapping="Wrap"
                        Style="{StaticResource PhoneTextExtraLargeStyle}" />
                </Grid>
         </Border>
    
    注注:

    2 番目の PivotItem のコンテンツは、このトピックの最後に示されている図のようになります。

3 番目のピボット アイテムへのコンテンツの追加

最後の PivotItem では、ListBox コントロールの内部に一連の文字列テキスト値を配置します。目的はホストされるコントロールをナビゲートする機能があることを示すことです。ユーザーはリストの内容を上下にパンすることができます。

3 番目のピボット アイテムにコンテンツを追加するには

  1. PivotPage1.xaml で、次の名前空間宣言を XAML コードに追加します。

    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    
    
    
    注注:

    このアセンブリは複数行の文字列テキストを Listbox コントロールに追加する際に参照されます。

  2. 3 番目の PivotItem のコード行 <controls:PivotItem Header="item3"> の後の XAML コードに、次のコードを追加します。最初に既存の <Grid/> タグを削除する必要があります。

    
    <!--This code adds a series of string text values.-->
    <Grid>
                <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                    <sys:String>This</sys:String>
                    <sys:String>item</sys:String>
                    <sys:String>has</sys:String>
                    <sys:String>a</sys:String>
                    <sys:String>short</sys:String>
                    <sys:String>list</sys:String>
                    <sys:String>of</sys:String>
                    <sys:String>strings</sys:String>
                    <sys:String>that</sys:String>
                    <sys:String>you</sys:String>
                    <sys:String>can</sys:String>
                    <sys:String>scroll</sys:String>
                    <sys:String>up</sys:String>
                    <sys:String>and</sys:String>
                    <sys:String>down</sys:String>
                    <sys:String>and</sys:String>
                    <sys:String>back</sys:String>
                    <sys:String>again.</sys:String>         
                </ListBox>
    </Grid>
    
    
    
    注注:

    3 番目の PivotItem は、このトピックの最後に示されている図のようになります。

  3. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これにより、エミュレーター ウィンドウが開いてアプリケーションが起動されるか、または選択内容に基づいてデバイスに配置されます。

    AP_CoreCon_PivotSample

表示: