WPF自定义搜索框代码分享

首先下载搜索图标:

控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html

搜索框设计过程比较简单:

1、先定义一个Rectangle作为背景

2、然后中间放TextBox输入,可以重写其中的模板。提示语Label放在模板中,可以在模板的触发器中控制隐藏显示~

3、搜索按钮-大家随便在网上下个就行了。

UserControl界面:

<UserControl x:Class="WpfApplication18.SearchControl"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       mc:Ignorable="d" MinHeight="30" MinWidth="150" Background="Transparent"
       d:DesignHeight="30" d:DesignWidth="150">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="15"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
      <ColumnDefinition Width="36"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Column="0" Grid.ColumnSpan="3" Fill="LightGray" RadiusX="15" RadiusY="15" Opacity="0.8"></Rectangle>

    <TextBox x:Name="TbxInput" Grid.Column="1" KeyDown="TbxInput_OnKeyDown">
      <TextBox.Template>
        <ControlTemplate TargetType="TextBox">
          <Grid>
            <TextBlock x:Name="Uc_TblShow" Text="请输入..." Foreground="Gray" Opacity="0.5" VerticalAlignment="Center" Visibility="Collapsed"></TextBlock>
            <TextBox x:Name="Uc_TbxContent" Foreground="Gray" Background="Transparent" VerticalAlignment="Center" VerticalContentAlignment="Center" BorderThickness="0"
                 Text="{Binding ElementName=TbxInput,Path=Text,Mode=TwoWay}" FontSize="18"></TextBox>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger SourceName="Uc_TbxContent" Property="Text" Value="">
              <Setter TargetName="Uc_TblShow" Property="Visibility" Value="Visible"></Setter>
            </Trigger>
            <Trigger SourceName="Uc_TbxContent" Property="IsFocused" Value="True">
              <Setter TargetName="Uc_TblShow" Property="Visibility" Value="Collapsed"></Setter>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </TextBox.Template>
    </TextBox>

    <Button x:Name="BtnSearch" Grid.Column="2" Click="BtnSearch_OnClick" Cursor="Hand">
      <Button.Template>
        <ControlTemplate TargetType="Button">
          <Grid>
            <Image x:Name="Uc_Image" Source="1181298.png" Height="20" Width="20"></Image>
            <ContentPresenter></ContentPresenter>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
              <Setter TargetName="Uc_Image" Property="Height" Value="25"></Setter>
              <Setter TargetName="Uc_Image" Property="Width" Value="25"></Setter>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Button.Template>
    </Button>
  </Grid>
</UserControl> 

UserControl后台:

  public partial class SearchControl : UserControl
  {
    public SearchControl()
    {
      InitializeComponent();
    }

    public event EventHandler<SearchEventArgs> OnSearch;
    private void BtnSearch_OnClick(object sender, RoutedEventArgs e)
    {
      ExeccuteSearch();
    }

    private void TbxInput_OnKeyDown(object sender, KeyEventArgs e)
    {
      ExeccuteSearch();
    }

    private void ExeccuteSearch()
    {
      if (OnSearch!=null)
      {
        var args=new SearchEventArgs();
        args.SearchText = TbxInput.Text;
        OnSearch(this, args);
      }
    }
  }
  public class SearchEventArgs : EventArgs
  {
    public string SearchText { get; set; }
  }

直接引用就行了:<wpfApplication18:SearchControl></wpfApplication18:SearchControl>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Jquery实现搜索框提示功能示例代码

    博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数据量很大的情况下使用Ajax去实现真的不合适,于是,我又写了一个使用Jquery来实现方法. 废话不多说,上图上代码:  引用方式: 复制代码 代码如下: <body style="background-color: White;"> <form id="for

  • 淘宝搜索框效果实现分析

    淘宝的搜索框就用到了这样一种设计:这种设计一般是用javascript监控了输入框的focus和blur事件: 复制代码 代码如下: <input type="text" id="q" value="请输入关键字" /> <script type="text/javascript">//<![CDATA[ $("#q").onfocus = function() { if (&

  • jQuery EasyUI API 中文文档 搜索框

    用$.fn.searchbox.defaults重写defaults.依赖 menubutton 用法示例 创建SearchBox 1. 从标记创建.把 'easyui-searchbox' 类加入到<input/>标记. 复制代码 代码如下: <script type="text/javascript"> function qq(value,name){ alert(value+":"+name) } </script> <

  • CSS3,HTML5和jQuery搜索框集锦

    添加搜素框或网站搜索功能是为了方便用户能够轻松.快捷地找到自己需要的信息.因此,在网站中添加一个搜索框已经成为网页设计的主流元素之一.添加一个搜索框到网站会使得用户界面更加友好,也能帮助用户轻松愉快地浏览. 脉动的CSS3输入搜索框 输入搜索框带有边框和类似脉冲的阴影跳动. 纯CSS的建议搜索框 这是一个使用纯CSS构建扩展建议搜索框的简单教程. CSS的扩大搜索框 扩大搜索框是一个点击或输入东西时会变宽的一个简单搜索框. 使用CSS转换扩大搜索栏 我们将利用CSS转换扩展了的搜索栏.搜索栏最初

  • php 搜索框提示(自动完成)实例代码

    百度的搜索大家都在用,当用户输入文字时,搜索框下面自动提示相关的信息,加强了用户体验,的确不错,那么这个效果是如何实现的呢 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果! 下面先主要讲解原理: 在search.html页面中,用户在搜索框内输入"j"时,使用javascript获取搜索框的文本内容,到数据库中查找相关的内容并返回,再使用javascript将服务器返回的结果显示在搜索框下面的提示框内,供用户参考选择. 具体的实现方法: 首先在页面

  • 基于jquery的仿百度搜索框效果代码

    先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT

  • jquery 模拟类搜索框自动完成搜索提示功能(改进)

    autopoint.js代码: 复制代码 代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键

  • Jquery带搜索框的下拉菜单

    1.样式引用: 复制代码 代码如下: <link rel="stylesheet" href="~/Js/Ddl_Chosen/chosen.css" /> 2.由于应用了Jquery,所以引用Jquery.(下载地址) 复制代码 代码如下: <script src="<%= ResolveUrl("~/Js/Jquery.js")%>" type="text/javascript&qu

  • asp.net使用jquery实现搜索框默认提示功能

    文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. 当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示. 为了实现上面的需求,代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.

  • jQuery 插件仿百度搜索框智能提示(带Value值)

    因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码. 复制代码 代码如下: (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟

随机推荐