高仿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>

运行效果如下：

高仿Windows Phone QQ登录界面的更多相关文章

WPF开发实例——仿QQ登录界面
原文:WPF开发实例--仿QQ登录界面版权声明:本文为博主原创文章,如需转载请标明转载地址 http://blog.csdn.net/u013981858 https://blog.csdn.net ...
编写Java程序，使用Swing布局管理器和常用控件，实现仿QQ登录界面
返回本章节返回作业目录需求说明: 使用Swing布局管理器和常用控件,实现仿QQ登录界面实现思路: 创建登录界面的类QQLogin,该类继承父类JFrame,在该类中创建无参数的构造方法,在构造 ...
零基础~仿qq登录界面
html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
JavaSwing仿QQ登录界面，注释完善，适合新手学习
使用说明: 这是一个java做的仿制QQ登录界面,界面仅使用一个类, JDK版本为jdk-11 素材包的名字为:素材(下载)请在项目中新建一个名字为“素材”的文件夹. 素材: https://pan. ...
仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...
高仿腾讯QQ最终版
之前写过一篇关于高仿腾讯QQ的博客,不知道的看这:http://blog.csdn.net/htq__/article/details/51840273 ,主要是从界面上高仿了腾讯QQ,在UI上基本上 ...
界面编程模仿篇(QQ登录界面逼真篇)
写了好多天的爬虫,偷空前前后后用了两天的时间(排除吃饭睡觉)写完了这个QQ登录界面,看起来还凑和着吧,如果是的大神的,莫见笑,纯属业余作品,废话先不多说,截图如下,其中第二幅图片中的红色方框部份有待完 ...
Android菜鸟的成长笔记（3）——给QQ登录界面说So Easy
原文:Android菜鸟的成长笔记(3)--给QQ登录界面说So Easy 上一篇:Android菜鸟的成长笔记(2)--第一个Android应用我们前面已经做了第一个Android应用程序,虽然有 ...
QQ登录界面布局
简单的qq登录界面布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln ...

随机推荐

损失函数（Loss Function）
转载请注明出自BYRans博客:http://www.cnblogs.com/BYRans/ 线性回归中提到最小二乘损失函数及其相关知识.对于这一部分知识不清楚的同学可以参考上一篇文章<线性回归 ...
Linux磁盘管理之磁盘结构、概念、原理01
一.磁盘的分类磁盘主要有IDE.SATA.SCSI.IDE是比较老的硬盘,数据速度比较慢:SATA是现在用的比较多的,台式机.笔记本大多都用的SATA硬盘:SCSI硬盘速度最快,但是价格相对较高. ...
ES6块级作用域及新变量声明（let）
很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域.用var声明的变量具有变量提升(declaration hoist ...
margin-top无效的解决方法
先上代码: <div id="content" style=" width:750px; height:300px; background:#C29A29; mar ...
UESTC 395 Dynamic Query System --Treap
题意:让你维护一个集合,有8种操作: 1. I x 插入一个数 2. R x 删除x 3. S 输出总的数个数(集合大小) 4. L x 查询小于x的数的个数 5. W k 查询集合中 ...
转载:JavaSE之反射
该文章转载自:http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html Java反射详解本篇文章依旧采用小例子来说明,因为我 ...
POJ3187Backward Digit Sums[杨辉三角]
Backward Digit Sums Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6350 Accepted: 36 ...
手机开启HDR后拍照有什么不同？
转自http://www.leiphone.com/news/201406/hdr-pic.html HDR这词大家可能并不陌生,但大部分人只是听过而已,在脑子并没有太多的概念,可能只是简单的认为HD ...
IDF实验室WORD隐写术
上帝也哭泣http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=48 下载下来,发现是一个word文档,看来信息应该就 ...
Linux—C内存管理
程序(可执行文件)存储结构与进程存储结构: 查看文件基本情况:file fileName.查看文件存储情况:size fileName(代码区text segment.全局初始化/静态数据区data ...

高仿Windows Phone QQ登录界面

高仿Windows Phone QQ登录界面的更多相关文章

随机推荐

热门专题