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.

Uteutensil

Why do you want to remove that X? It's really useful for people using touch. – Bullis

Possible duplicate of Remove IE10's "clear field" X button on certain inputs? – Edmonton

If this is a Store app, think twice about removing that X. Only remove it if clearing contents of field makes no sense (rare for a text box, can't think of a reason right now), and even then test it with touch screen before releasing (if you find a way how to do it). – Pockmark

Actually, my app is written in C# + XAML, not HTML + JavaScript. – Uteutensil

Answer 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.

Loxodromics

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. – Uteutensil

Answer 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"

Banger

Answer 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

Kairouan

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! – Uteutensil

Answer 4

Edit the control template and remove The DeleteButton in the template and its reference.

Zetes

Answer 5

This makes the X disappear and also stops the offset the text during entry.

input[type=text]::-ms-clear
{
  visibility: collapse;
}

Barden

Answer 6

For me the solution was to set the property of IsReadOnly="True"

Armlet

Answer 7

I solved this by copying over the entire DefaultTextBoxStyle from generic.xaml into a new style, and replacing the entire

<Style x:Name="DeleteButtonStyle" TargetType="Button">
                                            <Setter Property="Template><Setter.Value...

with a simple

                                <Style x:Name="DeleteButtonStyle" TargetType="Button">
                                    <Setter Property="Width" Value="0" />
                                    <Setter Property="Height" Value="0" />
                                </Style>

It worked, and should have less side effects than removing the entire DeleteButtonStyle.

The only frustration is having to copy over the entire 200 line ControlTemplate for the TextBox as a whole, but at least it works.

Gobbler