Windows phone 7之樣式與模板

就像網頁配合CSS一樣，XAML元素結合Style可以使Silverlight頁面變得絢麗多彩。Silverlight的最大吸引力就是無論你想做什麼格式的，什麼效果的頁面你都可以實現，絕對沒有不可能。想使頁面變得絢麗，簡單Style就可以，想使頁面變得特性十足或是千變萬化，那就學好模板，想要使頁面動起來，Storyboard可以幫助你。
樣式(Style)、模板(Template)很少直接定義在控件或者頁面元素內部，一般都定義在外部資源文件中，這樣不但便於維護，更便於重用。什麼叫資源，凡是放在頁面或控件Resource節點下，或是放在獨立資源文件中的ResourceDictionary節點下的全是資源，Style和Template都屬於資源。
將Style定義在App.xaml文件中，看下面的代碼

1. <Application
   
2. 
   
3. x:Class="StyleAndTemplate.App"
   
4. 
   
5. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   
6. 
   
7. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   
8. 
   
9. xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   
10. 
    
11. xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
    
12. <!--Application Resources-->
    
13. 
    
14. <Application.Resources>
    
15. 
    
16. <Style x:Key="MyTextBlock" TargetType="TextBlock">
    
17. 
    
18. <Setter Property="FontSize" Value="50"/>
    
19. 
    
20. <Setter Property="Foreground" Value="Blue"/>
    
21. 
    
22. </Style>
    
23. 
    
24. </Application.Resources>
    
25. <Application.ApplicationLifetimeObjects>
    
26. 
    
27. <!--Required object that handles lifetime events for the application-->
    
28. 
    
29. <shell:PhoneApplicationService
    
30. 
    
31. Launching="Application_Launching" Closing="Application_Closing"
    
32. 
    
33. Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    
34. 
    
35. </Application.ApplicationLifetimeObjects>
    
36. </Application>

複製代碼

如上面的代碼，只要將Style寫在Application.Resources節點下
將Style定義在單獨的資源文件中，首先需要在項目中添加一個xaml後綴的文件(MyResource.xaml)，在文件中寫入如下代碼

1. <ResourceDictionary
   
2. 
   
3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   
4. 
   
5. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   
6. 
   
7. xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   
8. 
   
9. xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
   
10. 
    
11. 
    
12. 
    
13. <Style x:Key="MyTextBlock" TargetType="TextBlock">
    
14. 
    
15. <Setter Property="FontSize" Value="50"/>
    
16. 
    
17. <Setter Property="Foreground" Value="Blue"/>
    
18. 
    
19. </Style>
    
20. 
    
21. </ResourceDictionary>

複製代碼

看上面的文件，ResourceDictionary節點寫添加i幾個命名空間，前三個是必須的，第一個字默認命名空間，資源的象徵，第二個用來定義唯一標示，沒有他，無法定義和引用資源，第三個是引入控件，用於填入TargetType屬性(下面說明他的重要性)。定義好了資源文件還需要在App.xaml文件中註冊該資源文件，在App.xaml中寫入如下代碼

1. <Application.Resources>
   
2. 
   
3. <ResourceDictionary>
   
4. 
   
5. <ResourceDictionary.MergedDictionaries>
   
6. 
   
7. <ResourceDictionary Source="MyResource.xaml"/>
   
8. 
   
9. </ResourceDictionary.MergedDictionaries>
   
10. 
    
11. </ResourceDictionary>
    
12. 
    
13. </Application.Resources>

複製代碼

這樣在頁面中，就可以使用該Style了，MainPage.xaml中添加一個TextBlock，並給他添加樣式，寫法：<TextBlock Text="MyText" Style="{StaticResource MyTextBlock}"/>，StaticResource是靜態資源的標示，所有定義在頁面級、App.xaml中或者定義在外部資源中的都是靜態資源，還有一個RelativeSource，是定義在某元素內部時，父子控件之間相互使用的資源，沒人使用，不用研究。
上述兩種方式運行效果是一樣的，如下圖所示

2012-5-2 18:15:52 上傳

下載附件 (8.91 KB)

樣式(Sytle)
Style主要包含兩種屬性和一個子節點
x:Key屬性是Style的唯一標示，必須有且不能重複，爲控件設置Style時使用，格式Style="{StaticResource Key}"
TargetType屬性，該屬性標示Style應用於何種控件，所有Style只用應用於一種控件，並不是所有的資源都是這樣，比如SolidColorBrush，可以用於任何控件的顏色屬性。這個屬性也是必須有的，加入上面說的第三個命名空間，就可使在文件中使用WP7的基礎弓箭了，這樣輸入TargetType時就會自動提示，如果那個命名空間，就不能使用WP7基礎控件，所以填入內容使也會報錯，這就是他必要的原因，如果使用Toolkit，只要將應用添加項目中，並在資源文件中加以命名空間就行了。
<Setter>子節點，有人說這也是Style的一個屬性，我不反對，但是他的確是只能以子節點的方式使用。
Setter可是設置控件個任何屬性，也就是一個控件可是完全由Style定製。Setter有兩個屬性，Property,用來填入屬性名，Value，用來填入屬性值，也就是說一個Setter設置一個屬性。
上述說的三個屬性時Style的必須屬性，缺一不可，x:Key是所有資源的必須屬性。
不但可以使用Style爲控件定義樣式，一些任何控件都具有的屬性可以放在Resource根節點下，而不必放在Style的Setter中，比如SolidColorBrush可以設置顏色、FontFamily可以設置字體，他們不放在Style中。
樣式是具有優先級的，如果設置使用Style和屬性設置重複後，只有一個起作用，那麼誰起作用呢，一般分三個等級，1、默認樣式，沒有爲控件設置任何樣式，則使用默認樣式，2、Style設置的樣式，設置Style後將覆蓋默認樣式，3、屬性中直接設置，這種方式優先級最高，他優先起作用。
至於Style都可以設置哪些屬性，在TargetType之後，在你寫Setter時，會有自動提示，只有找到自己想要的就行了。
簡單說一下模板(Template)
模板有很多種，我只說兩種萬能模板，其他的，童鞋們自己體會吧，都是一樣的。什麼是萬能模板，就是可以應用到任何可以使用模板的控件上
DataTemplate
這個模板可以說是萬能的，可以用來設置控件的內容(ContentTemplate)，也可以設置佈局(ItemTemplate),下面以Button爲例說一下他的用法
在資源中定義一個DataTemplate

1. <DataTemplate x:Key="DataKey">
   
2. 
   
3. <StackPanel>
   
4. 
   
5. <TextBlock Text="Templage"/>
   
6. 
   
7. <TextBlock Text="I'm a Template"/>
   
8. 
   
9. </StackPanel>
   
10. 
    
11. </DataTemplate>

複製代碼

在頁面中放置一個Button：
<Button Margin="10,120,0,0" VerticalAlignment="Top" Width="259" ContentTemplate="{StaticResource DataKey}">
運行效果如下

2012-5-2 18:15:52 上傳

下載附件 (13.58 KB)

看到模板的作用了嗎，這就是我之前說的爲什麼silverlight是變化無窮的，因爲你可以用一個模板將空間做成任何你想要的樣子
ControlTemplate
ControlTemplate一般用Gid開定義控件的佈局，用VisualState控制狀態，一般是動畫，ContentControl用來顯示Content
我們爲了簡單，從Blend複製一個Button的完整Style

1. <Style x:Key="MyButtonStyle" TargetType="Button">
   
2. 
   
3. <Setter Property="Background" Value="Transparent"/>
   
4. 
   
5. <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
   
6. 
   
7. <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
   
8. 
   
9. <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
   
10. 
    
11. <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    
12. 
    
13. <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
    
14. 
    
15. <Setter Property="Padding" Value="10,3,10,5"/>
    
16. 
    
17. <Setter Property="Template">
    
18. 
    
19. <Setter.Value>
    
20. 
    
21. <ControlTemplate TargetType="Button">
    
22. 
    
23. <Grid Background="Transparent">
    
24. 
    
25. <VisualStateManager.VisualStateGroups>
    
26. 
    
27. <VisualStateGroup x:Name="CommonStates">
    
28. 
    
29. <VisualState x:Name="Normal"/>
    
30. 
    
31. <VisualState x:Name="MouseOver"/>
    
32. 
    
33. <VisualState x:Name="Pressed">
    
34. 
    
35. <Storyboard>
    
36. 
    
37. 
    
38. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
    
39. Storyboard.TargetName="ContentContainer">
    
40. 
    
41. <DiscreteObjectKeyFrame
    
42. KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
    
43. 
    
44. </ObjectAnimationUsingKeyFrames>
    
45. 
    
46. 
    
47. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
    
48. Storyboard.TargetName="ButtonBackground">
    
49. 
    
50. <DiscreteObjectKeyFrame
    
51. KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
    
52. 
    
53. </ObjectAnimationUsingKeyFrames>
    
54. 
    
55. 
    
56. <ObjectAnimationUsingKeyFrames
    
57. Storyboard.TargetProperty="BorderBrush"
    
58. Storyboard.TargetName="ButtonBackground">
    
59. 
    
60. <DiscreteObjectKeyFrame
    
61. KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
    
62. 
    
63. </ObjectAnimationUsingKeyFrames>
    
64. 
    
65. </Storyboard>
    
66. 
    
67. </VisualState>
    
68. 
    
69. <VisualState x:Name="Disabled">
    
70. 
    
71. <Storyboard>
    
72. 
    
73. 
    
74. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
    
75. Storyboard.TargetName="ContentContainer">
    
76. 
    
77. <DiscreteObjectKeyFrame
    
78. KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
    
79. 
    
80. </ObjectAnimationUsingKeyFrames>
    
81. 
    
82. 
    
83. <ObjectAnimationUsingKeyFrames
    
84. Storyboard.TargetProperty="BorderBrush"
    
85. Storyboard.TargetName="ButtonBackground">
    
86. 
    
87. <DiscreteObjectKeyFrame
    
88. KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
    
89. 
    
90. </ObjectAnimationUsingKeyFrames>
    
91. 
    
92. 
    
93. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
    
94. Storyboard.TargetName="ButtonBackground">
    
95. 
    
96. <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
    
97. 
    
98. </ObjectAnimationUsingKeyFrames>
    
99. 
    
100. </Storyboard>
     
101. 
     
102. </VisualState>
     
103. 
     
104. </VisualStateGroup>
     
105. 
     
106. </VisualStateManager.VisualStateGroups>
     
107. 
     
108. <Border x:Name="ButtonBackground"
     
109. BorderBrush="{TemplateBinding BorderBrush}"
     
110. BorderThickness="{TemplateBinding BorderThickness}"
     
111. Background="{TemplateBinding Background}" CornerRadius="0"
     
112. Margin="{StaticResource PhoneTouchTargetOverhang}">
     
113. 
     
114. <ContentControl x:Name="ContentContainer"
     
115. ContentTemplate="{TemplateBinding ContentTemplate}"
     
116. Content="{TemplateBinding Content}" Foreground="{TemplateBinding
     
117. Foreground}" HorizontalContentAlignment="{TemplateBinding
     
118. HorizontalContentAlignment}" Padding="{TemplateBinding Padding}"
     
119. VerticalContentAlignment="{TemplateBinding
     
120. VerticalContentAlignment}"/>
     
121. 
     
122. </Border>
     
123. 
     
124. </Grid>
     
125. 
     
126. </ControlTemplate>
     
127. 
     
128. </Setter.Value>
     
129. 
     
130. </Setter>
     
131. 
     
132. </Style>

複製代碼

這是系統默認的Button樣式，我沒設置控件的樣式時，可以修改系統默認的樣式，這樣效率更高些
我們看到Style中包含一個ControlTemplate，VisualState設置了點擊時的樣式和禁用時的樣式，加上默認的樣式，默認Button按鈕有三種形態，現在我改變Pressed的狀態動畫，改變背景色爲Red，將這個Style設置給一個Button

1. <VisualState x:Name="Pressed">
   
2. 
   
3. <Storyboard>
   
4. 
   
5. 
   
6. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
   
7. Storyboard.TargetName="ContentContainer">
   
8. 
   
9. <DiscreteObjectKeyFrame
   
10. KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
    
11. 
    
12. </ObjectAnimationUsingKeyFrames>
    
13. 
    
14. 
    
15. <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
    
16. Storyboard.TargetName="ButtonBackground">
    
17. 
    
18. <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
    
19. 
    
20. </ObjectAnimationUsingKeyFrames>
    
21. 
    
22. 
    
23. <ObjectAnimationUsingKeyFrames
    
24. Storyboard.TargetProperty="BorderBrush"
    
25. Storyboard.TargetName="ButtonBackground">
    
26. 
    
27. <DiscreteObjectKeyFrame
    
28. KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
    
29. 
    
30. </ObjectAnimationUsingKeyFrames>
    
31. 
    
32. </Storyboard>
    
33. 
    
34. </VisualState>

複製代碼

運行程序，點擊Content爲button的按鈕，效果如下

2012-5-2 18:15:51 上傳

下載附件 (18.6 KB)

上面我簡單的改變了一下Pressed狀態的動畫，如果你想得到更加豐富的效果，可以自己定製。
ContentControl是用來顯示內用的控件，所有繼承自ContentControl的控件模板中都有這個屬性，沒有就無法顯示內容了，只剩個空模板了。
在給初學者說一下TemplateBinding，他是用來綁定屬性的，如ContentControl中的Content="{TemplateBinding Content}"，意思是ContentControl的Content屬性顯示的是控件的Content屬性的值，也就是Button的值"button"。他跟Binding不一樣，Binding是綁定的數據，如一個對象中的屬性。Person.Name,後面章節馬上介紹Binding，童鞋們別急。

大家如果認爲我寫的內容有用的話就幫頂一下，點一下推薦，你們的支持就是我的動力！！！先謝謝了！！！
想看比較深入的技術的童鞋別急，因爲我這基礎篇已經寫了三分之二了，我儘量在五篇左右將之結束，然後進入開發技巧章節，給他家分享使用的開發技術。

作者 董賀超

http://hlu019001.chinaw3.com/thread-2381-1.html