「メモ帳アプリ開発」のその2です。
簡単な内容なので、さらっといきましょう！
メモ帳アプリ開発 TextBoxの配置 DockやScrollbarの設定
今回は、テキストを入力するTextBoxを配置します。
メモ帳の基本となるところですね。
- タイトルバーの表示名を変更
- TextBoxを中央に配置（画面サイズに応じて自動で拡大縮小）
- TextBoxで複数行入力できるようにする
- テキスト入力に応じて自動でスクロールバーを表示する
- TextBoxで折り返し無効にする
タイトルバーの表示名を変更
今はこんな状態です。
ソリューション作成しただけで、Form1が配置されてます。
まずはタイトルバーの表示名
作成したメモ帳アプリを実行した時に、画面のタイトルバー（一番上に表示）を変更します。
デフォルトだと、「Form1」となってて格好悪いですからね。
プロパティの「Text」に表示したいタイトル名を入力するだけです。
こんな感じで表示されます。
もちろん、プログラム的にも変更可能です。
こんな感じで、this.Textを書き換えればOK。
1 2 3 4 5 6 7 | public Form1() { InitializeComponent(); // タイトルバーの表示名を設定 this.Text = "メモ帳アプリ"; } |
TextBoxを中央に配置（複数行入力＆画面サイズに応じて自動で拡大縮小）
そしたら、メモ帳に文字を入力する欄を作ります。
これにはTextBoxをつかいます。
ツールボックスから「TextBox」を選択。
そして画面に配置。するとこんな感じ。
これだと、TextBoxが小さくてなんか変ですよね。
なので、現在の画面サイズに合わせて、サイズを変更してあげます。
まずは、TextBoxに複数行入力できるように設定してあげます。
デフォルトだと1行しか入力できません。
※一度デバッグ実行して、TextBoxに文字を入力してみると分かると思います。
そして、TextBoxのサイズも一緒に変更してあげます。
ここでは画面サイズいっぱいに表示するように設定します。
変更するのは、以下の2つのプロパティ。
- Dock：Fill
- Multiline：True
プログラムからも設定可能です。ソースコードサンプルは以下の通り。
1 2 3 4 5 6 7 8 9 10 11 | public Form1() { InitializeComponent(); // タイトルバーの表示名を設定 this.Text = "メモ帳アプリ"; // TextBoxのDock設定、複数行入力設定 this.textBox.Dock = DockStyle.Fill; this.textBox.Multiline = true; } |
※「名前：textBox」のプロパティにアクセスして設定します。
ここまでで、一度デバッグ実行してみてください。
- このように複数行入力ができる
- マウスで画面サイズ変更した時に、TextBoxも一緒にサイズが変わる
この辺りが確認できればOKです。
テキスト入力 自動でスクロールバーを表示する
そしたら、先ほどのデバッグ実行で、何十行と入力してみてください。
すると、だんだん下にスクロールしていくと思います。
しかし、スクロールバーは表示されず、マウス操作で上下への移動ができないと思います。
これを修正していきます。
※キーボードの↑↓ボタン押して移動はできると思いますが。
といってもこれも超簡単です。
プロパティの「ScrollBars」を「Both」に設定してあげます。
スクロールバーは、以下のように設定が可能です。
Both：両方（垂直＆水平）
Horizontal：水平方向（横）
Vertical：垂直方向（縦）
None：表示しない（デフォルト）
今回は、Bothで両方（縦＆横）に表示としています。
※プログラムからも設定可能です（ソースコードは省略します）
TextBoxで折り返し無効にする
それでは本記事の最後。
TextBoxの折り返しに関する設定です。
今の状態でデバッグ実行し、1行にたくさんの文字を入力してみてください。
以下のようになると思います。
画面の右端で折り返され、2行目に表示される。
これを、折り返さずにしたいと思います。
※簡単です。
プロパティの「WordWrap」を「False」に設定。
※自動的に折り返すのをFalseにする。となります。
これでデバッグ実行してみてください。
このように、1行に沢山入力すると、下にスクロールバーが表示され自動で折り返しされなくなりました。
まとめ
お疲れさまでした。
本記事では以下について行いました。
- タイトルバーの表示名を変更
- TextBoxを中央に配置（画面サイズに応じて自動で拡大縮小）
- TextBoxで複数行入力できるようにする
- テキスト入力に応じて自動でスクロールバーを表示する
- TextBoxで折り返し無効にする
次回は以下について書いていきます。
ウインドウ下にステータスバーを設置｜文字数など表示してみる
こちらの記事も合わせてご覧ください！
-
【C#】メモ帳アプリ開発 ウインドウ下にステータスバーを設置！文字数など表示してみる（その3）
メモ帳アプリ開発の「その3」です。 本記事では、メモ帳アプリの一番下「ステータスバー」に情報を表示してみたいと思います。 【C#】メモ帳アプリ開発 ウインドウ下にステータスバーを設置！文字数など表示し ...
続きを見る
