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

Posted 2020-06-16

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

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

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 就行了，可以参照以上的代码，就不详述了。