WPF如何制作TextBox水印效果

這篇文章給大家分享的是有關WPF如何制作TextBox水印效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一種自以為是的方式：

本來只是想簡單的做個水印效果，在文本框內容為空的時候提示用戶輸入，這種需求挺常見。網上一搜 都是丟給你你一大段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水印效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！