web-dev-qa-db-ja.com

TextBoxの最後にある「X」ボタンを削除します

enter image description here

C#+ XAMLを使用してWindowsストアアプリを開発しています。プロパティTextWrappingNoWrapに設定してTextBoxを追加すると、フォーカスされたときにTextBoxの最後に「X」が表示されます。

したがって、この「X」を削除する必要があり、TextBoxはラップできません。

14

このドキュメントからわかるように、機能についてはかなり説明されています well 。 Javascript、Html、またはCssを利用するときにわかるように、そのフィールドを削除するための非常に迅速で簡潔な方法があります。カスケードスタイルシートで簡単に無効にできます。

Image it displays.To Edit.

これで、スタイルシート内で実際に非常に簡単に変更できます。

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

ほとんどのボタンは、アプリケーション内で一貫したデザインを実現するために非常に簡単に利用できます。しかし、それはあなたの質問に答えません、どうやってC#/ XAMLでそれを無効にしますか?

テキストボックスコンポーネントの内部には、視覚的な状態と可視性を示すコードがあります。コードのそのセクションをコメントアウトすると、Xが無効になります。例 ここ

上記のように、それは非常に気の利いた便利なツールです。特にタッチスクリーンデバイスで。 Microsoftの統合に準拠しているだけでなく、そのフィールドの項目を簡単に削除できるため、UIがすっきりします。

削除しないことをお勧めします。うまくいけば、これで問題が少し説明されます。

5
Greg

誰もが言ったように、本当に正当な理由がない限り、「X」を削除するべきではありません。

Xを削除するには、TextWrappingを "NoWrap"に設定する代わりに、TextWrapping = "Wrap"に設定する必要があります。

8

Xはアクセシビリティ機能としてあります。すべてのテキストを選択して削除を押すのは骨の折れる作業であり、複数の手順を踏むため、タッチデバイスのボックスを簡単にクリアできます。

したがって、非常に重要な理由がない限り、これを無効にしないでください。 'X'を無効にするプロパティはなく、製品チームはそれを無効にするつもりはありません。ただし、教育目的で、スタイルを変更することで無効できることを示します。

Expression Blendで、テキストボックスを右クリックし、テンプレートの編集->コピーの編集を選択します。テンプレートに「NoXTextBox」のような名前を付け、アプリレベルで保存してください(そうしないと、現在のページでしか使用できなくなります)。

その後、Blendは、ページではなくTextBoxの外観を編集しているモードに切り替わります。 Objects and Timelineパネルに、DeleteButtonという要素が表示されます。テンプレートからそのボタンを削除して、作業内容を保存できます。 オブジェクトとタイムラインパネルの上部にある、上向き矢印の付いた水平線のようなボタンをクリックします(このボタンにカーソルを合わせると、[スコープを[ページに戻る]と表示されます。 ] ")。これで、テキストボックスを編集する代わりに、ページの編集に戻ります。

このようなテキストボックスをさらに作成するには、コピーして貼り付けるか、Stylesブランチの下のBlendツールボックスにカスタムの「NoXTextBox」が表示されます。

繰り返しますが、本当に正当な理由がない限り、これを無効にしないでください。ユーザーがWindowsストアアプリケーションに期待する機能を壊しているので、正直なところ、これを行う正当な理由を考えることはできません。組み込みのコントロールを変更する方法を理解できるように、主にあなたの質問に答えたかったのです。

開発サポート、設計サポート、そして途中でのより素晴らしい良さ: http://bit.ly/winappsupport

6

コントロールテンプレートを編集し、テンプレートとその参照のDeleteButtonを削除します。

0
user1021583

これにより、Xが消え、入力中のテキストのオフセットも停止します。

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

私にとっての解決策は、IsReadOnly = "True"のプロパティを設定することでした

0
Jorge Ramírez