Input Prompt support in WPF

Intro

If you look at Vista User experience guide, one thing that is a must have is the Input Prompt. I think that this is very important to improve the user experience. Yet unfortunately this is not supported natively by WPF :(

But don’t worry because AvalonControlsLibrary is at the rescue :)

I had noting to do today so I decided to create this functionality and share it with you guys… You would say, aha; here comes Marlon with a new control. But NO. This is not a control as such. What I have created is a class with some attached properties that can be used to have the Prompt Input feature for any control (or better any control that would make sense such a feature). I choose the attached properties approach rather than creating a custom control for the simple reason to support any control that you wish to have an input prompt like the one displayed in the image below.

Input prompt

As you can see in the image above I am using the Input Prompt both for the TextBox and the ComboBox. And yes you can use it with any control that you want…

How to use this…

Well using this feature is quite easy, all you have to do is to set an attached property in your control. Something like this…

<TextBox local:InputPrompt.PromptText="Enter Search" />

[where local is the XAML namespace mapping]

In total there are 8 properties that you can set which are

  1. InputPrompt.PromptText – I guess you already figured this one out :D
  2. InputPrompt.PromptColor – This is a brush used as foreground for the Prompt Text (Default: Gray)
  3. InputPrompt.PromptFontFamily – The font family to use for the Prompt Text (Default: Arial)
  4. InputPrompt.PromptFontSize – The font size of the Prompt Text (Default: 12.0)
  5. InputPrompt.PromptFontStretch – The font stretch to use for the Prompt Text (Default: FontStretches.Normal)
  6. InputPrompt.PromptFontStyle – The font style to use for the Prompt Text (Default: FontStyles.Normal)
  7. InputPrompt.PromptFontWeight – The font weight to use for the Prompt Text (Default: FontWeights.Normal)
  8. InputPrompt.PromptBackColor – This is a brush that is used to color the background of the prompt (Default: Transparent)

Please note: You must set the InputPrompt.PromptText in order for this to work all the other properties are optional. Also you must have you control under an AdornerDecorator because the InputPrompt will draw the prompt text in an adorner.

If you use the Input Prompt with a textbox the input prompt will be much more intelligent. What do I mean by this? Basically the Input Prompt handles the Text Changed event of the TextBox and if the user enters no text the prompt re appears. The same happens if the TextBox looses focus and there is no text in it. I did this behaviour for the TextBox because this is the standard behaviour for an Input Prompt for textboxes.

How does this work behind the scenes

Well it’s quite simple. Basically an Adorner is placed on top of the control which sets the Attached properties and draws the InputPrompt.PromptText. Besides drawing the text this also draws a rectangle covering the surface of the control so that as soon as the user click the control(or better mouse down on the control), the adorner disappears and the control gets activated once again.

When the InputPrompt.PromptText is set for a TextBox, the input prompt will register to the LostFocus event and the TextChanged event and make sure to display the Prompt Text if the Text of the TextBox is to empty.

Conclusion

All this will be included in AvalonControlsLibrary v3 but I decided to upload a demo as a stand alone so that you can start using this immediately.

Hope you like this and as usual I am all ears for feedback and suggestions….

Thanks

Download Source Code and Demo App

kick it on DotNetKicks.com

About these ads

17 thoughts on “Input Prompt support in WPF

  1. Hi there,

    Thanks for the kind comment. If I might add; this control is not only for TextBoxes you can use it for any WPF control. yet again for TextBoxes this control acts more intelligently :D

  2. Pingback: Visual Studio Links #8 : Mostly Programming Stuff

  3. YES YES YES!!! AWESOME!!! Can’t believe this is not built-in functionality and search high and nigh for a solution. Great to see you put the effort into making this happen. You saved my day!

  4. Ahh… It does appear that the ComboBox suffers from a bug, unfortunately. When the mousedown occurs, the box just gets focused… it doesn’t drop down (so it requires two clicks to get the list of items). I’m SEVERELY new to WPF so I’m not sure how to fire a click event on the box… that should do the trick…

  5. Nice utility!

    A minor side-effect is that the Tooltip is not shown when the InputPrompt is active.

    Also is typing on char and deleting this the input prompt is shown again and input focus of the underlying control is lost as can be seen in your test program.

    We use a custom template with a border for TextBox.
    The Input Prompt is shown a bit higher than the normal text.
    An Offset property would be nice to adjust this.
    Part of control template:

  6. Hi Marlon,

    Have you tried using wpf datagrid with Entity Framework? If so, are you successful in editing the data in the grid as a combobox? I can do that if I don’t use the EF as a datasource. If you are then can you make a download source code and demo for it. Thank you!

  7. This looks good, and it is exactly what I am looking for. Got a big favour to ask: could you send me your .zip file via email? Our company DNS uses OpenDNS and blocks sites categorized as FileStorage. The address is brunzefb AT yahoo.com. I’m trying to get IT to unblock, but this may take some time…

    Thanks,
    Friedrich Brunzema

  8. hi marlon,

    i think this is a great idea, but why do you support the keyboard so badly? i changed your example like this:

    - remove EnableDisableElement in PromptAdorner
    - do not remove adorner when mousedown
    - remove adorner layer when user enters text (else part of textchanged delegate)

    what you will get is a textbox (and this is only meaningful for textboxes) that shows the adorner as long as the user has not entered any text. but the user can go to the textbox via keyboard and start to enter text.

    i think there should be some fine tuning for the adorner-text position so that the textbox cursor is not touched.

    sincerely batteryslave

  9. Is this piece of code possible to used in a commercial app? If there’s a license, I can’t seem to find it.

  10. you can go ahead and use it…. its part of avaloncontrolslib.codeplex.com and its totally free. Yet if you do not need the full library feel free to copy the code from this post and add it to your project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s