共用方式為


試試看:在 Silverlight 應用程式中動態載入新網頁

Dd185500.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ZH-TW,Expression.30).png

您可以用多種方式在 Microsoft Silverlight 應用程式中動態載入內容。此程序會建立內容網頁的物件,然後載入其中一個物件,以在使用者按一下按鈕時顯示內容。您可以在 MSDN 的 Silverlight 文件以及 Silverlight 社群網站中找到其他解決方案。

若要在執行階段載入網頁

  1. 在具有多個內容網頁的 Silverlight 專案中,開啟啟動頁面 (通常是 Page.xaml)。針對此程序,假設您有兩個名為 UserControl1.xaml 和 UserControl2.xaml 的內容網頁。

    Dd185500.alert_tip(ZH-TW,Expression.30).gif秘訣:

    若要新增內容網頁,請按一下 [檔案] 功能表上的 [新增項目]。

  2. 在 [工具] 面板中,按一下 [資產] Dd185500.0d8b8d29-1af9-418f-8741-be3097d76eab(ZH-TW,Expression.30).png,然後選取 [框線] 版面配置面板 Dd185500.be354518-c54c-4f86-9c57-0b4a9d384b3e(ZH-TW,Expression.30).png。使用您的滑鼠,在畫板上繪製框線物件。

    Dd185500.b9dabf44-71aa-43cb-b4eb-f020a21b8756(ZH-TW,Expression.30).png

    Dd185500.alert_tip(ZH-TW,Expression.30).gif秘訣:

    在選取新框線物件時,您可以設定 [屬性] 面板中 [筆刷] 和 [外觀] 下的屬性,變更該物件的外觀。例如,您可以將 BorderBrush 屬性設定為 [單色筆刷] Dd185500.3a66ec96-47bb-47fc-8876-6b9456feec3a(ZH-TW,Expression.30).png,並將 BorderThickness 屬性設定為 2。

  3. 在 [物件與時間軸] 面板中,以滑鼠右鍵按一下 [Border] 物件,選取 [重新命名],然後將物件名稱變更為 [PageContainer],以便日後可在程式碼後置檔案中參考此物件。

  4. 在 [物件與時間軸] 面板中,按一下 [LayoutRoot] 物件,讓它成為使用中的物件。[LayoutRoot] 周圍會出現黃色的框線,且您在畫板上所繪製的任何新物件將成為 [LayoutRoot] 的子物件。

  5. 在 [工具] 面板中,按一下 [按鈕] Dd185500.05df1779-a68f-436b-b834-a91b7995a3ec(ZH-TW,Expression.30).png,然後在 [PageContainer] 物件外的畫板上繪製按鈕。

    Dd185500.alert_tip(ZH-TW,Expression.30).gif秘訣:

    在您繪製可顯示文字的控制項之後,可以按下 F2 進入文字編輯模式以修改文字。若要結束文字編輯模式,請按 ESC 鍵。

  6. 在 [物件與時間軸] 面板中,選取 [Button] 物件。

    Dd185500.ac4d8215-e9b1-4fbe-b6f4-5b09785971a9(ZH-TW,Expression.30).png

  7. 在 [屬性] 面板中,按一下 [事件] Dd185500.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ZH-TW,Expression.30).png 以將屬性檢視切換為事件檢視。

    Dd185500.alert_tip(ZH-TW,Expression.30).gif秘訣:

    若要將 [屬性] 面板切換回屬性檢視,請按一下 [屬性] Dd185500.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(ZH-TW,Expression.30).png

  8. 連按兩下 Click 事件旁的文字方塊。Microsoft Expression Blend 會產生事件處理常式 (使用者於執行中應用程式內按一下按鈕時呼叫) 的名稱 (Button_Click)。

    Dd185500.ebf76e43-de7e-4e55-8729-529a774e3d95(ZH-TW,Expression.30).png

    Expression Blend 會複製事件處理常式的程式碼到剪貼簿,然後在 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
    

    如需有關 Visual Studio 2008 與 Expression Blend 互通性的詳細資訊,請參閱修改程式碼後置檔案

  9. 若要在 [PageContainer] 框線物件中所顯示的兩個內容網頁之間進行切換,請在記憶體中建立網頁的例項,然後在事件處理常式中,新增其中一個網頁至 [PageContainer]。例如,將下列粗體標示的程式碼貼入您的程式碼後置檔案中:「UserControl1」和「UserControl2」是您專案中其他兩個內容網頁的名稱。

    Dd185500.alert_tip(ZH-TW,Expression.30).gif秘訣:

    框線控制項僅能有一個子物件。對於可包含多個子控制項的控制項,例如 [格線] 版面配置面板 Dd185500.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(ZH-TW,Expression.30).png,該程式碼會略有不同。

    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),然後按一下按鈕以檢視 UserControl1 和 UserControl2 是否載入至 [PageContainer] 框線中。

    Dd185500.635377b3-9d34-40f7-89c4-c743582d38e5(ZH-TW,Expression.30).png

疑難排解

  • 如果出現「無法變更程式碼後置檔案。找不到下列類別」的錯誤,當您在 Expression Blend 中的 [事件] 面板內按兩下時,可能需要切換至外部程式碼編輯器 (通常是 Microsoft Visual Studio) 以重新載入解決方案。重新載入將會包含定義遺失類別的新檔案。

  • 如果在 Visual Studio 2008 中出現「無法載入解決方案」的錯誤,可能是尚未安裝 Visual Studio 2008 的 Microsoft Silverlight 工具。請安裝該工具然後嘗試在 Expression Blend 中的 [事件] 面板內按兩下。

  • 如果您無法檢視動態載入網頁的內容,可能是 [PageContainer] 框線太小而放不下所有載入的內容。請嘗試放大 [PageContainer] 框線,或將動態載入網頁中的版面配置屬性進行下列設定:

    • Width = Auto

    • Height = Auto

    • Margin 屬性 = 0

  • 如果按鈕在您按下時消失,可能是因為您將按鈕物件新增為 [PageContainer] 框線的子物件,而不是 [LayoutRoot] 的子物件。(您新增的程式碼將取代 [PageContainer] 框線物件的子物件)。在 [物件與時間軸] 面板中,您可以將按鈕物件拖曳至 [LayoutRoot] 面板,以將它從 [PageContainer] 框線移出。

  • 如果您建立新物件來觸發載入網頁 (而非按鈕),然後在 Expression Blend 中,將 Button_Click 事件處理常式的名稱複製到 [屬性] 面板之 [事件] 檢視 Dd185500.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ZH-TW,Expression.30).png 中的新物件,則可能在測試 (F5) 專案時,在網頁瀏覽器中發生錯誤。這可能是因為不符合新物件類型的事件處理常式的錯誤簽章所致。例如,按鈕 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)
    

    您可以在 [屬性] 面板的 [事件] 檢視 Dd185500.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ZH-TW,Expression.30).png 中,按兩下正確的事件處理常式旁的文字方塊,使用正確的簽章在程式碼後置檔案中建立新方法,藉此修正此問題。

下一步