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

原文地址:https://www.cnblogs.com/zziss/p/2759095.html