高仿Windows Phone QQ登录界面实例代码

给 textbox文本框前添加图片

扩展phonetextbox:添加一个类“extentphonetextbox”继承 phonetextbox ，在“extentphonetextbox”类中添加属性项：

public class extentphonetextbox : phonetextbox
    {
        /// <summary>
        /// 文本框图片属性
        /// </summary>
        public static readonly dependencyproperty textheadimageproperty =
            dependencyproperty.register("textheadimage", typeof(imagesource), typeof(extentphonetextbox), new propertymetadata(null)
            );

        /// <summary>
        /// 文本框头图片
        /// </summary>
        public imagesource textheadimage
        {
            get { return base.getvalue(textheadimageproperty) as imagesource; }
            set { base.setvalue(textheadimageproperty, value); }
        }

        /// <summary>
        /// 文本图片宽度
        /// </summary>
        public double textheadimagewidth
        {
            get { return (double)getvalue(textheadimagewidthproperty); }
            set { setvalue(textheadimagewidthproperty, value); }
        }

        // using a dependencyproperty as the backing store for textheadimagewidth.  this enables animation, styling, binding, etc...
        public static readonly dependencyproperty textheadimagewidthproperty =
            dependencyproperty.register("textheadimagewidth", typeof(double), typeof(extentphonetextbox), new propertymetadata(null));

        /// <summary>
        /// 文本图片高度
        /// </summary>
        public double textheadimageheight
        {
            get { return (double)getvalue(textheadimageheightproperty); }
            set { setvalue(textheadimageheightproperty, value); }
        }

        // using a dependencyproperty as the backing store for textheadimageheight.  this enables animation, styling, binding, etc...
        public static readonly dependencyproperty textheadimageheightproperty =
            dependencyproperty.register("textheadimageheight", typeof(double), typeof(extentphonetextbox), new propertymetadata(null));
    }
}

extentphonetext 样式编辑：

全部样式如下：

