当前位置： 移动技术网 > IT编程>开发语言>.net > WPF自定义搜索框代码分享

WPF自定义搜索框代码分享

2017年12月12日  | 移动技术网IT编程  | 我要评论

合肥八中跳楼,玛兹尔的发现,鲈鱼的生活习性

首先下载搜索图标：

控件中的搜索图标下载地址： 

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

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网