今回は付箋紙ソフトを作成します。サイドバーを整理したのですが、意外にアプリの数は作成していないことがわかりました。そこで今回は付箋紙ソフトを作成することにしました。
これは 付箋ツール Kaku Ver 1.3.2です。utututizuで配布されています。
そこで似たようなものを作成してみることにします。
考え方としては「新しいフォームをつかってこれを付箋紙がわりにする」ということにします。
デザイナでForm1を作成します。そしてForm1として以下のようなものをつくります。
Form2として以下のようなものをつくります。
そして[付箋紙をつくる]ボタンがクリックされると新しくフォームが生成され、これが付箋紙の代わりになるというわけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void buttonCreateFusen_Click(object sender, EventArgs e) { Form2 form2 = new Form2(); form2.Show(); } } |
しかしこのようなものをたくさん作成してもぜんぜん付箋紙らしくありません。
そこでもうちょっと付箋紙らしくします。
付箋紙には通常のフォームには存在するタイトルバーがありません。メニューバーもありません。そこで文章を入力したあと[OK]がクリックされたらForm2のFormBorderStyleプロパティを FormBorderStyle.Noneに変更します。そしてテキストボックスやボタン、メニューも非表示にします。これで付箋紙らしくみえるようになります。
付箋紙になにが書いてあるかはラベルを作成してここに表示させます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
public Form2() { public Form2() { InitializeComponent(); this.Controls.Add(label1); } Label label1 = new Label(); private void button1_Click(object sender, EventArgs e) { FormToFusen(); } void FormToFusen() { FormBorderStyle = FormBorderStyle.None; textBox1.Visible = false; label1.Visible = true; // label1の大きさをフォームに合わせて変更する label1.AutoSize = false; label1.Location = new Point(10, 10); Size size = this.Size; size.Width -= 30; size.Height -= 30; label1.Size = size; // テキストボックスに書かれていた内容をlabel1.Textにセットする label1.Text = textBox1.Text; // ボタンやメニューは非表示にする buttonOK.Visible = false; menuStrip1.Visible = false; } } |
FormBorderStyleプロパティを FormBorderStyle.Noneに変更するとタイトルバーがなくなり移動させることができなくなります。また大きさを変更させることもできなくなります。移動させることができないのは不便なので移動できるようにする方法を考えます。
マウスがドラッグされると
1 2 3 4 5 6 7 8 9 10 |
public Form2() { private void Form2_MouseMove(object sender, MouseEventArgs e) { if(this.Capture == true) { // この部分が実行される } } } |
だったらマウスがクリックされたときにその位置を記憶しておき、イベントハンドラForm2_MouseMoveが呼ばれたときにどれだけマウスが移動しているかで移動させるべき距離がわかるのでLocationプロパティを変更すれば移動させることができるはずです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
public Form2() { int oldMousePosX = 0; int oldMousePosY = 0; public Form2() { InitializeComponent(); this.Controls.Add(label1); MouseMove += Form2_MouseMove; label1.MouseMove += Label1_MouseMove; label1.MouseDown += Label1_MouseDown; label1.MouseUp += Label1_MouseUp; } bool isLabelClicked = false; private void Label1_MouseDown(object sender, MouseEventArgs e) { if(e.Button == MouseButtons.Left) { // クリックされたときのマウス座標を記憶する Point point = Control.MousePosition; oldMousePosX = point.X; oldMousePosY = point.Y; isLabelClicked = true; // ここでマウスキャプチャしてしまうとダブルクリックが検知できなくなる // そこでボタンがおされたままマウスが移動したときにマウスキャプチャする } } private void Label1_MouseMove(object sender, MouseEventArgs e) { if(isLabelClicked) { isLabelClicked = false; // フラグを戻す Cursor = Cursors.Hand; this.Capture = true; // ここでマウスキャプチャする } } private void Label1_MouseUp(object sender, MouseEventArgs e) { Cursor = Cursors.Default; isLabelClicked = false; // ドラッグは開始されなかったのでフラグを戻す } private void Form2_MouseMove(object sender, MouseEventArgs e) { if(this.Capture == true && this.FormBorderStyle == FormBorderStyle.None) { // 記憶されているマウス座標と現在のマウス座標からマウスが移動した距離を知る Point point = Control.MousePosition; int x1 = point.X - oldMousePosX; int y1 = point.Y - oldMousePosY; oldMousePosX = point.X; oldMousePosY = point.Y; // x1, y1だけ移動させる MoveForm(x1, y1); } } // 実際に移動させる void MoveForm(int x, int y) { Point point = this.Location; point.X += x; point.Y += y; this.Location = point; } } |
これでFormBorderStyleプロパティが FormBorderStyle.Noneであってもドラッグすれば移動させることができるようになりました。
付箋がダブルクリックされたら付箋紙に書かれている内容を編集できるようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
public Form2() { int oldMousePosX = 0; int oldMousePosY = 0; public Form2() { InitializeComponent(); this.Controls.Add(label1); MouseMove += Form2_MouseMove; label1.MouseMove += Label1_MouseMove; label1.MouseDown += Label1_MouseDown; label1.MouseUp += Label1_MouseUp; // 追加部分 label1.DoubleClick += Label1_DoubleClick; // コントロールの位置がかわらないようにするために必要 textBox1.Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right; buttonOK.Anchor = AnchorStyles.Bottom | AnchorStyles.Right; } private void Label1_DoubleClick(object sender, EventArgs e) { FusenToForm(); } void FusenToForm() { FormBorderStyle = FormBorderStyle.Sizable; textBox1.Visible = true; label1.Visible = false; buttonOK.Visible = true; Opacity = 1.0; menuStrip1.Visible = true; } } |
これで付箋紙ソフトらしくなりました。ただデザイン的には最悪です。次回はもう少し改良を加えます。