<datatemplate x:key="controlheadertemplate">
            <textblock fontsize="{staticresource phonefontsizenormal}" fontfamily="{staticresource phonefontfamilynormal}" linestackingstrategy="blocklineheight" lineheight="23.333" margin="0,-9,0,0" textwrapping="wrap" text="{binding}">
                <textblock.rendertransform>
                    <translatetransform x="-1" y="4"/>
                </textblock.rendertransform>
            </textblock>
        </datatemplate>
        <toolkit:singledatatemplateselector x:key="controlheadertemplateselector" template="{staticresource controlheadertemplate}"/>
        <style x:key="extentphonetextboxstyle" targettype="extentctrs:extentphonetextbox">
            <setter property="fontfamily" value="{staticresource phonefontfamilynormal}"/>
            <setter property="fontsize" value="{staticresource phonefontsizemediumlarge}"/>
            <setter property="background" value="{staticresource phonetextboxbrush}"/>
            <setter property="foreground" value="{staticresource phonetextboxforegroundbrush}"/>
            <setter property="borderbrush" value="{staticresource phonetextboxbrush}"/>
            <setter property="selectionbackground" value="{staticresource phoneaccentbrush}"/>
            <setter property="selectionforeground" value="{staticresource phonetextboxselectionforegroundbrush}"/>
            <setter property="borderthickness" value="{staticresource phoneborderthickness}"/>
            <setter property="padding" value="6,0,6,4"/>
            <setter property="horizontalcontentalignment" value="left"/>
            <setter property="template">
                <setter.value>
                    <controltemplate targettype="extentctrs:extentphonetextbox">
                        <grid x:name="rootgrid" background="transparent">
                            <grid.rowdefinitions>
                                <rowdefinition height="auto"/>
                                <rowdefinition/>
                            </grid.rowdefinitions>
                            <visualstatemanager.visualstategroups>
                                <visualstategroup x:name="commonstates">
                                    <visualstate x:name="normal"/>
                                    <visualstate x:name="disabled">
                                        <storyboard>
                                            <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="header">
                                                <discreteobjectkeyframe keytime="0" value="{staticresource phonetextlowcontrastbrush}"/>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="mainborder">
                                                <discreteobjectkeyframe keytime="0" value="transparent"/>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="mainborder">
                                                <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentelement">
                                                <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/>
                                            </objectanimationusingkeyframes>
                                        </storyboard>
                                    </visualstate>
                                    <visualstate x:name="readonly">
                                        <storyboard>
                                            <objectanimationusingkeyframes storyboard.targetproperty="visibility" storyboard.targetname="mainborder">
                                                <discreteobjectkeyframe keytime="0">
                                                    <discreteobjectkeyframe.value>
                                                        <visibility>collapsed</visibility>
                                                    </discreteobjectkeyframe.value>
                                                </discreteobjectkeyframe>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="visibility" storyboard.targetname="readonlyborder">
                                                <discreteobjectkeyframe keytime="0">
                                                    <discreteobjectkeyframe.value>
                                                        <visibility>visible</visibility>
                                                    </discreteobjectkeyframe.value>
                                                </discreteobjectkeyframe>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="readonlyborder">
                                                <discreteobjectkeyframe keytime="0" value="{staticresource phonetextboxbrush}"/>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="readonlyborder">
                                                <discreteobjectkeyframe keytime="0" value="{staticresource phonetextboxbrush}"/>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentelement">
                                                <discreteobjectkeyframe keytime="0" value="{staticresource phonetextboxreadonlybrush}"/>
                                            </objectanimationusingkeyframes>
                                        </storyboard>
                                    </visualstate>
                                </visualstategroup>
                                <visualstategroup x:name="focusstates">
                                    <visualstate x:name="focused">
                                        <storyboard>
                                            <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="mainborder">
                                                <discreteobjectkeyframe keytime="0" value="{staticresource phonetextboxeditbackgroundbrush}"/>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="mainborder">
                                                <discreteobjectkeyframe keytime="0" value="{staticresource phonetextboxeditborderbrush}"/>
                                            </objectanimationusingkeyframes>
                                        </storyboard>
                                    </visualstate>
                                    <visualstate x:name="unfocused"/>
                                </visualstategroup>
                                <visualstategroup x:name="lengthindicatorstates">
                                    <visualstategroup.transitions>
                                        <visualtransition from="lengthindicatorhidden" to="lengthindicatorvisible">
                                            <storyboard>
                                                <objectanimationusingkeyframes storyboard.targetproperty="visibility" storyboard.targetname="lengthindicator">
                                                    <discreteobjectkeyframe keytime="0:0:0">
                                                        <discreteobjectkeyframe.value>
                                                            <visibility>visible</visibility>
                                                        </discreteobjectkeyframe.value>
                                                    </discreteobjectkeyframe>
                                                </objectanimationusingkeyframes>
                                                <objectanimationusingkeyframes storyboard.targetproperty="margin" storyboard.targetname="rootgrid">
                                                    <discreteobjectkeyframe keytime="0:0:0" value="0, 0, 0, 25"/>
                                                </objectanimationusingkeyframes>
                                                <objectanimationusingkeyframes storyboard.targetproperty="opacity" storyboard.targetname="lengthindicator">
                                                    <discreteobjectkeyframe keytime="0:0:0" value="1"/>
                                                </objectanimationusingkeyframes>
                                                <doubleanimation duration="0:0:0.350" to="27" storyboard.targetproperty="(uielement.rendertransform).(translatetransform.y)" storyboard.targetname="lengthindicator">
                                                    <doubleanimation.easingfunction>
                                                        <exponentialease exponent="6"/>
                                                    </doubleanimation.easingfunction>
                                                </doubleanimation>
                                            </storyboard>
                                        </visualtransition>
                                        <visualtransition from="lengthindicatorvisible" to="lengthindicatorhidden">
                                            <storyboard>
                                                <doubleanimation duration="0:0:0.350" to="0" storyboard.targetproperty="(uielement.rendertransform).(translatetransform.y)" storyboard.targetname="lengthindicator">
                                                    <doubleanimation.easingfunction>
                                                        <exponentialease exponent="6"/>
                                                    </doubleanimation.easingfunction>
                                                </doubleanimation>
                                                <objectanimationusingkeyframes storyboard.targetproperty="margin" storyboard.targetname="rootgrid">
                                                    <discreteobjectkeyframe keytime="0:0:0" value="0, 0, 0, 0"/>
                                                </objectanimationusingkeyframes>
                                                <objectanimationusingkeyframes storyboard.targetproperty="opacity" storyboard.targetname="lengthindicator">
                                                    <discreteobjectkeyframe keytime="0:0:0.350" value="0"/>
                                                </objectanimationusingkeyframes>
                                                <objectanimationusingkeyframes storyboard.targetproperty="visibility" storyboard.targetname="lengthindicator">
                                                    <discreteobjectkeyframe keytime="0:0:0.350">
                                                        <discreteobjectkeyframe.value>
                                                            <visibility>collapsed</visibility>
                                                        </discreteobjectkeyframe.value>
                                                    </discreteobjectkeyframe>
                                                </objectanimationusingkeyframes>
                                            </storyboard>
                                        </visualtransition>
                                    </visualstategroup.transitions>
                                    <visualstate x:name="lengthindicatorvisible">
                                        <storyboard>
                                            <objectanimationusingkeyframes storyboard.targetproperty="visibility" storyboard.targetname="lengthindicator">
                                                <discreteobjectkeyframe keytime="0:0:0">
                                                    <discreteobjectkeyframe.value>
                                                        <visibility>visible</visibility>
                                                    </discreteobjectkeyframe.value>
                                                </discreteobjectkeyframe>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="margin" storyboard.targetname="rootgrid">
                                                <discreteobjectkeyframe keytime="0:0:0" value="0, 0, 0, 25"/>
                                            </objectanimationusingkeyframes>
                                            <objectanimationusingkeyframes storyboard.targetproperty="opacity" storyboard.targetname="lengthindicator">
                                                <discreteobjectkeyframe keytime="0:0:0" value="1"/>
                                            </objectanimationusingkeyframes>
                                            <doubleanimation duration="0" to="27" storyboard.targetproperty="(uielement.rendertransform).(translatetransform.y)" storyboard.targetname="lengthindicator"/>
                                        </storyboard>
                                    </visualstate>
                                    <visualstate x:name="lengthindicatorhidden"/>
                                </visualstategroup>
                            </visualstatemanager.visualstategroups>
                            <toolkit:phonecontentcontrol x:name="header" contenttemplate="{templatebinding headertemplate}" contenttemplateselector="{staticresource controlheadertemplateselector}" content="{templatebinding header}" foreground="{staticresource phonetextmidcontrastbrush}" fontsize="{staticresource phonefontsizenormal}" fontfamily="{staticresource phonefontfamilynormal}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" margin="{staticresource phonehorizontalmargin}"/>
                            <border x:name="lengthindicatorborder" grid.row="1">
                                <textblock x:name="lengthindicator" cachemode="bitmapcache" foreground="{staticresource phonetextmidcontrastbrush}" fontsize="{staticresource phonefontsizenormal}" fontfamily="{staticresource phonefontfamilynormal}" horizontalalignment="right" margin="{staticresource phonemargin}" opacity="0" textalignment="right" visibility="collapsed" verticalalignment="bottom">
                                    <textblock.rendertransform>
                                        <translatetransform/>
                                    </textblock.rendertransform>
                                </textblock>
                            </border>
                            <border x:name="mainborder" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" margin="{staticresource phonetouchtargetoverhang}" grid.row="1">
                                <textblock x:name="placeholdertextelement" foreground="{staticresource phonetextboxreadonlybrush}" horizontalalignment="left" padding="{templatebinding padding}" text="{templatebinding placeholdertext}" verticalalignment="center" margin="40,2,0,2"/>
                            </border>
                            <border x:name="readonlyborder" borderbrush="{staticresource phonedisabledbrush}" borderthickness="{templatebinding borderthickness}" background="transparent" margin="{staticresource phonetouchtargetoverhang}" grid.row="1" visibility="collapsed"/>
                            <border borderbrush="transparent" borderthickness="{templatebinding borderthickness}" background="transparent" margin="{staticresource phonetouchtargetoverhang}" grid.row="1">
                                <stackpanel orientation="horizontal">
                                    <image source="{templatebinding textheadimage}" width="{templatebinding textheadimagewidth}" height="{templatebinding textheadimagewidth}" horizontalalignment="left" margin="12,2,1,2"/>
                                    <contentcontrol x:name="contentelement" borderthickness="0" cachemode="bitmapcache" horizontalcontentalignment="stretch" padding="{templatebinding padding}" verticalcontentalignment="stretch" verticalalignment="center"/>
                                </stackpanel>
                            </border>
                            <toolkitprimitives:tiltusercontrol horizontalalignment="right" margin="0,0,-12,0" grid.row="1" verticalalignment="bottom">
                                <border x:name="actioniconborder" background="transparent" height="72" width="96">
                                    <image x:name="actionicon" horizontalalignment="right" height="26" margin="0,0,36,0" source="{templatebinding actionicon}"/>
                                </border>
                            </toolkitprimitives:tiltusercontrol>
                            <textblock x:name="measurementtextblock" fontweight="{templatebinding fontweight}" fontstyle="{templatebinding fontstyle}" fontstretch="{templatebinding fontstretch}" fontsize="{templatebinding fontsize}" fontfamily="{templatebinding fontfamily}" ishittestvisible="false" margin="8" opacity="0" grid.row="1" textalignment="{templatebinding textalignment}" textwrapping="{templatebinding textwrapping}" text="{templatebinding text}"/>
                        </grid>
                    </controltemplate>
                </setter.value>
            </setter>
        </style>

