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

“本文适合silverlight界面設計師參考，程式開發人員最好也了解一下”

首先來看一下需要實作的效果

這裡我主要使用Grid來布局，把界面分為了三部分，頭、左部、右部

好整體了解了一下布局，這裡我來分布講解。

之是以使用Grid這個布局控件是因為他能根據目前的浏覽器的大小做自适應布局。

如圖：

下來一步 準備一些需要用到的圖檔素材，現在做界面不一定都是要矢量元素，在合适的地方使用合适的素材最好。這裡是我準備的一些小圖檔。

建立項目，在項目中建立一個assets的檔案夾，把項目中用到的素材分類放好。

調整MainPage的大小為800*600

在舞台上建立立一個Border容器，在其内部放置一個Grid控件，并把這個Grid劃分為三個區域。在每個區域内部建立立一個Grid并為他們啟好名字。

給border加上投影效果，DropShadowEffect。

在Grid左部區域加上一點漸變效果。 這裡運用了我剛才準備的line01.png這個圖檔

将圖檔在放入一個Grid中，設定圖檔的屬性，使其按照高度自動延伸。

在設定圖檔的夫級Grid屬性，使其居右按照高度自适應。

最終的效果：

接下來制作Head

在Head的底部添加一個矩形Rectangle，居底，按照寬度自适應，删除邊框，為其橫向填充漸變色。

效果如下：

布局已經确定了，這裡再添加一些圖檔做做美化。

示範位址：

<a target="_blank" href="http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step-1/OperatingTableTestPage.html">http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step-1/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 

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