WPF的TextBox水印效果詳解

来源:http://www.cnblogs.com/assassinx/archive/2017/09/16/7531297.html
-Advertisement-
Play Games

一種自以為是的方式: 本來只是想簡單的做個水印效果,在文本框內容為空的時候提示用戶輸入,這種需求挺常見。網上一搜 都是丟給你你一大段xaml代碼。用c#代碼實現我是不傾向了 既然用wpf就得Xaml啊。首先我想到的是template嘛 wpf到處離不開template 。我想到的是一個border ...


一種自以為是的方式:

本來只是想簡單的做個水印效果,在文本框內容為空的時候提示用戶輸入,這種需求挺常見。網上一搜 都是丟給你你一大段xaml代碼。用c#代碼實現我是不傾向了 既然用wpf就得Xaml啊。首先我想到的是template嘛 wpf到處離不開template 。我想到的是一個border 套一個textblock嘛 然後讓文本內容通過templateBinding到Text嘛 搞得不亦樂乎 ,並且也確實很快就達到了我要的效果:

 1 <TextBox>
 2     <TextBox.Template>
 3         <ControlTemplate TargetType="TextBox">
 4             <Border BorderThickness="1" Name="border" BorderBrush="Red">
 5                 <TextBlock Text="{TemplateBinding Text}"></TextBlock>
 6             </Border>
 7             <ControlTemplate.Triggers>
 8                 <MultiTrigger>
 9                     <MultiTrigger.Conditions>
10                         <Condition Property="Text" Value=""></Condition>
11                     </MultiTrigger.Conditions>
12                     <Setter Property="Background" TargetName="border">
13                         <Setter.Value>
14                             <VisualBrush AlignmentX="Left" AlignmentY="Top"  Stretch="None">
15                                 <VisualBrush.Visual>
16                                     <TextBlock Width="500" Height="100" Background="#FFE8DBDB">請輸入內容22</TextBlock>
17                                 </VisualBrush.Visual>
18                             </VisualBrush>
19                         </Setter.Value>
20                     </Setter>
21                 </MultiTrigger>
22             </ControlTemplate.Triggers>
23         </ControlTemplate>
24     </TextBox.Template>
25 </TextBox>

最後仔細一看杯具的發現文本內容輸入的時候沒有游標,然後我想到的就是把模板里的textblock改為textbox就完了嘛。好 一改更杯具了 水印效果抽風了 最後發現 用c#代碼 強制讓文本框Focus() 貌似就可以 ,也許本身元素就是TextBox 模板裡面 再放TextBox 就會導致焦點無法獲取造成各種混亂吧。最後弄不好 。

通過嘗試更改TextBox自帶的模板來達到效果

導出系統預設textBox的模板visualTree ,經過嘗試成功達到效果,值得一提的是 我納悶兒網上那些人為甚有的一貼出的xaml代碼裡面就是scrollviewer呢 並且還能夠正確運行 讓我很難理解 ,一看原來系統預設的就是scrollviewer 原來如此 還有Name=PART_ContentHost  只要寫成他自然而然就能被當初內容宿主處理。看來PART_ContentHost  是個很特殊的系統名稱,還有就是多行文本框通過 設置AcceptsReturn="True" VerticalScrollBarVisibility="Auto" 屬性來達到:

 1  
 2 <TextBox Text="" Height="60" Name="nihao" Width="300" AcceptsReturn="True" VerticalScrollBarVisibility="Auto"  >
 3     <TextBox.Template>
 4         <ControlTemplate TargetType="TextBox">
 5             <!--下麵必須寫成PART_ContentHost 才能正常 無語又是一個神秘硬編碼 
 6                         我就納悶兒 為甚網上的人要寫 scrollviewer 而且自然而然的就成了宿主 讓文本顯示在裡面
 7                         原來通過代碼導出的預設的visualtree就是這樣的。只有decorator 或scrollviewer元素可以用作PART_ContentHost
 8                         -->
 9             <Border Name="borderContent" CornerRadius="10 0 0 10"  BorderThickness="1" BorderBrush="Blue" Background="#FFE8DBDB"  SnapsToDevicePixels="True">
