理解Navigation導航框架Frame類 · Silverlight應用開發實例教程

通過“[Navigation導航框架開篇](http://www.cnblogs.com/jv9/archive/2011/05/18/2049518.html)” 的介紹，可以了解到Silverlight導航框架可被應用于多種場合，最為常見的是實現Silverlight項目內部頁面切換。在 Silverlight SDK中，導航框架API位于System.Windows.Navigation命名空間，為了更好的掌握Silverlight導航框架，本篇將介紹 Silverlight導航框架結構以及常用類和方法使用說明。 **快速創建簡單Silverlight導航應用** 在開始講解理論知識前，首先創建一個基于Silverlight導航框架的簡單應用，其步驟如下： ![](https://box.kancloud.cn/2016-03-18_56eb67cf6f83b.png) 創建Silverlight Navigation Application，項目名稱”SilverlightNavigationDemo“ ![](https://box.kancloud.cn/2016-03-18_56eb67cf859a3.png) ![](https://box.kancloud.cn/2016-03-18_56eb67cf96220.png) 創建完成后，Visual Studio 2010將自動生成項目文件以及默認項目頁面。 ![](https://box.kancloud.cn/2016-03-18_56eb67cfa7273.png) 直接編譯運行默認生成的Silverlight導航應用項目，默認運行界面如下： ![](https://box.kancloud.cn/2016-03-18_56eb67cfb588e.png) 在默認項目中，系統自動生成導航菜單”home“和”about“，點擊后，在導航框架內將自動切換頁面。為了演示方便，我將默認導航應用中的英文介紹修改為中文。 **理解Silverlight導航框架Frame類** Silverlight導航框架包含兩個主要對象，分別是Frame類和Page類。 **Frame類** 主要功能是承載顯示項目頁面，從功能上來講類似一個內容控件，Frame類可以承載任何繼承自UserControl類的控件或者頁面作為導航的目標頁。從 ASP.NET應用開發角度理解，Frame類可以被看作為Master Page中的ContentPlaceHolder，可被用于載入任何不同的頁面。****Frame類執行的原理是，當用戶執行導航指令時，會傳遞指定的URI到一個類型轉換器中獲取導航頁面路徑，然后在Frame控件中顯示該頁面。從Silverlight SDK中可以看出，Frame類繼承System.Windows.Controls.ContentControl，也就是說Frame類是一個ContentControl內容控件類，該類同一時間僅能包含一個內容項。 ![](https://box.kancloud.cn/2016-03-18_56eb67cfc57d9.png) ? 在文章開始的默認實例中，MainPage.xaml代碼中包含一個<navigation:Frame>對象，其中使用Source屬性指定Frame對象運行時所指向的Uri，使用Frame.UriMapper地址映射，載入真實頁面地址。對于導航框架的地址映射將在后文介紹。 ~~~ <navigation:Frame?x:Name="ContentFrame"?Style="{StaticResource?ContentFrameStyle}"? ??????????????????????????????Source="/Home"?Navigated="ContentFrame_Navigated"?NavigationFailed="ContentFrame_NavigationFailed"> ????????????????<navigation:Frame.UriMapper> ??????????????????<uriMapper:UriMapper> ????????????????????<uriMapper:UriMapping?Uri=""?MappedUri="/Views/Home.xaml"/> ????????????????????<uriMapper:UriMapping?Uri="/{pageName}"?MappedUri="/Views/{pageName}.xaml"/> ??????????????????</uriMapper:UriMapper> ????????????????</navigation:Frame.UriMapper> </navigation:Frame> ~~~ ![](https://box.kancloud.cn/2016-03-18_56eb67cfd3d56.png) Frame 類作為導航頁面載體，通過設置JournalOwnership屬性記錄項目頁面導航歷史，同時通過GoBack和GoForward可以輕松實現導航頁面的后退和前進。另外Frame類中提供UriMapper屬性，實現導航頁面地址映射功能，該功能不僅簡化頁面Uri，方便記憶，同時也相對提高了頁面安全性。 Silverlight導航框架Frame類常用**屬性**： <table style="border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td style="padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; padding-top: 0cm; border: windowtext 1pt solid;" width="142">屬性</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: windowtext 1pt solid; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">類型</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 224.15pt; padding-right: 5.4pt; border-top: windowtext 1pt solid; border-right: windowtext 1pt solid; padding-top: 0cm;" width="299">描述</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">CacheSize</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">Int</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 224.15pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="299">該屬性用于獲取或設置導航框架緩存頁面數量</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">CanGoBack</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">Bool</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 224.15pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="299">該屬性用于判斷后退導航歷史記錄中是否至少有一條記錄</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">CanGoForward</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">Bool</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 224.15pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="299">該屬性用于判斷前進導航歷史記錄中是否只要有一條記錄</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">ContentLoader</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">ContentLoader</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 224.15pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="299">該屬性用于獲取或設置一個負責提供請求URI對應的內容對象</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">CurrentSource</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">Uri</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 224.15pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="299">該屬性用于獲取當前框架中內容頁的統一資源標識符（URI）,該屬性值僅在導航完成后進行更新。</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">JournalOwnership</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">JournalOwnership</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 224.15pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="299">該屬性用于獲取或設置當前Frame框架是否記錄導航歷史記錄，或者是否將瀏覽記錄與瀏覽器集成</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">Source</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">Uri</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 224.15pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="299">該屬性用于獲取或設置當前框架中內容頁的統一資源標識符（URI），與CurrentSource屬性不同的是該屬性值在導航開始時即被設置，當導航完成時，該屬性值和CurrentSource相同。</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">UriMapper</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 106.8pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="142">UriMapperBase</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 224.15pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="299">該屬性用于獲取或設置一個導航映射對象，該對象用于管理導航框架地址轉換</td></tr></tbody></table> Silverlight導航框架Frame類常用**方法**： <table style="border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td style="padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; padding-top: 0cm; border: windowtext 1pt solid;" width="140">方法</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: windowtext 1pt solid; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">描述</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">GoBack</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該方法用于導航當前頁面后退到歷史記錄中上一頁，如果后退導航時沒有歷史記錄頁面，則返回異常</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">GoForward</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該方法用于導航當前頁面前進到歷史記錄中下一頁，如果前進導航時沒有歷史記錄頁面，則返回異常</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">Navigate</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該方法用于導航到指定URI頁面，該URI可以是導航映射相對地址，也可以是導航頁面絕對地址</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">Refresh</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該方法用于重載當前導航頁，該方法經常被用于自定義INavigationContentLoader</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">StopLoading</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該方法用于停止所有導航異步進程，該方法常被用于停止正在下載載入的導航頁面</td></tr></tbody></table> Silverlight導航框架Frame類常用**事件：** <table style="border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td style="padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; padding-top: 0cm; border: windowtext 1pt solid;" width="140">事件</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: windowtext 1pt solid; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">描述</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">FragmentNavigation</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該事件在導航到內容片段時被激活</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">Navigated</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該事件在導航完成時被激活</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">Navigating</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該事件在導航開始時被激活</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">NavigationFailed</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該事件在導航拋出異常失敗時被激活</td></tr><tr><td style="border-bottom: windowtext 1pt solid; border-left: windowtext 1pt solid; padding-bottom: 0cm; padding-left: 5.4pt; width: 104.65pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="140">NavigationStopped</td><td style="border-bottom: windowtext 1pt solid; border-left: medium none; padding-bottom: 0cm; padding-left: 5.4pt; width: 333.1pt; padding-right: 5.4pt; border-top: medium none; border-right: windowtext 1pt solid; padding-top: 0cm;" width="444">該事件在StopLoading方法被調用時，或者取消當前導航請求時被激活</td></tr></tbody></table> Silverlight導航框架Frame類事件運行周期圖如下： ![](https://box.kancloud.cn/2016-03-18_56eb67cfec75a.png) Silverlight導航框架Frame類屬于導航應用基礎，在隨后的實例演示中，會經常用到其屬性和方法，對于該類推薦認真學習。今天暫時介紹到這里。下一篇將介紹Silverlight導航框架Page類以及其主要屬性和方法的使用。 [本篇源代碼](http://www.silverlightchina.net/uploads/soft/110628/1-11062Q63134.zip) [Silverlight實例教程系列 - Silverlight Validation驗證實例](http://silverlightchina.net/html/zhuantixilie/getstart/2010/0924/2035.html) [Silverlight實例教程系列 - Silverlight Out-of-Browser實例](http://silverlightchina.net/html/zhuantixilie/getstart/2010/0809/1709.html) [Silverlight實例教程系列 - Expression Blend實例中文教程](http://silverlightchina.net/html/zhuantixilie/getstart/2010/0409/978.html) 歡迎大家加入“專注Silverlight”QQ技術群，歡迎大家加入一起學習討論Silverlight&WPF&Widnows Phone開發技術。? 22308706(一群) 超級群500人? 37891947(二群) 超級群500人? 100844510(三群) 高級群200人? 32679922(四群) 超級群500人? 23413513(五群) 高級群200人? 32679955(六群) 超級群500人? 61267622(七群) 超級群500人? 88585140(八群) 超級群500人? 128043302(九群企業應用開發推薦群) 高級群200人? 101364438(十群) 超級群500人? 68435160(十一群企業應用開發推薦群)超級群500人