試してみよう: Silverlight アプリケーションでの新しいページの動的読み込み

Microsoft Silverlight アプリケーションでは、さまざまな方法でコンテンツを動的に読み込むことができます。これにより、コンテンツ ページのオブジェクトが複数作成されます。そして、ユーザーがボタンをクリックしたときに、そのオブジェクトの 1 つが読み込まれコンテンツが表示されます。その他のソリューションについては、MSDN の「Silverlight documentation (Silverlight のドキュメント) 」 および Silverlight コミュニティの Web サイト 」を参照してください。

実行時にページを読み込むには

1. 複数のコンテンツ ページを持つ Silverlight プロジェクトで、スタートアップ ページ (通常はPage.xaml) を開きます。この手順では、UserControl1.xaml と UserControl2.xaml の 2 つのコンテンツ ページがあるものとします。

   ヒント :
   新しいコンテンツ ページを追加するには、[ファイル] メニューの [新しいアイテム] をクリックします。

2. [ツール] パネルの [アセット] をクリックし、[Border] レイアウト パネル を選択します。マウスを使用して、アートボードに罫線オブジェクトを描画します。

   

   ヒント :
   新しい [Border] オブジェクトの外観を変更するには、そのオブジェクトを選択し、[プロパティ] パネルの [ブラシ] および [外観] でプロパティを設定します。たとえば、BorderBrush プロパティを [単色ブラシ]  に設定し、BorderThickness プロパティを 2 に設定します。

3. [オブジェクトとタイムライン] パネルで、[Border] オブジェクトを右クリックし、[名前の変更] を選択してから、後でこのオブジェクトを分離コード ファイル内で参照できるようにオブジェクト名を [PageContainer] に変更します。

4. [オブジェクトとタイムライン] パネルで [LayoutRoot] オブジェクトをクリックしてアクティブにします。[LayoutRoot] の周囲に黄色の罫線が表示され、アートボードに描画したすべての新しいオブジェクトが [LayoutRoot] の子になります。

5. [ツール] パネルで [Button] をクリックし、[PageContainer] オブジェクトの外側のアートボード上にボタンを描画します。

   ヒント :
   テキストが表示されるコントロールを描画したら、F2 キーを押してテキスト編集モードに切り替えて、テキストを変更できます。テキスト編集モードを終了するには、Esc キーを押します。

6. [オブジェクトとタイムライン] パネルで、[Button] オブジェクトを選択します。

7. [プロパティ] パネルで [イベント] をクリックし、プロパティ ビューからイベント ビューに切り替えます。

   ヒント :
   [プロパティ] パネルをプロパティ ビューに戻すには、[プロパティ] をクリックします。

8. Click イベントの横にあるテキスト ボックスをダブルクリックします。Microsoft Expression Blend により、イベント ハンドラーの名前 (Button_Click) が生成されます。これは、実行中のアプリケーションでユーザーがボタンをクリックしたときに呼び出されます。

   Expression Blend により、イベント ハンドラーのコードがクリップボードにコピーされ、Microsoft Visual Studio 2010 でプロジェクトが開きます (Microsoft Visual Studio 2010 がインストールされている場合)。

   コード エディターがインストールされていない場合は、テキスト エディターでユーザー コントロールの分離コード ファイルを開き、次のコードを貼り付けます。

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
   
   End Sub
   

   Visual Studio 2010 と Expression Blend の相互運用性の詳細については、「分離コード ファイルの変更」を参照してください。

9. [PageContainer] オブジェクトに表示される 2 つのコンテンツ ページ間を切り替えるには、メモリ内にページのインスタンスを作成し、イベント ハンドラーでそのページのいずれかを [PageContainer] に追加します。たとえば、次の太字のコードを分離コード ファイルに貼り付けます。"UserControl1" および "UserControl2" は、プロジェクト内の他の 2 つのコンテンツ ページの名前です。

   ヒント :
   [Border] コントロールは、子オブジェクトを 1 つしか持つことができません。Grid レイアウト パネルなど、複数の子を含めることができるコントロールについては、コードが若干異なります。

   private UserControl1 uc1 = new UserControl1();  
   private UserControl2 uc2 = new UserControl2();  
   private bool atUC2 = false;  
   
   private void Button_Click(object sender, RoutedEventArgs e)
   {
     if (atUC2)  
     {  
       this.PageContainer.Child = uc1;  
     }  
     else  
     {  
       this.PageContainer.Child = uc2;  
     }  
     atUC2 = !atUC2;  
   }
   

   Private uc1 As UserControl1 = New UserControl1()  
   Private uc2 As UserControl2 = New UserControl2()  
   Private atUC2 As Boolean = False  
   
   Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
     If atUC2 Then  
       Me.PageContainer.Child = uc1  
     Else  
       Me.PageContainer.Child = uc2  
     End If  
     atUC2 = Not atUC2  
   End Sub
   

10. プロジェクトをテストし (F5 キーを押します)、ボタンをクリックして、[PageContainer] に読み込まれた UserControl1 および UserControl2 を表示します。

    

トラブルシューティング

• Expression Blend の [イベント] パネルをダブルクリックしたときに "分離コード ファイルを変更できません。次のクラスが見つかりません" というエラーが表示される場合は、外部コード エディター (通常は Microsoft Visual Studio) に切り替えてソリューションを再度読み込まなければならない可能性があります。再読み込みすると、見つからないクラスを定義する新しいファイルが追加されます。

• Visual Studio 2010 で "ソリューションを読み込めません" というエラーが表示される場合は、Visual Studio 2010 用 Microsoft Silverlight Tools がインストールされていない可能性があります。ツールをインストールして、Expression Blend で [イベント] パネルをダブルクリックします。

• 動的に読み込まれたページのコンテンツが表示されない場合は、[PageContainer] が小さすぎて、読み込んだコンテンツの一部を表示できない可能性があります。[PageContainer] を大きくするか、動的に読み込まれたページのレイアウト プロパティを次のように設定します。

  • [Width] = 自動

  • [Height] = 自動

  • [Margin] プロパティ = 0

• クリックしたボタンが消える場合、[Button] オブジェクトを [LayoutRoot] の子としてではなく、[PageContainer] の子として追加した可能性があります ([PageContainer] オブジェクトの子は、追加したコードによって置き換えられます)。[オブジェクトとタイムライン] パネルで、[Button] オブジェクトを [LayoutRoot] パネルにドラッグし、[PageContainer] の外に移動できます。

• 新しいオブジェクトを作成してページ読み込み (ボタンではなく) をトリガーし、Expression Blend で、Button_Click イベント ハンドラーの名前を、[プロパティ] パネルの [イベント] ビューの新しいオブジェクトにコピーすると、プロジェクトをテスト (F5 キー) するときに Web ブラウザーでエラーが発生する場合があります。これは、新しいオブジェクトの種類と一致しないイベント ハンドラーの誤った署名が原因である可能性があります。たとえば、ボタンの Click イベント ハンドラーの署名は次のようになります。

  private void Button_Click(object sender, RoutedEventArgs e)
  

  Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
  

  MouseLeftButtonDown イベント ハンドラーの署名は次のようになります。

  private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  

  Private Sub Path_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
  

  この問題を修正するには、[プロパティ] パネルの [イベント] ビュー で、正しいイベント ハンドラーの横にあるテキスト ボックス内をダブルクリックし、分離コード ファイルに正しい署名で新しいメソッドを作成します。

次のステップ

• 特定のタスクに関する詳細については、Silverlight コミュニティの Web サイト  を参照してください。

Copyright ©2011 by Microsoft Corporation. All rights reserved.