ui部局xaml代码如下：

<grid x:name="contentpanel"
            margin="0,162,24,19"
            grid.rowspan="2">

            <extentctrs:extentphonetextbox  margin="12,10,12,0"
                textwrapping="wrap"
                verticalalignment="top"
                placeholdertext="qq号码/手机/邮箱"
                height="80"
                background="white" textheadimage="/assets/qqaccount.wvga.png" style="{staticresource extentphonetextboxstyle}" textheadimageheight="22" textheadimagewidth="24" />
            <extentctrs:extentphonetextbox  margin="12,107,12,0"
                textwrapping="wrap"
                verticalalignment="top"
                placeholdertext="点击输入qq密码"
                height="80"
                background="white" style="{staticresource extentphonetextboxstyle}" textheadimage="/assets/password.wvga.png" textheadimageheight="22" textheadimagewidth="24" />

            <toolkitprimitives:phonepasswordboxcheckbox content="记住密码"
                horizontalalignment="left"
                margin="12,195,0,0"
                verticalalignment="top"
                horizontalcontentalignment="left" />
            <toolkitprimitives:phonepasswordboxcheckbox content="隐身登录"
                horizontalalignment="left"
                margin="224,195,0,0"
                verticalalignment="top" />
            <toolkitprimitives:phonepasswordboxcheckbox content="静音登录"
                horizontalalignment="left"
                margin="12,272,0,0"
                verticalalignment="top" />
            <hyperlinkbutton content="注册帐号"
                horizontalalignment="left"
                margin="12,349,0,0"
                verticalalignment="top"
                horizontalcontentalignment="left" />
            <hyperlinkbutton content="找回密码"
                horizontalalignment="left"
                margin="12,385,0,0"
                verticalalignment="top"
                horizontalcontentalignment="left" />

        </grid>
运行效果如下：