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

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

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

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

时间: 2024-10-10 12:22:36

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

WPF—QQ界面(一):QQ界面的整体布局

15年6月底初学C#的WPF,在此之前对软件编程行业基本上相当于小白,从此漫漫程序路. 把C#的基本语法看了一遍,高级教程还没看,在师兄的提点下,开始尝试着写QQ的界面. 先将界面包含的各个效果分块写成随笔,期间遇到各种问题,要么请教师兄.同学,要么上网查阅大牛们写的博客(此后所有的文章中若有冒犯,请私信),如文中出现不当或者不够优化的代码,望广大博友积极指出,谢谢! 编译环境:windows 8.1 + VS2013 先上效果图: 整体布局我采用Grid来做,将整个界面分成9行(其中两行是空的

WPF—QQ界面(五):QQ好友分组列表的效果实现 及 截稿

效果分析: 1.鼠标左键单击 分组 的组名,能够弹出一个下拉列表,并且左边的向右箭头转成向下: 2.弹出的下拉列表中包含好友的头像,好友的昵称,还有好友的个性签名或最新动态: 3.当鼠标移到好友这一行,能够将一行的背景色置蓝或置橙: 4.当鼠标移到好友的头像上,能够悬浮显示好友的个人信息. 除了这些基本的效果,还有很多效果蕴含其中....感觉分组列表的效果最难做. 我大致做出了那样的效果,很不美观.没达到一样的效果,就不分析思路了,以免误人子弟. 用的是ScrollViewer 前台: <Scr

fiddler(三)、会话框添加显示请求方法栏

在使用fiddler抓包的时候,查看请求类型get和post每次只有点开该请求,在Inspectors才能查看get和post请求,不太方便.如果在会话框能直观地查看到请求方式,那就好了! 一.添加会话框字段 1.在会话框第一列(#)右键,弹出选项菜单 2.选择Customize columns选项,Collection选项选择Miscellaneous 3.Field Name选择:RequestMethod 4.点Add按钮即可添加成功 二.隐藏会话菜单 1.选择需要隐藏的菜单,右键.选择H

设计input搜索框提示文字点击消失的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

实现DataTables搜索框查询结果高亮显示

DataTables是封装好的HTML表格插件,丰富了HTML表格的样式,提供了即时搜索.分页等多种表格高级功能.用户可以编写很少的代码(甚至只是使用官方的示例代码),做出一个漂亮的表格以展示数据.关于DataTables的更多信息,请查看:http://www.datatables.club/.https://datatables.net/.下图将要展示的南京景点游记的相关数据,在DataTables表格中展示出来. 上面DataTable表格中的即时搜索.分页等功能是创建好DataTable

Xamarin.Android 制作搜索框

前段时间仿QQ做了一个搜索框样式,个人认为还不错,留在这里给大家做个参考,希望能帮助到有需要的人. 首先上截图(图1:项目中的样式,图2:demo样式): 不多说直接上代码: Main.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi

做一个input搜索框

首先我先抛出制作这个搜索框的细节: 1)文本输入框要有内阴影. 2)文本框与按钮要对齐. 好,我们现在开始制作,先说一下,最直接的制作方法,文本输入框的内阴影我们可以用图片来做,用几像素的图片平铺,然后一个DIV层内包含input与button两个标签,大致HTML标签书写如: 1 2 3 4 5 6 <div id="search-field"> <form id="search-form">     <input type=&quo

搜索框关键字智能匹配实例代码实例

搜索框关键字智能匹配实例代码实例:只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="auth

Win10系统任务栏显示Cortana搜索框的设置方法

我们都知道Win10系统带有Cortana搜索功能,并且可以进行语音输入,要找文件或者软件程序非常的方便.那么怎么在任务栏上显示Cortana的搜索功能呢?下面就来介绍一下Cortana搜索功能怎么在任务栏上设置打开显示或者关闭. Win10任务栏上Cortana搜索设置打开显示或隐藏的方法 1.右键点击任务栏,找到"Cortana",会发现Cortana搜索功能是被默认隐藏的,我们只需要选择下面两个即可.2."显示Cortana图标"就是只有一个图标,"