Windows phone 7之样式与模板

就像网页配合css一样，xaml元素结合style可以使silverlight页面变得绚丽多彩。silverlight的最大吸引力就是无论你想做什么格式的，什么效果的页面你都可以实现，绝对没有不可能。想使页面变得绚丽，简单style就可以，想使页面变得特性十足或是千变万化，那就学好模板，想要使页面动起来，storyboard可以帮助你。
样式(style)、模板(template)很少直接定义在控件或者页面元素内部，一般都定义在外部资源文件中，这样不但便于维护，更便于重用。什么叫资源，凡是放在页面或控件resource节点下，或是放在独立资源文件中的resourcedictionary节点下的全是资源，style和template都属于资源。
将style定义在app.xaml文件中，看下面的代码
<application
    x:class="styleandtemplate.app"
    xmlns=""      
    xmlns:x=""
    xmlns:phone="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone"
    xmlns:shell="clr-namespace:microsoft.phone.shell;assembly=microsoft.phone">

    <!--application resources-->
    <application.resources>
        <style x:key="mytextblock" targettype="textblock">
            <setter property="fontsize" value="50"/>
            <setter property="foreground" value="blue"/>
        </style>
    </application.resources>

    <application.applicationlifetimeobjects>
        <!--required object that handles lifetime events for the application-->
        <shell:phoneapplicationservice
            launching="application_launching" closing="application_closing"
            activated="application_activated" deactivated="application_deactivated"/>
    </application.applicationlifetimeobjects>

</application>
如上面的代码，只要将style写在application.resources节点下
将style定义在单独的资源文件中，首先需要在项目中添加一个xaml后缀的文件(myresource.xaml)，在文件中写入如下代码
<resourcedictionary
    xmlns=""      
    xmlns:x=""
    xmlns:phone="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone"
    xmlns:shell="clr-namespace:microsoft.phone.shell;assembly=microsoft.phone">
   
    <style x:key="mytextblock" targettype="textblock">
        <setter property="fontsize" value="50"/>
        <setter property="foreground" value="blue"/>
    </style>
</resourcedictionary>
看上面的文件，resourcedictionary节点写添加i几个命名空间，前三个是必须的，第一个字默认命名空间，资源的象征，第二个用来定义唯一标示，没有他，无法定义和引用资源，第三个是引入控件，用于填入targettype属性(下面说明他的重要性)。定义好了资源文件还需要在app.xaml文件中注册该资源文件，在app.xaml中写入如下代码
<application.resources>
        <resourcedictionary>
            <resourcedictionary.mergeddictionaries>
                <resourcedictionary source="myresource.xaml"/>
            </resourcedictionary.mergeddictionaries>
        </resourcedictionary>
    </application.resources>
这样在页面中，就可以使用该style了，mainpage.xaml中添加一个textblock，并给他添加样式，写法：<textblock text="mytext" style="{staticresource mytextblock}"/>，staticresource是静态资源的标示，所有定义在页面级、app.xaml中或者定义在外部资源中的都是静态资源，还有一个relativesource，是定义在某元素内部时，父子控件之间相互使用的资源，没人使用，不用研究。
上述两种方式运行效果是一样的，如下图所示

 


 

样式(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
<datatemplate x:key="datakey">
        <stackpanel>
            <textblock text="templage"/>
            <textblock text="i'm a template"/>
        </stackpanel>
    </datatemplate>
在页面中放置一个button：
<button margin="10,120,0,0" verticalalignment="top" width="259" contenttemplate="{staticresource datakey}">
运行效果如下

 


 

看到模板的作用了吗，这就是我之前说的为什么silverlight是变化无穷的，因为你可以用一个模板将空间做成任何你想要的样子
controltemplate
controltemplate一般用gid开定义控件的布局，用visualstate控制状态，一般是动画，contentcontrol用来显示content
我们为了简单，从blend复制一个button的完整style
<style x:key="mybuttonstyle" targettype="button">
        <setter property="background" value="transparent"/>
        <setter property="borderbrush" value="{staticresource phoneforegroundbrush}"/>
        <setter property="foreground" value="{staticresource phoneforegroundbrush}"/>
        <setter property="borderthickness" value="{staticresource phoneborderthickness}"/>
        <setter property="fontfamily" value="{staticresource phonefontfamilysemibold}"/>
        <setter property="fontsize" value="{staticresource phonefontsizemediumlarge}"/>
        <setter property="padding" value="10,3,10,5"/>
        <setter property="template">
            <setter.value>
                <controltemplate targettype="button">
                    <grid background="transparent">
                        <visualstatemanager.visualstategroups>
                            <visualstategroup x:name="commonstates">
                                <visualstate x:name="normal"/>
                                <visualstate x:name="mouseover"/>
                                <visualstate x:name="pressed">
                                    <storyboard>
                                        <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentcontainer">
                                            <discreteobjectkeyframe keytime="0" value="{staticresource phonebackgroundbrush}"/>
                                        </objectanimationusingkeyframes>
                                        <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="buttonbackground">
                                            <discreteobjectkeyframe keytime="0" value="{staticresource phoneforegroundbrush}"/>
                                        </objectanimationusingkeyframes>
                                        <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="buttonbackground">
                                            <discreteobjectkeyframe keytime="0" value="{staticresource phoneforegroundbrush}"/>
                                        </objectanimationusingkeyframes>
                                    </storyboard>
                                </visualstate>
                                <visualstate x:name="disabled">
                                    <storyboard>
                                        <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentcontainer">
                                            <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/>
                                        </objectanimationusingkeyframes>
                                        <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="buttonbackground">
                                            <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/>
                                        </objectanimationusingkeyframes>
                                        <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="buttonbackground">
                                            <discreteobjectkeyframe keytime="0" value="transparent"/>
                                        </objectanimationusingkeyframes>
                                    </storyboard>
                                </visualstate>
                            </visualstategroup>
                        </visualstatemanager.visualstategroups>
                        <border x:name="buttonbackground" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" cornerradius="0" margin="{staticresource phonetouchtargetoverhang}">
                            <contentcontrol x:name="contentcontainer" contenttemplate="{templatebinding contenttemplate}" content="{templatebinding content}" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" padding="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}"/>
                        </border>
                    </grid>
                </controltemplate>
            </setter.value>
        </setter>
    </style>
这是默认的button样式，我没设置控件的样式时，可以修改系统默认的样式，这样效率更高些
我们看到style中包含一个controltemplate，visualstate设置了点击时的样式和禁用时的样式，加上默认的样式，默认button按钮有三种形态，现在我改变pressed的状态动画，改变背景色为red，将这个style设置给一个button
<visualstate x:name="pressed">
                                    <storyboard>
                                        <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentcontainer">
                                            <discreteobjectkeyframe keytime="0" value="{staticresource phonebackgroundbrush}"/>
                                        </objectanimationusingkeyframes>
                                        <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="buttonbackground">
                                            <discreteobjectkeyframe keytime="0" value="red"/>
                                        </objectanimationusingkeyframes>
                                        <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="buttonbackground">
                                            <discreteobjectkeyframe keytime="0" value="{staticresource phoneforegroundbrush}"/>
                                        </objectanimationusingkeyframes>
                                    </storyboard>
                                </visualstate>
运行程序，点击content为button的按钮，效果如下

 


 

上面我简单的改变了一下pressed状态的动画，如果你想得到更加丰富的效果，可以自己定制。

contentcontrol是用来显示内用的控件，所有继承自contentcontrol的控件模板中都有这个属性，没有就无法显示内容了，只剩个空模板了。

在给初学者说一下templatebinding，他是用来绑定属性的，如contentcontrol中的content="{templatebinding content}"，意思是contentcontrol的content属性显示的是控件的content属性的值，也就是button的值"button"。他跟binding不一样，binding是绑定的数据，如一个对象中的属性。person.name,后面章节马上介绍binding，童鞋们别急。

 

大家如果认为我写的内容有用的话就帮顶一下，点一下推荐，你们的支持就是我的动力！！！先谢谢了！！！

想看比较深入的技术的童鞋别急，因为我这基础篇已经写了三分之二了，我尽量在五篇左右将之结束，然后进入开发技巧章节，给他家分享使用的开发技术。

 

作者 董贺超