Creating WPF Watermarked TextBox using Expression Blend

Here are the steps to create a watermarked TextBox in WPF using Expression Blend as I promised in my last post.

1. Create a new WPF application in Expression Blend
   
   • Click on File menu
   • Then click on New Project.Select WPF Application
   • Name as "WaterMarkedTextBox"
2. Create a TextBox control and set it's Text="".
3. Now create a Button control .Button is to test the focus lost event of TextBox.
4. Set the Width and Height of These controls in order to get displayed properly.
5. Now edit the template of TextBox.
   
   • Right click on the TextBox shown in Objects and Timeline panel.
   • Select "Edit Control Parts (Template)"
   • Then select "Edit a copy"
     
     
   • Select location and press "OK".
6. Now put the ScrollViewer named "PART_ContentHost" into a grid
   
   • Right click on the ScrollViewer in Objects and TimeLine.
     
     
   • Select "Group into" then "Grid".
7. Now add a TextBlock named "watermark" into the newly created Grid
   
   • Double click on the newly created Grid to select it.
   • Add a TextBlock.
   • Set its Text as "Enter here".
   • Set Visibility="Hidden".
   • Set Opacity=".35" ie 35%
8. Now add a Multi Trigger which fires on the condition IsFocused="False" and Text=""It sets the visibility of TextBlock "watermark" to Visible.
   
   • Click on the "+ Property" Button in the interaction pan to create trigger.
   • Change the Property Name to "IsFocused" and Value to "False" in the first record of "Activated when" area.Don't change the target-element.
   • Now click on the "+" button available in the same row of "Activated when" to add one more condition.
   • In the new condition set property as Text and Value as "" ie empty string.Better leave value as it is.By default it will take the empty string.
   • Now select the watermark TextBlock.Set it's visibility.
     
9. Now the Template editing is over.Save and run the application.

N.B : It is recommended to see the generated XAML to ensure the output.The XAML may differ if you had clicked in wrong places.