WP7入门 -- （二）主题、样式与模版

主题、样式与模版
1、主题 -- theme
theme有两项：Background、Accent color
（1）获取主题背景
主题文件以XAML文件形式来描述并存放的，在C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Design下的Theme Resources.xaml，它也是Framework Element的一个对象，开发人员可以访问。
（2）获取主题颜色
通过系统的资源属性PhoneAccentBrush访问 accent colors 的值，可以在XAML代码中直接访问accent colors，代码如：<TextBlock Foreground="{Static Resource PhoneAccentBrush}".../>，也可以用托管代码访问，代码如：
(Brush)Application.Current.Resources["PhoneAccentBrush"];//是通过资源字典进行获取的，其中的Resources可以更多的获取系统内的资源元素，包括颜色值、字体等。
2、样式 -- style
wp7中的样式只能存放于应用程序的Resources里或当前的XAML文档的Resources里，用于更改页面的元素是性质，从而使原色拥有更统一的外观，更统一的属性值设置方式，使程序维护更加简单。
（1）样式的应用范围
指的是该样式能够起作用的文件代码区域，将样式定义在当前文档的<Phone:PhoneApplication.Resources>中时，该样式只会对当前文件有效，文件下所有的FrameworkElement均可以引用该样式，但是当需要改文件都可以被项目里的XAML文件元素引用时，必须将样式代码定义在应用程序配置文件App.xaml中。下面以Image为例：
1> 在当前文件MainPage.xaml中：
<phone:PhoneApplicationPage.Resources>
<Style x:Key="Image1" TargetType="Image"> //x:Key="" 表明了样式的名称；TargetType="" 指明了该样式的使用类型是什么
<Setter Property="Width" Value="180"/> //<Setter ...>中设置统一的属性值
......
<Setter Property="Stretch" Value="Fill"/>
</Style>
</phone:PhoneApplicationPage.Resources>
然后在Image控件的属性中写入：
<Image Margin="21,46,0,0" Name="p1" Style="{StaticResource Image1}" Source="/wp7实验3;component/Images/12.png"/>
<Image Margin="218,50,0,0" Name="p2" Style="{StaticResource Image1}" Source="/wp7实验3;component/Images/11.png"/>
....
其中的p1和p2在样式中已经设置好的属性相同，其他的属性都可以再自行设置。
2> 在App.xaml中，将<Style ...>...</Style>写入<Application.Resource></Application.Resource>中，就可以被该项目里的所有XAML文件元素所引用了。
（2）也可以使用Expression Blend 4 for Windows Phone 创建样式，EBlend和Adobe的PS差不多的，截图会更清晰的明白，这里就不多写了。。。
延伸------样式继承
样式能够通过继承过程来加强或更改其他样式，只需要设置Style的BasedOn属性为之前已经定义过的样式就行，如：
<Style x:Key="A1" TargetType="Button">....</Style>
<Style x:Key="B1" TargetType="Button">
...
BasedOn="{StaticeResource A1}"
<Setter Property="HorizontalAlignment" Value="Left" /> ...
</Style>
<Style x:Key="B2" TargetType="Button">
...
BasedOn="{StaticeResource A1}"
<Setter Property="HorizontalAlignment" Value="Right" /> ...
</Style>

..........
解释：在你写的引用的代码中可以引用上述B1、B2的两种不同的样式。
3、模版 -- Template
模版是通过设置、修改元素的属性以达到定制控件的外观，可以彻底的改变控件的外观、填充等属性，并且能够全部保留控件的自有属性和事件。与样式不同的是，比如将一个Button做成一个图片类型的控件，利用样式很难做到，但模版就很方便了。
（1）使用模版
Template和Style的应用范围是一样的，只是有定义的差别，Template在MainPage.xaml中的代码如下：
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="ImageControlTemplate1" TargetType="Image"> //ControlTemplate表示创建一个模版资源
<Grid> //TargetType表示模版的类型
.... // 定义模版属性和属性值，比如可以添加一个Image控件。。
</Grid>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
Template和Style的区别还有：Style是以Setter集合定制控件属性的，而Template是通过节点元素来覆盖控件属性的。
（2）也可以使用Expression Blend 4 for Windows Phone 创建模版喔。。。
4、在样式中使用模版
通过样式的<Setter Property="Template">的方式来指定模版，这样就可以在一个控件中既使用样式也使用模版了，在一些复杂的项目中将会为程序的维护提供便利。
以给Button添加一个Image为例：
<phone:PhoneApplicationPage.Resources>
<Style x:Key="Button1" TargetType="Button"> //x:Key="" 表明了样式的名称；TargetType="" 指明了该样式的使用类型是什么
<Setter Property="Width" Value="180"/> //<Setter ...>中设置统一的属性值
......
<Setter Property="Template"> //这里很重要，指定集合属性值为自定义模版代码，这样能够为样式所引用
<Setter.Value> // 下面为模版
<ControlTemplate TargetType="Image">
<Grid>
<Image Source="/Img;component/png/1.png" Stretch="Fill"> .........
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
定义之后使用时只需要在Button中指定Style属性值，不需要设置Template属性值，就可以讲模版套用在该Button控件上了。。
延伸---
也可以在<Setter Property="?"></Setter>中添加其他的，例如
<Setter Property="Foreground">
<Setter.Value> //下面为渐变画刷
<LinearGradientBrush>
<GradientStop Offset="0" Color="Pink">
....
</LinearGradientBrush>
</Setter.Value>
</Setter>

后记--我啊，一个连菜鸟都称不上的小麻雀，写下的一些东西很基础，代码很少，先把理论弄明白了以后再深入实践，是给我自己积累的，也拿出来给friends分享下。。。

 

 

http://www.cnblogs.com/kefira/archive/2012/11/06/WP.html