【WindowsPhone】--(二)主题、样式与模版
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
wp中的样式只能存放于应用程序的 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>中添加其他的,例如
<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>
后记--关于wp的一些很基础的东西,代码很少,先把理论弄明白了以后再深入实践,是给我自己积累的,也拿出来和朋友分享下。。。