Silverlight 2 アプリケーションでの新しいページの動的読み込み

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

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

   

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

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

   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
   

   Expression Blend との Visual Studio 2008 の相互運用性の詳細については、「コードビハインド ファイルの編集」を参照してください。

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

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

   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 2008 で "Cannot load the solution" というエラーが表示される場合は、Visual Studio 2008 用の Microsoft Silverlight Tools (英語の可能性あり) がインストールされていない可能性があります。ツールをインストールして、Expression Blend で [イベント] パネルをダブルクリックします。

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

  • Width = Auto

  • Height = Auto

  • Margin プロパティ = 0

• クリックしたボタンが消える場合、ボタン オブジェクトを LayoutRoot の子としてではなく、PageContainer 罫線の子として追加した可能性があります (PageContainer 罫線オブジェクトの子は、追加したコードによって置き換えられます)。[オブジェクトとタイムライン] で、ボタン オブジェクトを 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 サイト (英語の可能性あり) を参照してください。