Remove "X" button at the end of a TextBox

Question

I'm developing a Windows Store App using C# + XAML. When I add a TextBox with the property TextWrapping set to NoWrap, a "X" appears at the end of the TextBox when it's focused.

So, I need to remove this "X" and the TextBox can not Wrap.

Solution 1

As you can see from this documentation it explains the feature quite well. As you can see when utilizing Javascript, Html, or Css you have very quick concise ways to remove that field. As you can simply disable it with Cascading Stylesheets.

Now within a Stylesheet you can actually alter it quite easy:

input[type=text]::-ms-clear
{
            border: 2px solid orange
}

Most of the buttons are really easy to utilize for a consistent design within your application. But that doesn't answer your question, how do you disable it with C#/XAML?

Inside of the Textbox Component you'll notice code that indicates Visual State and Visibility. If you comment out that section of code it will disable the X. An example here:

As mentioned above though, it is a very nifty and useful tool. Especially on touch screen devices; not only does it adhere to Microsofts unification but it also makes the UI cleaner as you have a simple way to delete the items in that field.

I'd urge you not to remove it, hopefully this explains the issue a little bit for you.

Solution 2

As everyone stated, you really shouldn't remove the "X" unless if you have a really good reason to do that.

To remove the X, instead of setting TextWrapping to "NoWrap", you have to set it to TextWrapping="Wrap"

Solution 3

The X is there as an accessibility feature. It makes it easier to clear the box on touch devices since selecting all of the text and hitting delete is arduous and takes multiple steps.

So, please, don't disable this unless you have a very very important reason to do so. There is no property to disable the 'X' and the product team doesn't intend for it to be disabled. However, for educational purposes I'll show that you can disable it by changing the Style.

In Expression Blend, right-click on the text box and choose Edit Template -> Edit a Copy. Give your template a name like 'NoXTextBox' and be sure to save it at the App level (or else you'll only be able to use it on the current page).

Blend will then switch to a mode where you're editing the visual appearance of the TextBox instead of the page. In the Objects and Timeline panel you should see an element called DeleteButton. You can delete that button from your template and save your work. Click the button at the top of the Objects and Timeline panel that looks like a horizontal line with an up arrow (when you hover over this button it will say "Return scope to [Page]"). Now you're back to editing your page instead of editing the text box.

To make more text boxes like this one you can either copy and paste it, or in the Blend toolbox under the Styles branch you'll see your custom 'NoXTextBox'.

Again, please don't disable this unless you've got a really good reason to do so. I honestly can't think of a good reason to do this as you're breaking functionality users expect in Windows Store applications. I mainly wanted to answer your question so you'd get a feel for how to modify the built-in controls.

Dev support, design support and more awesome goodness on the way: http://bit.ly/winappsupport

Comments

[Otacilio Oliveira]

It worked. Thank you, Greg. The reason I want to delete the clear button was that it was really inconsistent with the design. But don't worry, I've disabled it on just one TextBox. All of the others still have that (useful) Clear button.

[Otacilio Oliveira]

The clear button is really useful, @Jared. But I decided to remove this button just from one TextBox and it was because of matter of design. A big X at the end of this TextBox is really weird. Thanks for the answer!