WindowsPhone自定義控件詳解（三） - 實戰：自定義帶水印的PasswordBox控件，WatermarkedPasswordBox · WindowsPhone開發技術專欄

本文系本站原創,歡迎轉載! 轉載請注明出處: [http://blog.csdn.net/mr_raptor/article/details/7251992](http://blog.csdn.net/mr_raptor/article/details/7251992) 聲明：這個控件是在WatermarkedTextBox的基礎上改的。 - 從[http://www.windowsphonegeek.com/articles/WP7-WatermarkedTextBox-custom-control](http://www.windowsphonegeek.com/articles/WP7-WatermarkedTextBox-custom-control)上下載WatermarkedTextBox控件 [原創地址：](http://blog.csdn.net/mr_raptor/article/details/7251992)[http://blog.csdn.net/mr_raptor/article/details/7251992](http://blog.csdn.net/mr_raptor/article/details/7251992)[](http://blog.csdn.net/mr_raptor/article/details/7251992) **原理分析：** 在PasswordBox后面加水印和在TextBox后面加水印差不多，有以下要求： 1. PasswordBox里沒內容時，顯示水印 1. PasswordBox里有內容時，不顯示水印，而顯示內容最簡單的想法就是，在PasswordBox控件后面加上一個類似TextBlock的控件，然后重寫焦點回調方法，當有焦點時，水印不顯示，無焦點時，根據是否有內容而決定是否顯示水印。思路如上，下面開始分析WatermarkedTextBox的代碼，看看它的作者是不是和我們想法一樣。 ? ? **一、分析WatermarkedTextBox代碼** 1. themes/generic.xaml 自定義控件的樣式文件必須要以generic.xaml命名，放到themes目錄中。 ~~~ <ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox"> <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/> </ControlTemplate> <Style TargetType="local:WatermarkedTextBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:WatermarkedTextBox"> <Grid Background="Transparent"> <Border x:Name="EnabledBorder"> <Grid> <ContentControl x:Name="watermarkContent" Style="{TemplateBinding WatermarkStyle}" Content="{TemplateBinding Watermark}" Background="Transparent" Opacity="0.5"/> <ContentControl x:Name="ContentElement" BorderThickness="0" VerticalContentAlignment="Stretch"/> </Grid> </Border> <Border x:Name="DisabledOrReadonlyBorder" Background="Transparent" Visibility="Collapsed"> <TextBox x:Name="DisabledOrReadonlyContent" Background="Transparent" IsReadOnly="True" Text="{TemplateBinding Text}" ?Template="{StaticResource PhoneDisabledTextBoxTemplate}"/> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> ~~~ *注：上面省略了一部分無關緊要代碼。* [http://blog.csdn.net/mr_raptor/article/details/7251992](http://blog.csdn.net/mr_raptor/article/details/7251992) 上面的XAML文件，定義了WatermarkedTextBox的樣式： - 文件開始，定義了一個ControlTemplate元素，由前兩節知識可知，它是要對一個控件設置模板，從后面的TargetType="TextBox"可知，是針對TextBox類型控件，它里面自定義了一個ContentControl類名字為ContentElement。 - 通過TargetType="local:WatermarkedTextBox" 可知，它是針對WatermarkedTextBox的控件樣式。 - 在EnabledBorder里定義了兩個內容控件元素：watermarkContent和ContentElement，watermarkContent里，綁定了依賴屬性Watermark（在WatermarkTextBox.cs里聲明）。 - 在下面的DisabledOrReadonlyBorder里面是一個TextBox 控件，它綁定了WatermarkedTextBox里的Text屬性，同時這個TextBox 控件，的模板設置為：PhoneDisabledTextBoxTemplate，它這么做的目的是，可以設置WatermarkedTextBox的屬性為Disabled，這時，水印就消失了，而顯示原先的TextBox控件。 2.?WatermarkTextBox.cs ~~~ namespace WatermarkedTextBoxControl{ public class WatermarkedTextBox : TextBox { ContentControl WatermarkContent; public static readonly DependencyProperty WatermarkProperty = DependencyProperty.Register("Watermark", typeof(object), typeof(WatermarkedTextBox), new PropertyMetadata(OnWatermarkPropertyChanged)); public static readonly DependencyProperty WatermarkStyleProperty = DependencyProperty.Register("WatermarkStyle", typeof(Style), typeof(WatermarkedTextBox), null); public Style WatermarkStyle { get { return base.GetValue(WatermarkStyleProperty) as Style; } set { base.SetValue(WatermarkStyleProperty, value); } } public object Watermark { get { return base.GetValue(WatermarkProperty) as object; } set { base.SetValue(WatermarkProperty, value); } } public WatermarkedTextBox() { DefaultStyleKey = typeof(WatermarkedTextBox); } public override void OnApplyTemplate() { base.OnApplyTemplate(); this.WatermarkContent = this.GetTemplateChild("watermarkContent") as ContentControl; if(WatermarkContent != null) { DetermineWatermarkContentVisibility(); } } protected override void OnGotFocus(RoutedEventArgs e) { if (WatermarkContent != null && string.IsNullOrEmpty(this.Text)) { this.WatermarkContent.Visibility = Visibility.Collapsed; } base.OnGotFocus(e); } protected override void OnLostFocus(RoutedEventArgs e) { if (WatermarkContent != null && string.IsNullOrEmpty(this.Text)) { this.WatermarkContent.Visibility = Visibility.Visible; } base.OnLostFocus(e); } private static void OnWatermarkPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args) { WatermarkedTextBox watermarkTextBox = sender as WatermarkedTextBox; if(watermarkTextBox != null && watermarkTextBox.WatermarkContent !=null) { watermarkTextBox.DetermineWatermarkContentVisibility(); } } private void DetermineWatermarkContentVisibility() { if (string.IsNullOrEmpty(this.Text)) { this.WatermarkContent.Visibility = Visibility.Visible; } else { this.WatermarkContent.Visibility = Visibility.Collapsed; } } } }} ~~~ [原創地址：](http://blog.csdn.net/mr_raptor/article/details/7251992)[http://blog.csdn.net/mr_raptor/article/details/7251992](http://blog.csdn.net/mr_raptor/article/details/7251992)[](http://blog.csdn.net/mr_raptor/article/details/7251992) 由這個WatermarkedTextBox類可知： - 它繼承了TextBox類 - 增加了Watermark和WatermarkStyle兩個依賴屬性，用于用戶設置它的水印內容和樣式，在Watermark屬性里添加了屬性改變事件：OnWatermarkPropertyChanged - 重載了OnApplyTemplate方法來取得generic.xaml文件里聲明的元素引用：watermarkContent，并且根據generic.xaml里的TextBox ：DisabledOrReadonlyContent，取得它里面是否有內容，如果有內容，則WatermarkContent不可見，否則WatermarkContent可見。 - 重載了OnGotFocus，OnLostFocus，當該自定義控件得到焦點時，設置WatermarkContent不可見，否則WatermarkContent可見。由上面的分析可知，當用戶設置了自定義控件的Watermark屬性時，回調注冊的OnWatermarkPropertyChanged方法，在該方法里，判斷是否WatermarkContent里有內容，如果有，WatermarkContent不可見，否則WatermarkContent可見。兩樣，重載了OnGotFocus，OnLostFocus，在得到和失去焦點時也要判斷是否將WatermarkContent設置為可見與否。 ? **二、自定義WatermarkedPasswordBox** ? 根據前面的分析，我們可以試著做以下修改： - 新建類WatermarkedPasswordBox - 將WatermarkTextBox.cs拷貝到類WatermarkedPasswordBox里，改下類名，讓WatermarkedPasswordBox繼承了Password類 - 在themes/generic.xaml里，拷貝?<Style? TargetType="local:WatermarkedPasswordBox">里的全部代碼，改為WatermarkedPasswordBox的代碼，中間細節自己改就行了，我們不打算支持Disabled屬性，所以DisabledOrReadonlyBorder去掉就行了，將EnabledBorder里的ContentElement去掉，換成PasswordBox，名字還是ContentElement ? 編譯時，錯誤出現了：WatermarkedPasswordBox里this.Text出錯，這是因為Password沒有Text屬性，它有個Password屬性，所以要做下面的修改： - 讓WatermarkedPasswordBox類繼承TextBox，但是添加一個屬性：PasswordBox類型的PasswordContent - 在OnApplyTemplate方法里，獲得自己加的PasswordBox控件的引用ContentElement，為PasswordBox控件添加PasswordChanged事件，當密碼框里內容改變時，將TextBox的Text屬性的值為PasswordBox.Password的值 - 同樣，在XAML樣式文件里，在PasswordBox控件里加上?Password="{TemplateBinding Text}" 修改后的代碼如下： XAML： `<Style TargetType="local:WatermarkedPasswordBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:WatermarkedPasswordBox"> <Grid Background="Transparent"> <Border x:Name="EnabledBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}"> <Grid> <ContentControl x:Name="watermarkContent" Style="{TemplateBinding WatermarkStyle}" Content="{TemplateBinding Watermark}" Background="Transparent" Opacity="0.5"/> <PasswordBox x:Name="ContentElement" Background="Transparent" Password="{TemplateBinding Text}" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="-12,-12,-12,-12" VerticalContentAlignment="Stretch"/> </Grid> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>` 原創地址：[http://blog.csdn.net/mr_raptor/article/details/7251992](http://blog.csdn.net/mr_raptor/article/details/7251992) C#： ~~~ public class WatermarkedPasswordBox : TextBox { ContentControl WatermarkContent; private PasswordBox PasswordContent; public object Watermark { get { return base.GetValue(WatermarkProperty) as object; } set { base.SetValue(WatermarkProperty, value); } } public static readonly DependencyProperty WatermarkProperty = DependencyProperty.Register("Watermark", typeof(object), typeof(WatermarkedPasswordBox), new PropertyMetadata(OnWatermarkPropertyChanged)); private static void OnWatermarkPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args) { WatermarkedPasswordBox watermarkTextBox = sender as WatermarkedPasswordBox; if (watermarkTextBox != null && watermarkTextBox.WatermarkContent != null) { watermarkTextBox.DetermineWatermarkContentVisibility(); } Debug.WriteLine("OnWatermarkPropertyChanged"); } public Style WatermarkStyle { get { return base.GetValue(WatermarkStyleProperty) as Style; } set { base.SetValue(WatermarkStyleProperty, value); } } public static readonly DependencyProperty WatermarkStyleProperty = DependencyProperty.Register("WatermarkStyle", typeof(Style), typeof(WatermarkedPasswordBox), null); public WatermarkedPasswordBox() { DefaultStyleKey = typeof(WatermarkedPasswordBox); } public override void OnApplyTemplate() { base.OnApplyTemplate(); this.WatermarkContent = this.GetTemplateChild("watermarkContent") as ContentControl; this.PasswordContent = this.GetTemplateChild("ContentElement") as PasswordBox; if (WatermarkContent != null && WatermarkContent != null) { PasswordContent.PasswordChanged += new RoutedEventHandler(PasswordContent_PasswordChanged); DetermineWatermarkContentVisibility(); } } void PasswordContent_PasswordChanged(object sender, RoutedEventArgs e) { PasswordBox passwdBx = sender as PasswordBox; this.Text = passwdBx.Password; } protected override void OnGotFocus(RoutedEventArgs e) { if (WatermarkContent != null && WatermarkContent != null && string.IsNullOrEmpty(this.PasswordContent.Password)) { this.WatermarkContent.Visibility = Visibility.Collapsed; } base.OnGotFocus(e); } protected override void OnLostFocus(RoutedEventArgs e) { if (WatermarkContent != null && WatermarkContent != null && string.IsNullOrEmpty(this.PasswordContent.Password)) { this.WatermarkContent.Visibility = Visibility.Visible; } base.OnLostFocus(e); } private void DetermineWatermarkContentVisibility() { if (string.IsNullOrEmpty(this.PasswordContent.Password)) { this.WatermarkContent.Visibility = Visibility.Visible; } else { this.WatermarkContent.Visibility = Visibility.Collapsed; } } } ~~~ 編譯通過，將生成的庫引入到Demo程序里，然后將控件加上，成功，效果如下。左圖，未輸入內容，顯示水印，右圖，輸入內容時顯示效果。 ![](https://box.kancloud.cn/2016-04-27_57205d9ad4f88.gif) ![](https://box.kancloud.cn/2016-04-27_57205d9aed160.gif) 本文系本站原創,歡迎轉載! 轉載請注明出處: [http://blog.csdn.net/mr_raptor/article/details/7251992](http://blog.csdn.net/mr_raptor/article/details/7251992)[](http://blog.csdn.net/mr_raptor/article/details/7251960)[](http://blog.csdn.net/mr_raptor/article/details/7251942) ? ?