10                 <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Name="PART_ContentHost" Focusable="False"/>
11             </Border>
12             <ControlTemplate.Triggers>
13                 <MultiTrigger >
14                     <MultiTrigger.Conditions>
15                         <Condition Property="IsFocused" Value="False"/>
16                         <Condition Property="Text" Value=""/>
17                     </MultiTrigger.Conditions>
18                     <Setter Property="Background" TargetName="borderContent" >
19                         <Setter.Value>
20                             <VisualBrush AlignmentX="Left" AlignmentY="Top"  Stretch="None">
21                                 <VisualBrush.Visual>
22                                     <!--這裡是無論何種手段都無法取得父元素 的寬度我無語 所以只能儘量把寬度 高度往大了寫
23                                                 {Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Width}
24                                                 -->
25                                     <TextBlock Width="500" Height="100" Background="#FFE8DBDB">請輸入內容</TextBlock>
26                                 </VisualBrush.Visual>
27                             </VisualBrush>
28                         </Setter.Value>
29                     </Setter>
30                 </MultiTrigger>
31                 <Trigger Property="IsFocused" Value="True">
32                     <Setter Property="Background" TargetName="borderContent" Value="#FFE8DBDB"></Setter>
33                 </Trigger>
34             </ControlTemplate.Triggers>
35         </ControlTemplate>
36     </TextBox.Template>
37 </TextBox>
38             

另一種方式:

還有一種方式就是直接控制外圍的style trigger也可達到效果,只不過圓角border你必須要在text控制項外再套border才能實現:

 1  
 2 <TextBox Text="" Height="30" BorderThickness="1" BorderBrush="Blue"  Margin="10">
 3     <TextBox.Style>
 4         <Style TargetType="TextBox">
 5             <!--這種方式直接控制外圍的 background 也可以達到效果 ,只不過圓角邊框不能實現-->
 6             <Setter Property="Background" Value="#FFE8DBDB"></Setter>
 7             <Style.Triggers>
 8                 <MultiTrigger>
 9                     <MultiTrigger.Conditions>
10                         <Condition Property="Text" Value="" ></Condition>
11                     </MultiTrigger.Conditions>
12                     <Setter Property="Background" >
13                         <Setter.Value>
14                             <VisualBrush AlignmentX="Left" AlignmentY="Top"  Stretch="None" >
15                                 <VisualBrush.Visual >
16                                     <Border Background="#FFE8DBDB" Width="500" Height="100">
17                                         <TextBlock >請輸入內容</TextBlock>
18                                     </Border>
19                                 </VisualBrush.Visual>
20                             </VisualBrush>
21                         </Setter.Value>
22                     </Setter>
23                 </MultiTrigger>
24             </Style.Triggers>
25         </Style>
26     </TextBox.Style>
27 </TextBox>

最終效果:


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 經常使用的命令: #查看埠被占用情況 netstat -tunlp|grep 22 #查看java進程 ps -ef|grep java #壓縮前端工程 rar a -ep1 ./update/win32.zip ./packages/**/win32/* #查找所有帶wine的文件和文件夾 fi ...
  • MySQL資料庫增量備份,在這之前修改我們的資料庫配置文件/etc/my.cnf開啟bin-log日誌功能即可。接下來是我參考了下網上的一些方法,自己寫的,主要還是要能學到他的一些思路和方法。 添加計劃任務: crontab -e 00 03 * * * /root/MySQL_incrementb ...
  • Linux必知必會的目錄,linux啟動過程,PATH環境變數作用 ...
  • 服務端環境:CentOS 6.7客戶端環境:Windows 7 1.伺服器安裝VNC服務端 可以直接rpm安裝vnc的服務端: 如果rpm安裝時發現有依賴,建議直接使用yum安裝,輕鬆解決依賴問題: 如果系統安裝時並沒有安裝桌面選項,那麼就還需要用yum安裝一下桌面: 2.編輯vnc配置文件 編輯/ ...
  • 本文目錄: 1.1 SysV腳本的特性1.2 SysV腳本要具備的能力1.3 start函數分析1.4 stop函數分析1.5 reload函數分析1.6 status、restart、force-reload等1.7 結束語 SysV服務管理腳本和/etc/rc.d/init.d/function ...
  • 第四天,繼續學習。今天看到一句話,"你以為你以為的就是你以為的嗎?",這句話還是有點意思啊!!! 一、查看文件內容的命令 file dest:查看文件的類型。在Linux中,文件的類型有文本文件、目錄、鏈接文件(硬鏈接和軟鏈接)、腳本文件(可執行文件)、二進位文件等等。 cat dest:查看文件的 ...
  • vim是一款文本編輯工具,因此學習時不求功能全記住,只要在使用vim時工作更有效率就可以了。本文從實用的角度總結了vim的操作方法,希望讀者讀完本文後經過練習都能達到飛一般的文本編輯速度。 ...
  • /// /// 導出Excel /// /// /// 英文中文列名對照 /// 保存路徑 public static void getExcel(List lists, Dictionary head, string workbookFile) { ... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...