天天看點

建立可擴充的silverlight 應用架構 step-3

應用架構

前邊兩章都是将的UI方面的知識。這裡UI結構已經有了,現在要引人一個開發架構:Composite  “Prism”。

前期準備工作

首先在項目首頁下載下傳最新版本的Composite。

建立可擴充的silverlight 應用架構 step-3

<a href="http://compositewpf.codeplex.com/">http://compositewpf.codeplex.com/</a>

<a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=387c7a59-b217-4318-ad1b-cbc2ea453f40&amp;displaylang=en">http://www.microsoft.com/downloads/details.aspx?FamilyID=387c7a59-b217-4318-ad1b-cbc2ea453f40&amp;displaylang=en</a>

我這裡下載下傳的是《Composite Application Guidance for WPF and Silverlight - October 2009》

解壓安裝

建立可擴充的silverlight 應用架構 step-3

編譯項目

将以下的5個dll找出以作備用

建立可擴充的silverlight 應用架構 step-3

至此前期準備工作完成。

改造項目

1.為項目添加之前準備的幾個DLL的引用

建立可擴充的silverlight 應用架構 step-3

2.重命名MainPage.xaml為Shell.xaml

3.打開Shell.xaml.cs檔案将MainPage類重命名為Shell

建立可擴充的silverlight 應用架構 step-3

4.在XAML視圖中修改x:Class 與之相對應的後端代碼關聯

建立可擴充的silverlight 應用架構 step-3

5.添加Region

在Shell.xaml中添加Prism的命名空間

    xmlns:Regions="clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation"

這樣子就可以為Region添加Prism中的依賴屬性了。

在圖中紅色區域的Grid中添加一個ItemControl控件

建立可擴充的silverlight 應用架構 step-3

6.添加Bootstarpper,在項目中建立立一個Bootstrapper繼承自UnityBootstrapper的類。

建立可擴充的silverlight 應用架構 step-3
建立可擴充的silverlight 應用架構 step-3

7.修改App.xaml,在app.xaml中修改其啟動方法。

建立可擴充的silverlight 應用架構 step-3

至此,項目改造告一段落。下來為下圖中的紅色區域制作一個HelloWorld來看看效果。

建立可擴充的silverlight 應用架構 step-3

8.建立一個名為OperatingTableTestModule的silverlight類庫。删除app.xaml、mainpage.xaml兩個檔案并添加對“Microsoft.Practices.Composite.dll”和“Microsoft.Practices.Composite.Presentation.dll”的引用。

建立可擴充的silverlight 應用架構 step-3

9.在項目中建立立一個檔案夾“Views”,并在這個檔案夾下建立一個HelloPrismView.xaml的檔案。在其中繪制如下的圖案。

建立可擴充的silverlight 應用架構 step-3

10.在項目中添加一個名為HelloPrismModule的類,它派生自IModule接口。

建立可擴充的silverlight 應用架構 step-3

在Initialize方法中,将MainRegion與Views中的HelloPrismView相關聯。

建立可擴充的silverlight 應用架構 step-3

11.再回到OperatingTable項目中,添加其對OperatingTableTestModule項目的引用。找到Bootstarpper類,修改其GetModuleCatalog方法,使其加載剛才建立立的項目子產品。

建立可擴充的silverlight 應用架構 step-3

編譯項目 運作

建立可擴充的silverlight 應用架構 step-3

ok,這裡看到了OperatingTableTestModule項目中的View替換了原先的ItemsControl。

擴充

這裡看到了Hello Prism并沒有自适應容器,而是根據自身的大小來做的布局。這裡有一個小小的技巧。

為ItemsControl加一個Grid模闆就可以做到。

建立可擴充的silverlight 應用架構 step-3
建立可擴充的silverlight 應用架構 step-3

再次運作

建立可擴充的silverlight 應用架構 step-3

如圖,他自适應了容器大小,更加的美觀了。

應用了Prism架構我們可以把界面拆分成若幹小的子產品,更加方面的以擴充子產品的方式來開發silverlight應用。

示範位址:

<a href="http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step-3/OperatingTableTestPage.html">http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step-3/OperatingTableTestPage.html</a>

<a target="_blank" href="http://www.cnblogs.com/nasa/archive/2010/01/27/dropbox-host-silverlight.html">申請Dropbox來host你的Silverlight</a>

作者:Nasa 

版權聲明:本文的版權歸作者與部落格園共有。轉載時須注明本文的詳細連結,否則作者将保留追究其法律責任。

參考資料:

<a href="http://www.cnblogs.com/Jax/archive/2009/05/25/1488797.html">http://www.cnblogs.com/Jax/archive/2009/05/25/1488797.html</a>

<a href="http://www.cnblogs.com/Jax/archive/2009/05/30/1491921.html">http://www.cnblogs.com/Jax/archive/2009/05/30/1491921.html</a>