上方廣告

Lady Kukki 手作糖霜餅乾

2011年8月24日 星期三

Silverlight初探(一) - Style設定篇

Silverlight這個技術剛出來的時候,小弟我其實就想學了,但是一直拖到現在才開始訴諸行動,為什麼拖了這麼久,不是我懶惰,只是Silverlight1.0的時候我就有稍微喵了一下書籍,那時候書本一直提到Silverlight不是Flash,光是這點我就有點心動了,因為我本身也有想要學Flash這塊,但是本人美工不強,而且一直走C#這塊實在沒有餘力再走ActionScript了,於是就想說乾脆來學Silverlight好了,但是書本一翻開,shit.... 為什麼不是用C# ~"~ ,用的還是JavaScript,而且看來看去怎們感覺好像Flash,似乎跟書本說的不太一樣,要是要重學我乾脆學ActionScript,所以就放棄了。
時光飛梭,如今Silverlight 4 也上市了,小弟我又不放棄的跑去書局翻了翻書,這次終於本書買回家了,微軟還是有在做事的,Silverlight 4 開始支援C#語法(更早的版本就有支援了),而且加強了資料庫的操作,所以我又回來了,說了一堆廢話,這篇文章我要介紹一下在Silverlight中Style的設定。

相信大家都有寫過網頁,網頁中我們常常會用CSS來定義一些字型、框線等等,以避免要調整風格的時候要整個網頁打開一支一支修改,而Silverlight中當然也有這樣的設定。前些日子我在網路上搜索了幾篇文章有教到使用Visual Studio 2010建置Silverlight商業網站(如下圖),建置完後我打開程式碼一看,我的媽呀,好陌生~~,書中似乎也沒有寫這些是幹嘛的,所以才決定寫下這篇文章。

首先我們可以看到建立一個Silverlight App後會有一個App.xaml檔,這個檔的目的就像是Winform的Program.cs,專門在設定程式進入點的,因此我們把要載入的Style檔就寫在這頁,其中Assets/Style.xaml就是我們預先設定好的Style檔


    
        
            
                
            
        
    



接下來就是來看Style定義的部分,如果專案裡面沒有Style.xaml檔,可以透過加入新項目,選擇Silverlight Resource Dictionary來建立,建立完後就可以開始設定自己要的Style了。


我從商業網站所產生的程式碼看來,Style有兩種定義方式,一種是直接定義,從下面的程式碼可以看到一個Style的定義必須有id,也就是【x:Key】,這樣程式端才有辦法選定,這點跟CSS一樣,但是如果沒有給定【x:Key】也可以正常執行,只是套用的類別會變成TargetType所指定的所有物件,另外還必須指定要套用的物件【Grid】,而裡面的Setter Property這個我就不多加解釋了。



另外一種方式是套用先前定義的Style,下面的語法我們先定義一個共用的Style【NavigationBackgroundColorBrush】,並且注意一下下面設定屬性部分的Value,就直接套用這個Style。





最後就是該如何使用了,在我們設計好的xaml檔裡面,遇到需要套用特定Style的時候我們只需要使用下面語法即可,就是如此簡單。至於StaticResource與DynamicResource並不在本文的討論範圍,後續有機會在說明,或者可以參考阿諭的WPF技術應用天堂





本文附件 :