欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

WPF自定义搜索框代码分享

程序员文章站 2023-10-23 22:12:34
首先下载搜索图标: 控件中的搜索图标下载地址:http://www.easyicon.net/1183666-search_icon.html  搜索...

首先下载搜索图标:

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>

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