C# で MyClock Ver 1.00 を作る

プログラム電卓のためのC#プログラミング
e-Gadget

<MyClock トップへ戻る>


2017/02/10

初めて作る C# プログラム - MyClock

現状では、色々と機能追加して Ver 1.18.5.1 になっていて、私自身普段使いしています。
邪魔にならないデジタル時計 (アラーム機能付き) MyClock Ver 1.18.5.1 (ソース付き)


さて、今回は前作の MyClock Ver 0.10 を元にして、フォームのキャプションバーと枠が無い、よりシンプルでスクリーン上で邪魔にならないデジタル時計を作ります。これを Ver 1.00 とします。


MyClock Ver 1.00 の目標仕様

「邪魔にならないデジタル時計」にするために、

MyCLock4 

こんな感じにしてみます。なお前回で既に半透明、最前面表示にしています。

追加の目標仕様
  1. クライアント領域だけの外観に変更
  2. クライアント領域を左ダブルクリックで終了可能にする
  3. クライアント領域をマウスで掴んで移動可能にする
  4. マウス右クリックで最小化できるようにする
前回作ったのは、

 MyClock2  MyClock 

こんな外観ですが、
  • プログラムを終了するには、右上の [X] ボタンを押すしかありません
  • 時計を移動するには、キャプションバー (タイトルバー) をマウスで掴んで動かす必要があります。
ここでキャプションバーを無くすと、プログラムの終了とフォームの移動ができなくなるので問題です。

さて、フォーム(ウィンドウ)のタイトルバーとウィンドウ枠以外の部分をクライアント領域といいます。キャプションバーを無くして残るクライアント領域だけを使って、マウス操作でプログラムの終了と移動ができるようにするのが、今回の主なテーマです。



1. プログラムアップデートの準備

簡単なバージョン管理方法

確実に動作することが分かっている前作のソースコードを直接変更すると、何か原因不明のバグがあった時に、元に戻すのに苦労しそうです。バージョン管理が必要です。Visual Studio COmmunity 2015 では、ソースコードのバージョン管理のために Git を使えるようになっています。Git については、ネット検索すると分かると思うので、ここでは触れません。

ご自分のバージョン管理の方法があれば、それが一番良いと思います。

ここでは、PC内とホームページ用サーバーの両方にバックアップを残して、こまめにバージョン管理を行う私の方法を紹介します。


