WPF TextBox水印效果制作方法详解_c#

一种自以为是的方式：

本来只是想简单的做个水印效果，在文本框内容为空的时候提示用户输入，这种需求挺常见。网上一搜都是丢给你你一大段xaml代码。用c#代码实现我是不倾向了既然用wpf就得xaml啊。首先我想到的是template嘛 wpf到处离不开template 。我想到的是一个border 套一个textblock嘛然后让文本内容通过templatebinding到text嘛搞得不亦乐乎，并且也确实很快就达到了我要的效果：

<textbox>
  <textbox.template>
    <controltemplate targettype="textbox">
      <border borderthickness="1" name="border" borderbrush="red">
        <textblock text="{templatebinding text}"></textblock>
      </border>
      <controltemplate.triggers>
        <multitrigger>
          <multitrigger.conditions>
            <condition property="text" value=""></condition>
          </multitrigger.conditions>
          <setter property="background" targetname="border">
            <setter.value>
              <visualbrush alignmentx="left" alignmenty="top" stretch="none">
                <visualbrush.visual>
                  <textblock width="500" height="100" background="#ffe8dbdb">请输入内容22</textblock>
                </visualbrush.visual>
              </visualbrush>
            </setter.value>
          </setter>
        </multitrigger>
      </controltemplate.triggers>
    </controltemplate>
  </textbox.template>
</textbox>

最后仔细一看杯具的发现文本内容输入的时候没有光标，然后我想到的就是把模板里的textblock改为textbox就完了嘛。好一改更杯具了水印效果抽风了最后发现用c#代码强制让文本框focus() 貌似就可以，也许本身元素就是textbox 模板里面再放textbox 就会导致焦点无法获取造成各种混乱吧。最后弄不好。

通过尝试更改textbox自带的模板来达到效果

导出系统默认textbox的模板visualtree ，经过尝试成功达到效果，值得一提的是我纳闷儿网上那些人为甚有的一贴出的xaml代码里面就是scrollviewer呢并且还能够正确运行让我很难理解，一看原来系统默认的就是scrollviewer 原来如此还有name=part_contenthost 只要写成他自然而然就能被当初内容宿主处理。看来part_contenthost 是个很特殊的系统名称，还有就是多行文本框通过设置acceptsreturn="true" verticalscrollbarvisibility="auto" 属性来达到：

<textbox text="" height="60" name="nihao" width="300" acceptsreturn="true" verticalscrollbarvisibility="auto" >
  <textbox.template>
    <controltemplate targettype="textbox">
      <!--下面必须写成part_contenthost 才能正常 无语又是一个神秘硬编码 
            我就纳闷儿 为甚网上的人要写 scrollviewer 而且自然而然的就成了宿主 让文本显示在里面
            原来通过代码导出的默认的visualtree就是这样的。只有decorator 或scrollviewer元素可以用作part_contenthost
            -->
      <border name="bordercontent" cornerradius="10 0 0 10" borderthickness="1" borderbrush="blue" background="#ffe8dbdb" snapstodevicepixels="true">
        <scrollviewer horizontalscrollbarvisibility="hidden" verticalscrollbarvisibility="hidden" name="part_contenthost" focusable="false"/>
      </border>
      <controltemplate.triggers>
        <multitrigger >
          <multitrigger.conditions>
            <condition property="isfocused" value="false"/>
            <condition property="text" value=""/>
          </multitrigger.conditions>
          <setter property="background" targetname="bordercontent" >
            <setter.value>
              <visualbrush alignmentx="left" alignmenty="top" stretch="none">
                <visualbrush.visual>
                  <!--这里是无论何种手段都无法取得父元素 的宽度我无语 所以只能尽量把宽度 高度往大了写
                        {binding relativesource={relativesource mode=templatedparent},path=width}
                        -->
                  <textblock width="500" height="100" background="#ffe8dbdb">请输入内容</textblock>
                </visualbrush.visual>
              </visualbrush>
            </setter.value>
          </setter>
        </multitrigger>
        <trigger property="isfocused" value="true">
          <setter property="background" targetname="bordercontent" value="#ffe8dbdb"></setter>
        </trigger>
      </controltemplate.triggers>
    </controltemplate>
  </textbox.template>
</textbox>

另一种方式：

还有一种方式就是直接控制外围的style trigger也可达到效果，只不过圆角border你必须要在text控件外再套border才能实现：

<textbox text="" height="30" borderthickness="1" borderbrush="blue" margin="10">
  <textbox.style>
    <style targettype="textbox">
      <!--这种方式直接控制外围的 background 也可以达到效果 ，只不过圆角边框不能实现-->
      <setter property="background" value="#ffe8dbdb"></setter>
      <style.triggers>
        <multitrigger>
          <multitrigger.conditions>
            <condition property="text" value="" ></condition>
          </multitrigger.conditions>
          <setter property="background" >
            <setter.value>
              <visualbrush alignmentx="left" alignmenty="top" stretch="none" >
                <visualbrush.visual >
                  <border background="#ffe8dbdb" width="500" height="100">
                    <textblock >请输入内容</textblock>
                  </border>
                </visualbrush.visual>
              </visualbrush>
            </setter.value>
          </setter>
        </multitrigger>
      </style.triggers>
    </style>
  </textbox.style>
</textbox>

最终效果：