Silverlight控件樣式相關技巧應用解析


 Silverlight控件樣式相關技巧應用解析

 

Silverlight開發工具是由微軟公司推出的一款專門應用於圖形及多媒體操作的輔助工具。對於開發人員來說,使用它可以輕鬆的實現各種以前難以實現的視覺效果。Silverlight控件樣式都具有MS爲我們賦予的默認樣式,雖然這個樣式也不怎麼難看,但任何產品都很少用這個默認的樣式去做最後的呈現,所以我們就需要對其進行修改。

首先,根據我的瞭解,我想到的改變控件默認樣式的方法有:一、直接在控件本身上寫樣式;二、定義一個公共的樣式標,就像CSS一樣;三、運行時樣式,前面兩個的樣式定義好以後就生效了,而運行時樣式,只有在程序運行的某一個階段纔會生效。

第一個方法很簡單,我們只需要在XAML中加入希望的樣式,或者通過Expression Blend在右側屬性中進行修改就可以了。

當然,我們仍然可以通過編寫代碼來實現動態的控制控件的樣式。

第二個Silverlight控件樣式的改變方法就是通過編輯外部的樣式來實現改變的目的。這個方法在參考資料[1]中有詳細的描述。

這裏,補充一點定義樣式的時候關於位置的定義,定義在程序級別 Application ,會將樣式寫在 App.xaml 中,如果定義在本文檔的話,會在頁面的上方寫入。個人理解就和CSS的文檔內寫入和外部樣式文件類同。

當我們寫入 Application 時,標籤是這樣: < Application.Resources>

當我們寫入 Document 時, 標籤是這樣:< UserControl.Resources>

關於Silverlight控件樣式更多的內容,可以在MSDN的資料中看到[2]。
 

第三個方法我是在MSDN上看到的,貌似很強大,因爲“屬性設置和樣式可以更改控件外觀的某些方面,但應用新模板可以完全更改控件的外觀。儘管模板不能更改控件類型的方法和事件,但它可以更改控件的外觀,具體取決於不同的狀態,如按下或禁用。使用 XAML 可以定義和設置控件的模板。每個控件都有一個可以替換爲自定義模板的默認模板。”。 這就是通過 ControlTemplate 來改變控件的外觀。

Cotrol Template 的設置有三種方式:

將 Template 本地設置成內聯定義的 ControlTemplate;

將 Template 本地設置成對定義資源的 ControlTemplate 的引用;

用 Style 設置 Template 和 定義 ControlTemplate;

下面分別是三種Silverlight控件樣式改變方式的定義方法: 

  1. < Button Content="Button1"> 
  2. < Button.Template> 
  3. < ControlTemplate TargetType="Button"> 
  4. < !--Define the ControlTemplate here.--> 
  5. < /ControlTemplate> 
  6. < /Button.Template> 
  7. < /Button>   
  8. < StackPanel> 
  9. < StackPanel.Resources> 
  10. < ControlTemplate TargetType="Button" 
    x:Key="newTemplate"> 
  11. < !--Define the ControlTemplate here.--> 
  12. < /ControlTemplate> 
  13. < /StackPanel.Resources> 
  14. < Button Template="{StaticResource 
    newTemplate}"
     Content="Button1"/> 
  15. < /StackPanel> 
  16. < StackPanel> 
  17. < StackPanel.Resources> 
  18. < Style TargetType="Button"
     x:Key="newTemplate">   
  19. < Setter Property="Template"> 
  20. < Setter.Value> 
  21. < ControlTemplate TargetType="Button"> 
  22. < !--Define the ControlTemplate here.--> 
  23. < /ControlTemplate> 
  24. < /Setter.Value> 
  25. < /Setter> 
  26. < /Style> 
  27. < /StackPanel.Resources> 
  28. < Button Style="{StaticResource
     newTemplate}"
     Content="Button1"/> 
  29. < /StackPanel> 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章