Dynamisches Laden neuer Seiten in die Silverlight 2-Anwendung

Es gibt mehrere Möglichkeiten, Inhalt dynamisch in eine Silverlight 2-Anwendung zu laden. Bei diesem Verfahren werden Objekte für Inhaltsseiten erstellt. Eines der Objekte wird dann geladen, um den Inhalt anzuzeigen, wenn ein Benutzer auf eine Schaltfläche klickt. Weitere Lösungen finden Sie in der Silverlight-Dokumentation in MSDN und auf der Silverlight Community-Website (möglicherweise in englischer Sprache).

So laden Sie eine Seite zur Laufzeit

1. Öffnen Sie in einem Silverlight 2-Projekt mit mehreren Inhaltsseiten die Startseite (in der Regel Page.xaml). In diesem Lernprogramm gehen wir davon aus, dass Sie zwei Inhaltsseiten namens UserControl1.xaml und UserControl2.xaml haben.

   Tipp:
   Zum Hinzufügen neuer Inhaltsseiten klicken Sie im Menü Datei auf Neues Element.

2. Klicken Sie in der Werkzeugpalette auf die Schaltfläche Objektbibliothek , und wählen Sie dann das Layoutpanel Rahmen . Zeichnen Sie mit der Maus ein Border-Objekt auf die Zeichenfläche.

   

   Tipp:
   Wenn das neue Border-Objekt ausgewählt ist, können Sie die Darstellung ändern, indem Sie im Eigenschaftenpanel die Eigenschaften unter Pinsel und Darstellung ändern. Sie können beispielsweise die BorderBrush-Eigenschaft auf Pinsel mit Volltonfarbe  und die BorderThickness-Eigenschaft auf 2 festlegen.

3. Klicken Sie unter Objekte und Zeitachsen mit der rechten Maustaste auf das Border-Objekt, wählen Sie Umbenennen aus, und ändern Sie dann den Namen des Objekts in PageContainer. Auf diese Weise können Sie später in der CodeBehind-Datei auf dieses Objekt verweisen.

4. Doppelklicken Sie unter Objekte und Zeitachsen auf das LayoutRoot-Objekt, um es zu aktivieren. Um das LayoutRoot-Objekt wird ein gelber Rahmen angezeigt und alle neuen Objekte, die Sie auf der Zeichenfläche zeichnen, werden untergeordnete Elemente von LayoutRoot.

5. Klicken Sie in der Werkzeugpalette auf Schaltfläche , und zeichnen Sie auf der Zeichenfläche außerhalb des PageContainer-Objekts eine Schaltfläche.

   Tipp:
   Nachdem Sie ein Steuerelement gezeichnet haben, das Text anzeigt, können Sie den Text ändern. Drücken Sie F2, um den Textbearbeitungsmodus zu aktivieren. Beenden Sie den Textbearbeitungsmodus, indem Sie die ESC-TASTE drücken.

6. Wählen Sie unter Objekte und Zeitachsen das [Button]-Objekt aus.

   

7. Klicken Sie im Eigenschaftenpanel auf die Schaltfläche Ereignisse , um von der Eigenschaften- in die Ereignisansicht zu wechseln.

   Tipp:
   Klicken Sie auf die Schaltfläche Eigenschaften , um im Eigenschaftenpanel zur Eigenschaftenansicht zurückzukehren.

8. Doppelklicken Sie in das Textfeld neben dem Click-Ereignis. Von Microsoft Expression Blend wird ein Name (Button_Click) für einen Ereignishandler generiert, der aufgerufen wird, wenn der Benutzer in der ausgeführten Anwendung auf die Schaltfläche klickt.

   

   Der Code für den Ereignishandler wird von Expression Blend in die Zwischenablage und dann das Projekt in Microsoft Visual Studio 2008 geöffnet, falls dieses installiert ist.

   Wenn kein Code-Editor installiert ist, öffnen Sie die CodeBehind-Datei für das Benutzersteuerelement in einem Text-Editor, und fügen Sie den folgenden Code ein:

   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
   

   Weitere Informationen zu Interoperabilität von Visual Studio 2008 mit Expression Blend finden Sie unter Bearbeiten einer CodeBehind-Datei.

