【问题标题】:Remove "X" button at the end of a TextBox删除文本框末尾的“X”按钮
【发布时间】:2013-02-26 18:17:59
【问题描述】:

我正在使用 C# + XAML 开发 Windows 应用商店应用程序。当我添加一个属性TextWrapping 设置为NoWrap 的文本框时,当它获得焦点时,文本框的末尾会出现一个“X”。

所以,我需要删除这个“X”,TextBox 不能换行。

【问题讨论】:

  • 为什么要删除那个 X?它对使用触摸的人非常有用。
  • 如果这是一个商店应用程序,请三思删除那个 X。只有在清除字段内容没有意义时才删除它(文本框很少见,现在想不出原因) ,甚至在发布之前用触摸屏测试它(如果你找到了方法)。
  • 实际上,我的应用是用 C# + XAML 编写的,而不是 HTML + JavaScript。

标签: c# xaml windows-8 windows-runtime windows-store-apps


【解决方案1】:

正如大家所说,除非你有充分的理由这样做,否则你真的不应该删除“X”。

要删除 X,而不是将 TextWrapping 设置为“NoWrap”,您必须将其设置为 TextWrapping="Wrap"

【讨论】:

    【解决方案2】:

    正如您从本文档中看到的那样,它很好地解释了该功能well。正如您在使用 Javascript、Html 或 Css 时所看到的,您可以通过非常简洁的方式删除该字段。因为您可以简单地使用级联样式表禁用它。

    现在在样式表中,您实际上可以很容易地改变它:

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

    大多数按钮都非常易于使用,可在您的应用程序中实现一致的设计。但这并不能回答您的问题,您如何使用 C#/XAML 禁用它?

    在文本框组件内部,您会注意到指示视觉状态和可见性的代码。如果您注释掉那段代码,它将禁用 X。例如here

    如上所述,它是一个非常漂亮和有用的工具。尤其是在触摸屏设备上;它不仅符合微软的统一,而且还使 UI 更干净,因为您可以通过简单的方法删除该字段中的项目。

    我敦促您不要删除它,希望这可以为您解释这个问题。

    【讨论】:

    • 成功了。谢谢你,格雷格。我想删除清除按钮的原因是它确实与设计不符。但别担心,我只在一个 TextBox 上禁用了它。所有其他人仍然有那个(有用的)清除按钮。
    【解决方案3】:

    X 是一种辅助功能。由于选择所有文本并点击删除很费力并且需要多个步骤,因此可以更轻松地清除触摸设备上的框。

    所以,请不要禁用此功能,除非您有非常重要的理由这样做。没有禁用“X”的属性,产品团队也不打算禁用它。但是,出于教育目的,我将展示您可以通过更改样式来禁用它。

    在 Expression Blend 中,右键单击文本框并选择编辑模板 -> 编辑副本。为您的模板命名,如“NoXTextBox”,并确保将其保存在应用级别(否则您将只能在当前页面上使用它)。

    然后,Blend 将切换到您正在编辑 TextBox 而不是页面的视觉外观的模式。在 Objects and Timeline 面板中,您应该会看到一个名为 DeleteButton 的元素。您可以从模板中删除该按钮并保存您的工作。单击 Objects and Timeline 面板顶部的按钮,该按钮看起来像一条带有向上箭头的水平线(当您将鼠标悬停在此按钮上时,它会显示“将范围返回到 [Page]”)。现在您又回到编辑页面而不是编辑文本框了。

    要制作更多像这样的文本框,您可以复制并粘贴它,或者在 Styles 分支下的 Blend 工具箱中,您会看到自定义的“NoXTextBox”。

    再次提醒,除非您有充分的理由这样做,否则请不要禁用此功能。老实说,我想不出这样做的充分理由,因为您正在破坏用户在 Windows 应用商店应用程序中所期望的功能。我主要是想回答您的问题,以便您了解如何修改内置控件。

    开发支持、设计支持和更多精彩即将推出:http://bit.ly/winappsupport

    【讨论】:

    • 清除按钮真的很有用,@Jared。但我决定只从一个 TextBox 中删除这个按钮,这是因为设计问题。这个 TextBox 末尾的大 X 真的很奇怪。感谢您的回答!
    【解决方案4】:

    编辑控件模板并删除模板中的DeleteButton及其引用。

    【讨论】:

      【解决方案5】:

      这会使 X 消失,并在输入过程中停止文本的偏移。

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

      【讨论】:

        【解决方案6】:

        对我来说,解决方案是设置 IsReadOnly="True" 的属性

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多