今天,我們要先談談UI的專業化問題…
建立企業商業應用當然需要給客戶展現專業的UI設計,不過我們中又有多少團隊擁有一個專業的全職美工呢?這就是我們儘力為使用者準備一些“開箱即用”UI模板的原因。Silverlight Navigation Application和Silverlight Business Application(在前一個基礎上增加了登入/登出功能)預設提供了一套乾淨規範的應用程式架構。看上去很美,而且即使對於開發人員來說也很易維護和自訂。
檔案\建立項目 – Silverlight Business Applications
按下 F5
這是一個完全基於架構的Silverlight Application。注意Home和About兩個導航連結。
看,瀏覽器的前進和後退一樣好用…
Silverlight3提供了對深度連結的支援。你可以copy這些連結然後通過部落格、電子郵件或者即時通訊工具發送給你的團隊成員。當他們點擊開這個連結的時候就可以導航到這個深度連結在應用程式中所指向的確切的位置。
… 在任何瀏覽器中都能表現得始終如一…
所謂人無完人,經驗再豐富的開發人員也難免會犯一些錯誤。比如敲錯了連結或應用程式拋出了意料外的異常這種情況。Navigation Application提供的預設範本讓處理此類問題變得超方便。隨意敲一個錯誤的URL試試:
接下來讓我們談談自訂(個人化)方面的事兒
首先,我們添加一個新的Page
右擊解決方案中當前Silverlight項目的Views檔案夾,然後點擊Add New Item,選擇Silverlight Page
開啟新添加的Page,搞一些簡單的東東進去
<TextBlock Text="Hello World!"></TextBlock>
現在,我們把它和主導航頁面的菜單關聯起來。在MainPage.xaml中參照現有的導覽按鈕定義添加一個Button
<HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="/MyFirstPage" TargetName="ContentFrame" Content="my page"/>
接著,我們來自訂一下預設的出錯提示視窗…開啟Views\ErrorWindo.xaml進行處理,這裡你可以做一些具體的改動,如改變相應的輸出格式、將日誌記錄到服務端或自訂異常提示資訊等。
<TextBlock x:Name="IntroductoryText" Grid.Row="0" Margin="0" Text="An unknown error was encountered. Please contact Forever anytime day or night (123) 332-9801 for more information." Width="398" TextWrapping="Wrap" HorizontalAlignment="Left"/>
恩,還不錯。現在我們要改變一下這個網站的標識。在MainPage.xaml中,將“Application Name”改為你想要的名稱,如“4 MVC Team 群號:1215279”(超級明顯的廣告)。
<TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" Text="4 MVC Team 群號:1215279"/>
最後我們針對顏色進行一些改動。開啟Assets檔案夾中的Styles.xaml,現有的所有樣式都擺在那裡等著你去定義哦。我們這裡做一些對開發人員來說比較普遍且熟悉的屬性的更改。
點F5看成果…
恩…如你所見,我搞出來的顏色看上去並不咋樣,呵呵。
我們還提供了一系列的“即開即用”的app.xaml供大家選用,他們在VS和Blend下表現得都很出色。
以下是一部分已經提供的樣式模板:
http://timheuer.com/blog/archive/2009/07/09/free-silverlight-application-themes-silverlight-3.aspx
Aurora (用於RIA Services Template的版本):
Frosted Cinnamon Toast:
Lime Shocker (用於RIA Services Template的版本):
Pinky (用於RIA Services Template的版本):
Retro:
Skyline:
Subdued: