HOWTO change ToggleSwitch’s Style on WP7

update:2011-08-13 以下都是扯淡.其实直接引用控件模板就ok了.直接不知道所以走了弯路.

如何修改toolkit里的toggleswitch控件样式

在msn的项目中需要修改toggleswitch的样式. 一开始以为无法实现.后来看到qq 的wp7 版本是实现了的.尝试了两天,找了各种资料.最后还是在层上实现了.

1.download source code from https://silverlight.svn.codeplex.com/svn/release/windowsphone7
1.从 https://silverlight.svn.codeplex.com/svn/release/windowsphone7下载toolkit的源码

2.find generic.xaml in wp7 toolkit\release\windowsphone7\microsoft.phone.controls.toolkit\themes
2.在toolkit\release\windowsphone7\microsoft.phone.controls.toolkit\themes目录找到generic.xaml文件

3.chang style in primitives:toggleswitchbutton node
3.修改toogleswitchbutton节点的样式

4.rebuild the project,and copy microsoft.phone.controls.toolkit.dll to your solution
4.重新编译microsoft.phone.controls.toolkit项目.复制dll到你的工程

follow this map
下面这张图演示了节点和按钮的对应关系

exampl

    <style targettype="primitives:toggleswitchbutton">
        <setter property="background" value="{staticresource phonebackgroundbrush}"/>
        <setter property="istabstop" value="false"/>
        <setter property="switchforeground" value="{staticresource phoneaccentbrush}"/>
        <setter property="template">
            <setter.value>
                <controltemplate targettype="primitives:toggleswitchbutton">
                    <!-- 最外层border -->
                    <border
                        x:name="root"
                        borderbrush="{templatebinding borderbrush}"
                        borderthickness="{templatebinding borderthickness}"
                        cachemode="bitmapcache"
                        opacity="{templatebinding opacity}"
                        padding="{templatebinding padding}">
                        <visualstatemanager.visualstategroups>
                            <visualstategroup x:name="commonstates">
                                <visualstate x:name="normal"/>
                                <visualstate x:name="disabled">
                                    <storyboard>
                                        <coloranimation
                                            storyboard.targetname="switchbottom"
                                            storyboard.targetproperty="(grid.background).(solidcolorbrush.color)"
                                            duration="0"
                                            to="{staticresource phoneforegroundcolor}"/>
                                        <coloranimation
                                            storyboard.targetname="thumbcenter"
                                            storyboard.targetproperty="(border.background).(solidcolorbrush.color)"
                                            duration="0"
                                            to="{staticresource phoneforegroundcolor}"/>
                                        <doubleanimation
                                            storyboard.targetname="root"
                                            storyboard.targetproperty="opacity"
                                            duration="0"
                                            to="0.3"/>
                                    </storyboard>
                                </visualstate>
                            </visualstategroup>
                            <visualstategroup x:name="checkstates">
                                <visualstategroup.transitions>
                                    <visualtransition generatedduration="0:0:0.05" to="unchecked"/>
                                    <visualtransition generatedduration="0:0:0.05" to="checked"/>
                                </visualstategroup.transitions>
                                <visualstate x:name="checked">
                                    <storyboard>
                                        <doubleanimation
                                            storyboard.targetname="backgroundtranslation"
                                            storyboard.targetproperty="(translatetransform.x)"
                                            duration="0"
                                            to="68">
                                            <doubleanimation.easingfunction>
                                                <exponentialease exponent="15" easingmode="easeout"/>
                                            </doubleanimation.easingfunction>
                                        </doubleanimation>
                                        <doubleanimation
                                            storyboard.targetname="thumbtranslation"
                                            storyboard.targetproperty="(translatetransform.x)"
                                            duration="0"
                                            to="68">
                                            <doubleanimation.easingfunction>
                                                <exponentialease exponent="15" easingmode="easeout"/>
                                            </doubleanimation.easingfunction>
                                        </doubleanimation>
                                    </storyboard>
                                </visualstate>
                                <visualstate x:name="dragging"/>
                                <visualstate x:name="unchecked">
                                    <storyboard>
                                        <doubleanimation
                                            storyboard.targetname="backgroundtranslation"
                                            storyboard.targetproperty="(translatetransform.x)"
                                            duration="0"
                                            to="0"/>
                                        <doubleanimation
                                            storyboard.targetname="thumbtranslation"
                                            storyboard.targetproperty="(translatetransform.x)"
                                            duration="0"
                                            to="0"/>
                                    </storyboard>
                                </visualstate>
                            </visualstategroup>
                        </visualstatemanager.visualstategroups>
                        <grid x:name="switchroot" background="transparent" height="95" width="136">
                            <grid x:name="switchtrack" width="88">
                                <grid x:name="switchbottom" background="{templatebinding switchforeground}" height="32">
                                    <!--  开关里面的填充色 -->
                                    <rectangle
                                        x:name="switchbackground"
                                        fill="white"
                                        width="76"
                                        height="20"
                                        horizontalalignment="center"
                                        verticalalignment="center">
                                        <rectangle.rendertransform>
                                            <translatetransform x:name="backgroundtranslation"/>
                                        </rectangle.rendertransform>
                                    </rectangle>
                                    <!-- 这个是开关外层边框 -->
                                    <border borderbrush="#ff48b6eb" borderthickness="2">
                                        <!-- 开关里面隔离用的边框 -->
                                        <border borderbrush="white" borderthickness="4"/>
                                    </border>
                                </grid>
                                <!-- 右边或左边隔离作用的边框 -->
                                <border
                                    x:name="switchthumb"
                                    borderbrush="white"
                                    borderthickness="4,0"
                                    margin="-4,0"
                                    width="28"
                                    height="36"
                                    horizontalalignment="left">
                                    <border.rendertransform>
                                        <translatetransform x:name="thumbtranslation"/>
                                    </border.rendertransform>
                                    <!-- 滑块边框颜色 -->
                                    <border
                                        x:name="thumbcenter"
                                        borderbrush="#ff48b6eb"
                                        borderthickness="2"
                                        background="white"/><!-- 滑块背景色 -->
                                </border>
                            </grid>
                        </grid>
                    </border>
                </controltemplate>
            </setter.value>
        </setter>
    </style>