Win8应用开发之带水印文本框

lomg

　　主题：开发带有水印的文本框控件。水印格式可以自定义。
　　

1. 最后结果
　　如图：

　　

2. 主要思想
　　1. 在原来的TextBox中，添加并注册一个依赖属性：Watermark，用于前台自定义水印。
　　2. 在原来的TextBox样式，添加一个用于呈现水印的内容控件：ContentPresenter，并且将Content绑定Watermark。
　　3. 给整体控件添加GetFocus，LostFocus事件。以便，在获得焦点时，消失水印。失去焦点时，显示水印。



3. 新建项目和空间
　　1.新建一个项目:WatermarkerTextBoxControl
　　2.右击项目，添加新建项，选择模板式控件，并命名为WatermarkerTextBox.cs

　　
　　
　　3.将下面代码拷入该模板控件里面：





1 public sealed class WatermarkTextBox : TextBox
2     {
3         public static DependencyProperty WatermarkProperty = DependencyProperty.Register("Watermark", typeof(object), typeof(WatermarkTextBox), new PropertyMetadata(null));
4         public object Watermark
5         {
6             get { return (object)GetValue(WatermarkProperty); }
7             set { SetValue(WatermarkProperty, value); }
8         }
9         public static DependencyProperty WatermarkTemplateProperty = DependencyProperty.Register("WatermarkTemplate", typeof(DataTemplate), typeof(WatermarkTextBox), new PropertyMetadata(null));
10         public DataTemplate WatermarkTemplate
11         {
12             get { return (DataTemplate)GetValue(WatermarkTemplateProperty); }
13             set { SetValue(WatermarkTemplateProperty, value); }
14         }
15
16         public WatermarkTextBox()
17         {
18             this.DefaultStyleKey = typeof(WatermarkTextBox);
19             this.DefaultStyleKey = typeof(WatermarkTextBox);
20             this.GotFocus += WatermarkTextBox_GotFocus;
21             this.LostFocus += WatermarkTextBox_LostFocus;
22         }
23         void WatermarkTextBox_GotFocus(object sender, RoutedEventArgs e)
24         {
25             GoToWatermarkVisualState();
26         }
27
28         void WatermarkTextBox_LostFocus(object sender, RoutedEventArgs e)
29         {
30             GoToWatermarkVisualState(false);
31         }
32
33         private void GoToWatermarkVisualState(bool hasFocus = true)
34         {
35             //如果文本框内容为空 或者 没有获得焦点时，显示水印
36             //否则，就隐藏水印
37             if (String.IsNullOrEmpty(Text) && !hasFocus)
38                 GoToVisualState("WatermarkVisible"); //TODO: create constants for our magic strings
39             else
40                 GoToVisualState("WatermarkCollapsed");
41         }
42
43         private void GoToVisualState(string stateName, bool useTransitions = true)
44         {
45             //控制水印状态
46             VisualStateManager.GoToState(this, stateName, useTransitions);
47         }
48
49         protected override void OnApplyTemplate()
50         {
51             base.OnApplyTemplate();
52
53             //we need to set the initial state of the watermark
54             GoToWatermarkVisualState(false);
55         }
56
57     }
View Code　　代码讲解：
　　1）. 给该控件注册，两个依赖属性，并且添加相应的属性索引器。但是有用的只是：Watermark属性。
　　2）. 在控件构造函数中，添加GetFocus和LostFocus事件，并在事件中添加水印显示与否代码。
　　3）. 水印的控制VisualState会写在该控件的样式中
　　

4. 重写WatermarkTextBox的样式
　　1. 打开Theme文件夹下的Generic.xaml文件：

　　2. 将下面的样式代码替换原来的WatermarkTextBox样式：





  1
  2         
  3         
  4         
  5         
  6         
  7         
  8         
  9         
10         
11         
12         
13         
14         
15            
16                 
17                     
18                        
19                             
20                                 
21                                    
22                                         
23                                             
24                                                
25                                                     
26                                                         
27                                                         
28                                                            
29                                                                 
30                                                                     
31                                                                 
32                                                                 
33                                                                     
34                                                                 
35                                                                 
36                                                                     
37                                                                 
38                                                            
39                                                         
40                                                         
41                                                            
42                                                                 
43                                                                     
44                                                                 
45                                                                 
46                                                                     
47                                                                 
48                                                                 
49                                                                     
50                                                                 
51                                                            
52                                                         
53                                                         
54                                                            
55                                                                 
56                                                                 
57                                                            
58                                                         
59                                                                             
60                                                
61                                                
62                                                
63                                                     
64                                                
65                                             
66                                         
67                                    
68                                 
69                             
70                        
71                        
72                             
73                             
74                        
75                        
76                             
77                                 
78                                    
79                                         
80                                             
81                                                
82                                                     Visible
83                                                
84                                             
85                                         
86                                    
87                                 
88                                 
89                             
90                             
91                                 
92                                    
93                                         
94                                             
95                                         
96                                         
97                                             
98                                         
99                                         
100                                             
101                                         
102                                    
103                                 
104                                 
105                                    
106                                         
107                                         
108                                    
109                                 
110                                 
111                                    
112                                         
113                                         
114                                    
115                                 
116                                 
117                             
118                             
119                                 
120                                    
121                                         
122                                             
123                                                
124                                                     Visible
125                                                
126                                             
127                                         
128                                    
129                                 
130                                 
131                             
132                        
133                        
134                        
135                        
136                        
139                        
140                     
141                 
142            
143         
144     
View Code


5. 在需要的地方引用该控件





1
2         
3            
4                 
5                     
6                     
7                 
8            
9         
10         
View Code 　　

6.参考文章：

http://elegantcode.com/2012/03/06/create-your-first-winrt-watermarktextbox-control/