高仿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>
运行效果如下：

时间： 2024-09-02 06:41:19

高仿Windows Phone QQ登录界面实例代码_实用技巧的相关文章

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

 这篇文章主要介绍了高仿Windows Phone QQ登录界面实例代码,有需要的朋友可以参考一下 给 TextBox文本框前添加图片   扩展PhoneTextBox:添加一个类"ExtentPhoneTextBox"继承 PhoneTextBox ,在"ExtentPhoneTextBox"类中添加属性项:     代码如下: public class ExtentPhoneTextBox : PhoneTextBox     {         /// <

Asp.net中安全退出时清空Session或Cookie的实例代码_实用技巧

概览: 网站中点击退出,如果仅仅是重定向到登录/出页面,此时在浏览器地址栏中输入登录后的某个页面地址如主页,你会发现不用登录就能访问.这种所谓的退出并不是安全的. 那么怎样做到安全退出呢? 那就是点击退出后清空相应的Session或Cookie. 清空Session的代码: Session.Clear(); Session.Abandon(); 清除Cookie的正确代码(假设Cookie名称为UserInfo): if (Request.Cookies["UserInfo"] !=

asp.net 身份验证机制实例代码_实用技巧

ASP.NET提供了3种认证方式:windows身份验证.Forms验证和Passport验证. windows身份验证: IIS根据应用程序的设置执行身份验证.要使用这种验证方式,在IIS中必须禁用匿名访问. Forms验证:用Cookie来保存用户凭证,并将 未经身份验证的用户重定向到自定义的登录页. Passport验证:通过Microsoft的集中身份验证服务执行的,他为成员站点提供单独登录和核心配置文件服务. 关于这三种验证方式的配置,推荐一篇文章:http://www.jb51.ne

asp.net session的使用与过期实例代码_实用技巧

1.Session是一种Web会话中的常用状态之一. 2.Session提供了一种把信息保存在服务器内存中的方式.他能储存任何数据类型,包含自定义对象. 3.每个客户端的Seesion是独立存储的. 4.在整个会话过程中,只要SessionID的cookie不丢失,都会保存Session信息的. 5.Session不能跨进程访问,只能由该会话的用户访问.应为提取Session数据的id标识是以Cookie的方式保存到访问者浏览器的缓存里的. 6.当会话终止,或过期时,服务器就清除Session对

asp.net 图标提取以及图标转换的实例代码_实用技巧

复制代码 代码如下: using System;using System.Collections.Generic;using System.Drawing;using System.Windows.Forms;using System.IO;using System.Resources;using System.Reflection;using System.Runtime.InteropServices; namespace newExtIcon{    public partial clas

.net实现微信公众账号接口开发实例代码_实用技巧

说起微信公众帐号,大家都不会陌生,使用这个平台能给网站或系统增加一个新亮点,直接进入正题吧,在使用之前一定要仔细阅读官方API文档.API文档地址:http://mp.weixin.qq.com/wiki/index.php 使用.net实现的方法://微信接口地址 页面代码: 复制代码 代码如下: weixin _wx = new weixin();  string postStr = "";  if (Request.HttpMethod.ToLower() == "po

.net jMail邮件发送(含抄送、密送、多发、日志记录)实例代码_实用技巧

jmail是一个第三方邮件操作组件,通常位于web服务器端,实现收邮件及发邮件功能(客户端用Foxmail这类就很好了).可以利用它轻松实现发邮件.抄送.密送.多发.日志记录及收邮件功能.本章要讲的,就是:发邮件.抄送.密送.多发.日志记录. 一.组件准备下载JMail44_pro并安装(记下安装路径) 找到安装路径,将其中的jmail.dll复制到项目中 二.核心发送代码新建MailAPI.cs,并输入以下代码 复制代码 代码如下: using System;using System.Coll

Silverlightbutton图片切换样式实例代码_实用技巧

之前一直做WPF现在开始接触Slilverlight感触很多. 今天做一个Button要求 有两个图片,button默认有一个图片,鼠标over时用另一个图片, 用wpf做的时候写一个template很简单,但silverlight和wpf写起来不一样 记录一下.大概思路是两个image鼠标MouseOver的时候一个Visible一个Collapsed 写的是一个自定义控件,代码和皮肤分离,很简单的一个demo 代码下载:ImageButtonTest.rar 先写一个继承自button的im

asp.net上传图片并作处理水印与缩略图的实例代码_实用技巧

方法类: 复制代码 代码如下: upFileClass.cs using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlC