【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的一些很基础的东西,代码很少,先把理论弄明白了以后再深入实践,是给我自己积累的,也拿出来和朋友分享下。。。

posted @ 2012-11-06 09:48  kefira  阅读(878)  评论(0编辑  收藏  举报