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

给 TextBox文本框前添加图片

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

复制代码 代码如下:

public class ExtentPhoneTextBox : PhoneTextBox
    {
        ///

        /// 文本框图片属性
        ///

        public static readonly DependencyProperty TextHeadImageProperty =
            DependencyProperty.Register("TextHeadImage", typeof(ImageSource), typeof(ExtentPhoneTextBox), new PropertyMetadata(null)
            );

        ///

        /// 文本框头图片
        ///

        public ImageSource TextHeadImage
        {
            get { return base.GetValue(TextHeadImageProperty) as ImageSource; }
            set { base.SetValue(TextHeadImageProperty, value); }
        }

        ///

        /// 文本图片宽度
        ///

        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));

        ///

        /// 文本图片高度
        ///

        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 样式编辑：

全部样式如下：

复制代码 代码如下:

           
               
                   
               
           
       
       
       

UI部局xaml代码如下：

            Margin="0,162,24,19"
            Grid.RowSpan="2">

                            TextWrapping="Wrap"
                VerticalAlignment="Top"
                PlaceholderText="QQ号码/手机/邮箱"
                Height="80"
                Background="White" TextHeadImage="/Assets/QqAccount.WVGA.png" Style="{StaticResource ExtentPhoneTextBoxStyle}" TextHeadImageHeight="22" TextHeadImageWidth="24" />
                            TextWrapping="Wrap"
                VerticalAlignment="Top"
                PlaceholderText="点击输入QQ密码"
                Height="80"
                Background="White" Style="{StaticResource ExtentPhoneTextBoxStyle}" TextHeadImage="/Assets/Password.WVGA.png" TextHeadImageHeight="22" TextHeadImageWidth="24" />

                            HorizontalAlignment="Left"
                Margin="12,195,0,0"
                VerticalAlignment="Top"
                HorizontalContentAlignment="Left" />
                            HorizontalAlignment="Left"
                Margin="224,195,0,0"
                VerticalAlignment="Top" />
                            HorizontalAlignment="Left"
                Margin="12,272,0,0"
                VerticalAlignment="Top" />
                            HorizontalAlignment="Left"
                Margin="12,349,0,0"
                VerticalAlignment="Top"
                HorizontalContentAlignment="Left" />
                            HorizontalAlignment="Left"
                Margin="12,385,0,0"
                VerticalAlignment="Top"
                HorizontalContentAlignment="Left" />

       
运行效果如下：