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