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

概述一种自以为是的方式：本来只是想简单的做个水印效果，在文本框内容为空的时候提示用户输入，这种需求挺常见。网上一搜都是丢给你你一大段xaml代码。用c#代码实现我是不倾向了既然用wpf就得Xaml啊。首先我想到的是t

一种自以为是的方式：

本来只是想简单的做个水印效果，在文本框内容为空的时候提示用户输入，这种需求挺常见。网上一搜 都是丢给你你一大段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>

最终效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的WPF TextBox水印效果制作方法详解全部内容，希望文章能够帮你解决WPF TextBox水印效果制作方法详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。