前作では、以下のフォルダ構造にしてから、新規にプロジェクトを作りました。

 <MyClock>
  <MyClock0100> ← [場所(L):」に入力したフォルダ

プロジェクトの作成が終わると、プロジェクト名のフォルダ (作業フォルダ) が追加されて、次のようになりました。

 <MyClock>
  <MyClock0100> ← [場所(L):」に入力したフォルダ
   <MyClock> ← 追加された作業フォルダ

そこで、今回は バージョンが分かるフォルダが並列になるように手で追加して、次のようなフォルダ構造にします。

 <MyClock>
  <MyClock0100> ← [場所(L):」に入力したフォルダ
  <MyClock1000> ← 今回新たに作るフォルダ

MyClock1000 フォルダを上のように新たに作り
MyClock0100 の中身を全て新たに作った MyClock1000 フォルダに丸ごとコピーします。

 <MyClock>
  <MyClock0100>
  <MyCLock1000>
   
<MyClock> ← これ以下は丸ごとコピーしたもの
    ・
    ・
    ・

念のためのバックアップも作ります。前回使った MyClock0100 フォルダを丸ごと圧縮して MyClock0100.zip を作ります。その上で今バックアップした MyClock0100 フォルダを削除して、MyClock1000 フォルダだけにしておきます。

このような方法で、バージョンを小分けにして管理&バックアップしておくと、何かあっても1つ前のバージョンに簡単に戻って仕切り直しができます。実はこれで何度も救われました!

最終的なフォルダ構造は、こんな感じです。

 <MyClock>
  MyClock0100.zip
  <MyClock1000> ← 今回新たに作ったォルダ
   <MyClock> ← 今回の作業フォルダ
    MyClock.sln
    <MyClock>
    <obj>
    <bin>

これで、準備完了!

MyClock.sln を起動すれば、開発環境が立ち上がります。

<原始的なクラウドバックアップ>
配布ファイルと称して、上の作業フォルダとは少し構成を変えたフォルダを準備し、フォルダごとzipファイルにしたものを業者のホームページサーバーにバックアップをしています。これで、自分のPCが不調になっても大丈夫です。


 先ずはリビルドしてみる

メニューバーの下に「Debug」「Any CPU」とあり、この状態で、メニューで、[ビルド(B)] - [ソリューションのリビルド(R)] を選び、ビルドを実行します。すると、出力ウィンドウで

1>------ ビルド開始: プロジェクト:MyClock, 構成:Debug Any CPU ------

と表示され、その後すぐに

1>------ ビルド開始: プロジェクト:MyCloxk, 構成:Debug Any CPU ------
1> MyClock -> C:\MyData\MySource\VS2015\Projects\C#\MyClock\MyClock1000\MyClock\MyClock\bin\Debug\MyClock.exe

と1行追加表示されます。デバッグモードでビルドした実行ファイル名とパスが表示されます。

ここで、
1> MyClock -> C:\MyData\MySource\VS2015\Projects\C#\MyClock\MyClock1000\
は、新たに追加したフォルダで、

その下の MyClock フォルダがソリューション MyClock のフォルダ、
さらにその下にある 同じ名前の MyClock フォルダが プロジェクト MyClock のフォルダです。

そして、実行ファイル MyClock.exe は プロジェクトフォルダの下の bin\Debug フォルダに作成されていることが分かります。リリースモードでビルドすると、bin\Release フォルダ内にファイルが出力されます。

ビルドが終わると、出力は以下のようになります。

1>------ ビルド開始: プロジェクト:MyCloxk, 構成:Debug Any CPU ------
1> MyClock -> C:\MyData\MySource\VS2015\Projects\C#\MyClock\MyClock1000\MyClock\MyClock\bin\Debug\MyCloxk.exe
========== ビルド: 1 正常終了、0 失敗、0 更新不要、0 スキップ ==========


1 正常終了 となっているのでビルドエラーが無かったことが分かります。


デバッグモードで実行してみる

前回述べたようにデバッグモードで実行するための複数の方法から [F5] キーを押すだけが楽です。
問題ないことが確認できればOKです。



2. クライアント領域のマウス操作だけで、アプリの終了とフォームの移動を行う

クライアント領域のダブルクリックでプログラムを終了させる

方針

ダブルクリックのイベントを捕らえ、そのイベントハンドラに終了処理を書けば良いので、簡単そうです。

MyClock2 

MyClock の場合は、ラベル currentTime がクライアント領域全体を覆っています。従ってダブルクリックのイベントはラベル currentTime が捕らえるようにします。

手でコーディングしても良いですが、イベントハンドラのテンプレートを作るのは IDE で自動化するのが楽です。VC++の経験があれば自動作成のやり方は分かるので、先ずはこれで作ってから、出来たコードを眺めると良い勉強になります。


イベントハンドラの半自動作成

ソリューションエクスプローラーで、Display.cs をダブルクリックするとフォームデザイナーが現れます。ここで右の方を見ると、プロパティが示されています。

フォームのキャプションバー (タイトルバー) あたりをクリックすると Display フォームのプロパティlが表示されます。
時計の時間表示あたり、つまりラベルコントロールをクリックすると currentTime ラベルのプロパティが表示されます。

currentTime ラベルのプロパティ画面で、イナズマの形をしたツールボタンを押すとイベントの一覧が現れます。
アクション の下に DoubleClock があるのでこれをダブルクリックすると、currentTime ラベルをダブるクリックした時のイベントハンドラのテンプレートが自動作成され、作成されたコードが表示されます。

ダブルクリックのイベントハンドラ1

ここに、プログラムの終了コマンドを書き込めばOK。

終了させるコマンドはいくつもありますが、取り敢えず Dispose(); とします。1行書くだけでイベントハンドラの実装は終わりです。

ダブルクリックのイベントハンドラ2 


イベントハンドラの定義

ここで、ソリューションエクスプローラーで、Display.cs の左にある小さな ▷ をクリックすると下に展開して、Display.Designer.cs が出てくるので、これをダブルクリックしてファイルを眺めてみます。

「Windows フォームデザイナーで作成されたコード」の左にある小さな [+] ボタンをクリックして展開します。

フォームデザイナで追加されたコード

反転した1行が自動的に追加された記述で、イベントハンドラを定義しています。この行を手で削除すると フォームデザイナーが正常に開けなくなるので、ここは触らないのが無難です。

デバッグモードになっていることを確認し、

デバッグビルド 

[F5] を押して、実行します。クライアント領域 (時刻表示のラベル currentTime の上) をダブルクリックして、正常に終了したらOKです。


クライアント領域をマウスで掴んで移動させる

 方針
  1. クライアント領域でマウスボタンが押されている状態のイベントを捕らえる
  2. マウスボタンが押されているイベントハンドラで、クリックしたのが左ボタンかどうかをチェックする
  3. マウスの移動をイベントハンドラで捕らえる
  4. マウス移動のイベントハンドラで、マウスの座標を取得する
  5. マウス移動のイベントハンドラで、取得した座標にフォームを移動させる
このようにして、プログラムを作ります。


 マウスが押されているイベントとマウス移動のイベントのハンドラ作成

クライアント領域のラベル (currentTime) をクリックし、プロパティ画面でイナズマ形のツールボタンを押すと、このラベルで受け取れるイベント一覧が現れます。

マウスイベント一覧  

マウスイベントの一覧を見ると、MouseDown イベントがあります。下に説明があります。補足すると、これはクリックのイベントではなく、マウスボタンが押された時に発生するイベントです。ボタンを離せばイベントが発生しません。

Windowsの特性として、MouseDown イベントはボタンを押し続けている間は、パルスが繰り返し発生するような感じでイベントメセージが繰り返し送り続けられます。つまり、MouseDownイベントハンドラが繰り返し呼び出されます。

MouseDown をダブルクリックすると、このイベントハンドラの定義が Display.Designer.cs に、実装のテンプレートが Display.cs に作成されます。

同様にして MouseMove イベントのハンドラも作ります。

作ったマウスイベント 

プロパティ画面では、今作ったマウスのイベントハンドラ名が確認できます。
  • currentTime_MouseDown
  • currentTime_MouseMove


自動作成された部分を確認してみます。

作ったマウスイベントのテンプレート

Display.cs には、今作った2つのイベントハンドラのテンプレートが出来ています。


使ったマウスイベントの定義

Display.Designercs には、2つのマウスイベントの定義が出来ています。


MouseDown イベントハンドラの実装を完成させる

Display.cs にコードを追加して、以下のように完成させます。

 // マウス位置の記録変数の宣言
 private Point mousePoint;

 // マウスが押された時のイベントハンドラ
 private void currentTime_MouseDown(object sender, MouseEventArgs e)
 {
  // 左ボタンの場合
  if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
  {
   //位置を取得する
   mousePoint = new Point(e.X, e.Y);
  }
 }

 // マウス移動のイベントハンドラ
 private void currentTime_MouseMove(object sender, MouseEventArgs e)
 {
  // 左ボタンの場合
  if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
  {
   //フォームを移動する
   this.Left += e.X - mousePoint.X;
   this.Top += e.Y - mousePoint.Y;
  }
 }

初めて使うC#でプログラムを作るにあたって、なんとか少しづつ理解を深めています。

ネットにはC#に関する情報が多くあるので、とても参考になります。その上で、色々と実験プログラムを書いて自分の理解を確認しています。

変数宣言した後に実際に使うために、new キーワードでその変数の実体 (インスタンス) を作る必要があります。上の例で言えば、

private Point mousePoint;
mousePoint = new Point(e.X, e.Y);

C#の解説が目的でないので (というか、まだ無理なので)、このように書けば目的の動作になる一例としてご覧ください。

では、動作確認のために [F5]を押して、デバッグモードで実行します。クライアント領域のマウス操作だけで、アプリの終了とフォームの移動ができることが確認できますね。


3. マウス右クリックでフォームを最小化する

MouseDown イベントハンドラで、右ボタンの場合にフォーム最小化のコードを書きます。

 // マウスが押された時のイベントハンドラ
 private void currentTime_MouseDown(object sender, MouseEventArgs e)
 {
  // 左ボタンの場合
  if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
  {
   //位置を取得する
   mousePoint = new Point(e.X, e.Y);
  }

  // 右ボタンの場合
  if ((e.Button & MouseButtons.Right) == MouseButtons.Right)
  {
   // 最小化する
   this.WindowState = FormWindowState.Minimized;
  }
 }


ここで、チョット味付けをしてみます。

マウス左ボタンで掴んで移動なので、クライアント領域で左ボタンを押した時にマウスカーソルを手の形 (Hand) に変更し、左ボタンが離されたら元の形に戻すようにしてみます。

 // マウス位置の記録変数の宣言
 private Point mousePoint ;

 // マウスが押された時のイベントハンドラ
 private void currentTime_MouseDown(object sender, MouseEventArgs e)
 {
  // 左ボタンの場合
  if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
  {
   // 位置を取得する
   mousePoint = new Point(e.X, e.Y);
   // カーソルをHandに変更
   this.Cursor = Cursors.Hand;
  }
  else
  {
   // カーソルを元に戻す
   this.Cursor = Cursors.Default;
  }

  // 右ボタンの場合
  if ((e.Button & MouseButtons.Right) == MouseButtons.Right)
  {
   // 最小化する
   this.WindowState = FormWindowState.Minimized;
  }
 }

 // マウス移動のイベントハンドラ
 private void currentTime_MouseMove(object sender, MouseEventArgs e)
 {
  // 左ボタンの場合
  if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
  {
   //フォームを移動する
   this.Left += e.X - mousePoint.X;
   this.Top += e.Y - mousePoint.Y;
   // カーソルをHandに変更
   this.Cursor = Cursors.Hand;
  }
  else
  {
   // カーソルを元に戻す
   this.Cursor = Cursors.Default;
  }
 }


4. クライアント領域だけにする

クライアント領域のマウス操作だけでアプリの数量やフォームの移動ができるようになったので、フォームの枠とキャプションバーを外すことにします。これは、Display フォームのプロパティで設定できます。

フォーム変更前 

フォームのキャプションバーあたりをクリックして、フォームのプロパティを表示します。

フォームのプロパティ変更前 

FormBorderStyle は、FixedToolWindow に設定しています。

これを、None に変更します。

フォームのプロパティ変更後 

すると、ラベルだけのフォームになります。

フォーム変更後 

では、[F5]を押して、デバッグモードで実行してみます。

枠無し半透明フォーム 

最前面表示、枠無しで半透明、マウス操作だけで終了、移動、最小化が可能なデジタル時計ができました。


5. 配色を変える

このままだとチョット地味なので、背景色を黄色にしてみます。

フォームのプロパティで、BackColor は、デフォルトのまま Control になっています。

背景色変更前 


これを、Control から Info に変更してみます。

背景色変更後 


フォームデザイナ上で、背景色が変更されます。

背景色変更後のフォーム 

ここで、[F5]を押して、デバッグモードで実行して動作確認します。

枠無し黄色半透明フォーム 

最前面表示、黄色半透明で枠無し、マウス操作だけで終了、移動、最小化が可能なデジタル時計ができました。


6. アセンブリ情報の更新

前作でアセンブリ情報を作成したので、今回は内容を更新、そして一部変更します。

前回と同様に、ソリューションエクスプローラで MyClock プロジェクトを右クリックして、アセンブリ情報の画面を開きます。

こんな感じに入力しました。

アセンブリ情報 


7. リリースビルド

最後に、リリースモードでビルドします。

リリースビルド 


MyClock\bin\Release\MyClock.exe がリリースビルドされた実行ファイルです。

これを MyClock Ver 1.00 とします。


邪魔にならないデジタル時計
MyClock Ver 1.00
(VS Community 2015 ソース付き)
ダウンロード


ダウンロードファイルの内容
<MyClock100>
 <MyClock>  ← ソースのあるフォルダ
 MyClock.exe  ← 実行ファイル
 ReadMe.text  ← 説明ファイル




 MyClock Ver 0.10 を作る (2/2)







応援クリックをお願いします。励みになるので...
にほんブログ村 IT技術ブログ 開発言語へ



    

keywords: プログラム関数電卓、Windowsプログラミング

リンク集 | ブログ内マップ
関連記事

テーマ : プログラム関数電卓
ジャンル : コンピュータ

コメントの投稿

非公開コメント

最新記事
最新コメント
カテゴリ
C# (3)
検索フォーム
Visitors
Online Counter
現在の閲覧者数:
プロフィール

やす (Krtyski)

Author:やす (Krtyski)
since Oct 30, 2013


プログラム関数電卓は、プログラムを作り・使ってナンボ!

実際に触って気づいたこと、自作プログラム、電卓プログラミングについて書いています

おもしろい・役に立つならクリックしてください。励みになります。
にほんブログ村 IT技術ブログ 開発言語へ
にほんブログ村


人気ブログランキングへ


FC2ブログランキングへ


写真: 「4駆で泥んこ遊び@オックスフォード郊外」

リンク
月別アーカイブ
Sitemap

全ての記事を表示する

RSSリンクの表示
最新トラックバック
ブロとも申請フォーム

この人とブロともになる

QRコード
QR