試試看:在 Silverlight 應用程式中動態載入新網頁
您可以用多種方式在 Microsoft Silverlight 應用程式中動態載入內容。此程序會建立內容網頁的物件,然後載入其中一個物件,以在使用者按一下按鈕時顯示內容。您可以在 MSDN 的 Silverlight 文件 以及 Silverlight 社群網站 中找到其他解決方案。
在執行階段載入網頁
在具有多個內容網頁的 Silverlight 專案中,開啟啟動頁面 (通常是 Page.xaml)。針對此程序,假設您有兩個名為 UserControl1.xaml 和 UserControl2.xaml 的內容網頁。
秘訣: 若要新增內容網頁,請按一下 [檔案] 功能表上的 [新增項目]。
在 [工具] 面板中,按一下 [資產] ,然後選取 [框線] 版面配置面板 。使用您的滑鼠,在畫板上繪製框線物件。
秘訣: 在選取新框線物件時,您可以設定 [屬性] 面板中 [筆刷] 和 [外觀] 下的屬性,變更該物件的外觀。例如,您可以將 BorderBrush 屬性設定為 [單色筆刷] ,並將 BorderThickness 屬性設定為 2 。
在 [物件與時間軸] 面板中,以滑鼠右鍵按一下 [Border] 物件,選取 [重新命名],然後將物件名稱變更為 [PageContainer],以便日後可在程式碼後置檔案中參考此物件。
在 [物件與時間軸] 面板中,按一下 [LayoutRoot] 物件,讓它成為使用中的物件。[LayoutRoot] 周圍會出現黃色的框線,且您在畫板上所繪製的任何新物件將成為 [LayoutRoot] 的子物件。
在 [工具] 面板中,按一下 [按鈕] ,然後在 [PageContainer] 物件外的畫板上繪製按鈕。
秘訣: 在您繪製可顯示文字的控制項之後,可以按下 F2 進入文字編輯模式以修改文字。若要結束文字編輯模式,請按 ESC 鍵。
在 [物件與時間軸] 面板中,選取 [Button] 物件。
在 [屬性] 面板中,按一下 [事件] 以將屬性檢視切換為事件檢視。
秘訣: 若要將 [屬性] 面板切換回屬性檢視,請按一下 [屬性] 。
連按兩下 Click 事件旁的文字方塊。Microsoft Expression Blend 會產生事件處理常式 (使用者於執行中應用程式內按一下按鈕時呼叫) 的名稱 ( Button_Click )。
Expression Blend 會複製事件處理常式的程式碼到剪貼簿,然後在 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 互通性的詳細資訊,請參閱修改程式碼後置檔案。
若要在 [PageContainer] 框線物件中所顯示的兩個內容網頁之間進行切換,請在記憶體中建立網頁的例項,然後在事件處理常式中,新增其中一個網頁至 [PageContainer]。例如,將下列粗體標示的程式碼貼入您的程式碼後置檔案中:"UserControl1" 和 "UserControl2" 是您專案中其他兩個內容網頁的名稱。
秘訣: 框線控制項只能有一個子物件。對於可包含多個子控制項的控制項,例如 [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
測試您的專案 (F5),然後按一下按鈕以檢視 UserControl1 和 UserControl2 是否載入至 [PageContainer] 框線中。
疑難排解
如果出現「無法變更程式碼後置檔案。找不到下列類別」的錯誤,當您在 Expression Blend 中的 [事件] 面板內按兩下時,可能需要切換至外部程式碼編輯器 (通常是 Microsoft Visual Studio) 以重新載入解決方案。重新載入將會包含定義遺失類別的新檔案。
如果在 Visual Studio 2010 中出現「無法載入解決方案」的錯誤,可能是尚未安裝 Visual Studio 2010 的 Microsoft Silverlight 工具 。請安裝該工具然後嘗試在 Expression Blend 中的 [事件] 面板內按兩下。
如果您無法檢視動態載入網頁的內容,可能是 [PageContainer] 框線太小而放不下所有載入的內容。請嘗試放大 [PageContainer] 框線,或對動態載入網頁中的版面配置屬性進行下列設定:
Width = Auto
Height = Auto
Margin 屬性 = 0
如果按鈕在您按下時消失,可能是因為您將按鈕物件新增為 [PageContainer] 框線的子物件,而不是 [LayoutRoot] 的子物件 (您新增的程式碼將取代 [PageContainer] 框線物件的子物件)。在 [物件與時間軸] 面板中,您可以將按鈕物件拖曳至 [LayoutRoot] 面板,以將它從 [PageContainer] 框線移出。
如果您建立新物件來觸發載入網頁 (而非按鈕),然後在 Expression Blend 中,將 Button_Click 事件處理常式的名稱複製到 [屬性] 面板之 [事件] 檢視 中的新物件,則可能在測試 (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)
您可以在 [屬性] 面板的 [事件] 檢視 中,按兩下正確的事件處理常式旁的文字方塊,使用正確的簽章在程式碼後置檔案中建立新方法,藉此修正此問題。
後續步驟
- 您可以在 Silverlight 社群網站 中找到有關特定工作的詳細資訊。
Copyright © 2011 by Microsoft Corporation. All rights reserved.