码迷,mamicode.com
首页 > Windows程序 > 详细

WPF—QQ界面(三):联系人搜索框和个性签名一栏的效果实现

时间:2016-02-24 21:10:11      阅读:446      评论:0      收藏:0      [点我收藏+]

标签:

由于过年回家,家里没网,好几个月没写了。昨晚刚回实验室,今天接着写。

首先分析搜索框和个性签名一栏的效果:

1、搜索框平常时框内有一行文字用来提示搜索的内容,当鼠标左键单击会使框内文字清空,并有光标闪烁;

2、个性签名一栏平常时也有一行文字,内容就是你的个性签名啦,当鼠标单击时,会使整个框的文字内容全选,此时可以随意更改你的个性签名。

3、两者还有一个共同特点:当鼠标移到搜索框和个性签名框,都会在鼠标的下方出现一行提示文字。

先贴搜索框的代码:

前台:

<TextBox x:Name="txtbox2" Background="Gray" Opacity="0.7" Height="38" Width="342"  BorderBrush="Transparent"
                     Text="  搜索 : 联系人、讨论组、群、企业" FontSize="16" GotFocus="txtbox2_GotFocus" LostFocus="txtbox2_LostFocus"
                     VerticalContentAlignment="Center" >
                    <TextBox.ToolTip>
                        <ToolTip>
                            <StackPanel>
                                <TextBlock>输入QQ号码、姓名/昵称、拼音、Email查找</TextBlock>
                                <TextBlock>联系人,还可以通过完整的QQ号码查找陌生</TextBlock>
                                <TextBlock>人</TextBlock>
                            </StackPanel>
                        </ToolTip>
                    </TextBox.ToolTip>
                </TextBox>

后台:

private void txtbox2_GotFocus(object sender, RoutedEventArgs e)   //获取焦点执行的事件
        {
            TextBox txtbox2 = sender as TextBox;
            tempTxt2 = txtbox2.Text;
            txtbox2.Text = string.Empty;
            txtbox2.Background =Brushes.White;          //获取焦点后,将文本框的背景色改成白色
            txtbox2.BorderBrush = Brushes.Transparent;
            pic_search.Visibility = Visibility.Hidden;    //获取焦点后,隐藏搜索图标
            pic_offline3.Visibility = Visibility.Visible; //获取焦点后,显示关闭图标
        }

        private void txtbox2_LostFocus(object sender, RoutedEventArgs e)   //丢失焦点之后,该处理的事件
        {
            if(txtbox2.Text==string.Empty)
            {
                txtbox2.Text = tempTxt2;
            }
            pic_search.Visibility = Visibility.Visible;      //失去焦点后,重现隐藏图标
            pic_offline3.Visibility = Visibility.Hidden;     //失去焦点后,隐藏关闭图标
        }

我采用获取焦点和丢失焦点来处理搜索框需要实现的效果,当鼠标单击搜索框时,即为获取焦点,此时将背景框的颜色改为白色就相当于清空了搜索框;当鼠标单击其他地方时,搜索框就会丢失焦点,此时的事件处理就是将原来的文字和搜索图标还原。

以下是个性签名框的代码:

前台:

<TextBox  Name="txtbox1" Text="Working hard ,living free." 
                      FontSize="17" FontFamily="kaiti"  Background="Transparent" BorderBrush="Transparent"
                      VerticalContentAlignment="Center" PreviewMouseDown="txtbox1_PreviewMouseDown" 
                      GotFocus="TxtBox1_GotFocus" LostFocus="TxtBox1_LostFocus"/>

后台:

private void TxtBox1_GotFocus(object sender, RoutedEventArgs e)  //实现:文本框获取焦点,全选文本内容
        {
            TextBox txtbox1 = e.Source as TextBox;
            txtbox1.SelectAll();    //在 GotFocus 事件里利用 selectall 全选
            txtbox1.PreviewMouseDown -= new MouseButtonEventHandler(txtbox1_PreviewMouseDown); //实现:当第二次单击的时候,不再是全选文字,而是显示光标
            txtbox1.Background = Brushes.White;

        }

        private void TxtBox1_LostFocus(object sender, RoutedEventArgs e)  //文本框丢失焦点后,取消全选,且背景色还原为透明
        {
            TextBox txtbox1 = sender as TextBox;
            if (txtbox1 != null)
            {
                txtbox1.PreviewMouseDown += new MouseButtonEventHandler(txtbox1_PreviewMouseDown);
            }
            txtbox1.Background = Brushes.Transparent;
        }

个性签名框和搜索框实现效果的方法一样,也是采用获取焦点和丢失焦点来处理。当鼠标单击个性签名时,获取焦点,利用textbox的selectall方法全选框内的文字;丢失焦点时还原原貌。

对于两者共同的特点,即 在鼠标移到文本框上时文字能够自动悬浮于文本框下方,这个效果其实很简单,用 Tooltip 就行了,可以参照以上的代码,就不详述了。

WPF—QQ界面(三):联系人搜索框和个性签名一栏的效果实现

标签:

原文地址:http://www.cnblogs.com/danieldong/p/5215064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!