Tuesday, February 10, 2009

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"
      BlendWTB1
    • 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.
      BlendWTB3
  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.

9 comments:

  1. I've been looking for info on Creating WPF Watermarked TextBox using Expression Blend and luckily I ran into your blog, it has great info on what I'm looking and is going to be quite useful for the paper I'm working on.
    BTW is crazy how many generic viagra blogs I manage to dodge in order to get the right site and the right information.
    Thanks for the post and have a nice day

    ReplyDelete
  2. is it possible to create the same watermarked textbox in a silverlight project?

    ReplyDelete
  3. It is not directly possible since Silverlight dont have support for triggers.But you can try using behaviors and VSM

    ReplyDelete
  4. Very nice Tutorial!!

    but I have a question
    what if i have a form which requires several of watermark text fields?
    what should i do??

    thanks for reading my comment :)

    ReplyDelete
  5. Thank you. This was very useful and easy to accomplish. You are great!!! :)

    ReplyDelete
  6. Thank you sir its work. can send extra ideas for ms blend

    ReplyDelete
  7. Thank you Joymon!

    Have you ever try this with PasswordBox? When I do this Blend is crash.

    ReplyDelete
  8. Joy, thanks for your tutor.. It's is better to know how to create it better than copy and paste from what I found without understanding how to do it..thanks again

    ReplyDelete