November 19, 2012

The Confusing Cross in TextBox on Windows Store App

In Windows Store apps, you may face the same problem (introduced by a feature) which I’ve faced today.

To replicate the issue (or should I say feature), just drag and drop a textbox on your blank page. Run your application. Type in few characters in that text box and see what appears. It should looks something like this:

image

Some may be wondering, what is this cross button and some may not be able to see this one.

Well, at first this cross looks like an X character, but this is a button which can be used to clear the text – indeed a nice feature. But bit confusing.

Now, what if I want to remove it? After some search, I found out a question related to this button on StackOverflow. You can find that question here: http://stackoverflow.com/questions/11805562/remove-x-button-in-input-metro and this can take you to a MSDN documentation here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465498.aspx The documentation explains this feature, very well. You can see the image as:

image

And this documentation is for Windows Store apps written in HTML/CSS/JS. So, to remove this ‘Clear Button’ you can use following CSS as mentioned on StackOverflow:

image

But, if you’re a VB or C# lover, just like me; then how to remove this one? Well, there is an option on MSDN page, which allows you to change documentation language from HTML/JS to XAML/C#/VB.NET. It appears at top. But if you click on link for VB.NET/C# language, it indeed talks about styling controls, but doesn’t talk about removing that Clear Button.

I tried for almost an hour. Checked all the documentation. Used ObjectBrowser and IntelliSense to look for that ‘Clear Button’. But, couldn’t find answer there.

Thanks to my dear friend Tinu Thomas and his observation skills. He asked me to change the TextWrapping property of TextBox to “Wrap” and voila!!!! It worked.

image

I think, in the hurry to please all developer community (HTML/JS + XAML/VB.NET/C# + XAML/C++), the entire MSDN documentation (and in turn API set) has been screwed up – big time!!!

I understand, this is Version 1.0 of Windows 8.0 SDK and I hope, it will improvise with time and subsequent releases.

Namaste

Mayur Tendulkar | www.mayurtendulkar.com

3 comments:

Suhas H Chatekar said...

I have a feeling that if you type in more text than the length of the text-box then text is now going to wrap increasing the height of the textbox. That may not be a pleasant UI experience when there are other elements stacked below the text-box. This would become more apparent on a small screen device.

Suhas H Chatekar said...

I have a feeling that if you type in more text than the length of the text-box then text is now going to wrap increasing the height of the textbox. That may not be a pleasant UI experience when there are other elements stacked below the text-box. This would become more apparent on a small screen device.

Mayur Tendulkar said...

Agreed. Hence developers are forced to set width, height, max-length, clear button (text wrap), accepts-return properties for the text-box.