9. Zum Wechseln zwischen den zwei im Border-Objekt PageContainer angezeigten Inhaltsseiten erstellen Sie Instanzen der Seiten im Arbeitsspeicher und fügen dann im Ereignishandler dem PageContainer-Objekt eine der Seiten hinzu. Fügen Sie beispielsweise den folgenden fettgedruckten Code in Ihre CodeBehind-Datei ein. "UserControl1" und "UserControl2" sind die Namen von zwei weiteren Inhaltsseiten in Ihrem Projekt.

   Tipp:
   Ein Border-Steuerelement kann nur über ein untergeordnetes Objekt verfügen. Bei einem Steuerelement, das mehrere untergeordnete Elemente enthalten kann (zum Beispiel ein Raster-Layoutpanel), kann der Code geringfügig abweichen.

   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. Testen Sie Ihr Projekt (F5), und klicken Sie auf Ihre Schaltfläche. UserControl1 und UserControl2 werden in den PageContainer-Rahmen geladen.

    

Problembehandlung

• Wenn Sie die Fehlermeldung "Die CodeBehind-Datei kann nicht geändert werden. Die folgende Klasse wurde nicht gefunden" erhalten, sobald Sie im Ereignispanel in Expression Blend doppelklicken, müssen Sie möglicherweise in den externen Code-Editor (in der Regel Microsoft Visual Studio) wechseln, um die Projektmappe neu zu laden. Beim Neuladen werden die neuen Dateien berücksichtigt, die die fehlende Klasse definieren. Wenn Sie in Visual Studio 2008 die Fehlermeldung "Cannot load the solution" (Lösung kann nicht geladen werden) erhalten, haben Sie möglicherweise Microsoft Silverlight Tools für Visual Studio 2008 nicht installiert. Installieren Sie die Werkzeuge, und versuchen Sie im Ereignispanel in Expression Blend doppelzuklicken.

• Wenn der Inhalt der dynamisch geladenen Seiten nicht angezeigt wird, ist der PageContainer-Rahmen möglicherweise nicht groß genug, um den gesamten geladenen Inhalt aufzunehmen. Vergrößern Sie den PageContainer-Rahmen, oder legen Sie die Layouteigenschaften in den dynamisch geladenen Seiten auf die folgenden Einstellungen fest:

  • Breite = Auto

  • Höhe = Auto

  • Margin-Eigenschaften = 0

• Wenn die Schaltfläche nicht mehr angezeigt wird, sobald Sie darauf klicken, haben Sie das Button-Objekt möglicherweise dem PageContainer-Rahmen und nicht dem LayoutRoot-Objekt untergeordnet. (Der hinzugefügte Code ersetzt das untergeordnete Objekt des Border-Objekts PageContainer.) Ziehen Sie unter Objekte und Zeitachsen das Button-Objekt in das LayoutRoot-Panel, um das Objekt aus dem PageContainer-Rahmen hinaus zu verschieben.

• Wenn Sie statt einer Schaltfläche ein neues Objekt erstellen, um das Laden von Seiten auszulösen und dann in Expression Blend den Namen des Button_Click-Ereignishandlers in das neue Objekt in der Ereignisansicht des Eigenschaftenpanels kopieren, erhalten Sie möglicherweise im Webbrowser eine Fehlermeldung, wenn Sie Ihr Projekt testen (F5). Dieser Fehler kann durch eine falsche Signatur für den Ereignishandler ausgelöst werden, die nicht dem neuen Objekttyp entspricht. Die Signatur für einen Button-Ereignishandler Click entspricht ungefähr der folgenden Signatur:

  private void Button_Click(object sender, RoutedEventArgs e)
  

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

  Die Signatur für einen MouseLeftButtonDown-Ereignishandler entspricht ungefähr der folgenden Signatur:

  private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  

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

  Sie können dieses Problem lösen, indem Sie im Textfeld neben dem korrekten Ereignishandler in der Ereignisansicht des Eigenschaftenpanels doppelklicken, um eine neue Methode mit der korrekten Signatur in der CodeBehind-Datei zu erstellen.

Nächste Schritte

• Weitere Themen zu Vorgehensweisen und Videos zu spezifischen Aufgaben finden Sie auf der Silverlight Community-Website (möglicherweise in englischer Sprache).