フラットデザインアプリケーションを作ってみる

テーマ:
これは
Delphi Advent Calendar 2015 の12/18分の記事です


未だ現役、入手も可能なDelphi2007で、今風の(今更な)フラットデザインのアプリケーションを作ってみます。
これらはすべてフォームのプロパティとイベントをやりくりして実現します。

1.フォーム

・まずはDelphi2007を起動し、VCLフォームアプリケーションを選択し、開いたフォーム(Form1)でCtl3DをFalseに変更します。



・フォームの色も変更します。Windows8で開発していると、clWindowとか見づらくて仕方ありません。
 $00F0F0F0あたりが慣れた感じの色なのではないかと。
 最終的には、ボタンとか全体的なカラーリングにも合わせて調整してもいいと思います。



2.ボタン

・まずは、アプリケーションの基本となるボタンを配置します。
 ただ、TButtonはフラットでも枠が消せない、色も変えられないので、代わりにTPanelを使用します。

 TPanel(Panel1)のプロパティでBevelOuterをbvNoneに変更し、ColorにclYellowを指定しま
す。




BevelOuterをbvNoneにして…


 ほら!それっぽくなったでしょ?

・フラットデザインではボタンなのか背景なのかよくわかりづらいので、カーソルがあたったら色が変わってボタンであることユーザがわかるように設定します。
 使用するイベントはTPanelのOnMouseLeaveとOnMouseMoveです。
 OnMouseMoveはカーソルが当該パネルの上に来たら、OnMouseLeaveはカーソルが当該パネルの外に移動したら動作するイベントです。
OnMouseMoveでは
TPanel(Sender).Color:=clRed;
OnMouseLeaveでは
TPanel(Sender).Color:=clYellow;
とします。

3.入力コントロール
  TEdit(Edit1)のBorderStyleをbsNoneに変更するだけでそれっぽくなります。
  TListBox(略)、TMemo(Memo1)あたりも同様です。
 (画像略)

4.コンボボックス(TComboBox)
  これも枠が消せないので、TComboBoxに加え、TEditとPanelで構成します。
 面倒ですが、真のフラットデザイン(?)を作るためには避けて通れません。
 まず、ComboBox(ComboBox2、ComboBox3)を置きます。
 続いてTEdit(Edit2、Edit3)とTPanel(Panel2、Panel3)も置きます。
 ComboBox2はStyleをcsDropDownListとします。
 Edit2のReadOnlyをTrueに変更します。
 Panel2、Panel3のCaptionは「▽(さんかく)、V(ぶい)、∨(または)」あたりにします
 TPanelクリックで、後ろのTComboboxがドロップダウンするようにします。
 Pane2、Panel3のOnClickで
SendMessage(ComboBox2.Handle, CB_SHOWDROPDOWN, 1, 0);
SendMessage(ComboBox3.Handle, CB_SHOWDROPDOWN, 1, 0);
 また、Altと↓でも
if(Sender=Edit2)then begin
if (Shift= [ssAlt] )and (Key=vk_Down) then begin
SendMessage(ComboBox2.Handle, CB_SHOWDROPDOWN, 1, 0);
ComboBox2.SetFocus;
end;
end;
if(Sender=Edit3)then begin
if (Shift= [ssAlt] )and (Key=vk_Down) then begin
SendMessage(ComboBox3.Handle, CB_SHOWDROPDOWN, 1, 0);
ComboBox3.SetFocus;
end;
end;
Edit3.Text:=TCombobox(Sender).Text;
 (画像略)

5.その他
いろいろ盛って、コンパイル。



こんなのができました。
BorderStyleもbsNoneにして、タイトルバーをなくし、×ボタンを作成しています。



6.ソース

コンパイルしたソースをここにおいておきます。

7.ただ…

最近は全体的なデザインの問題なのか、ボタンの色はちょっと暗い色に変わるくらいの変化が主流のようなので、その辺りを自動的に処理するようなものを作りました。



ソースはこちら

文字の色はいじってません。


8.さいごに

ちょうど昨年末から今年の初めにかけて担当したプロジェクトであった要望を一般化したものが今回のネタ。
そんな要望出すクライアント(笑)なんて思わずに。
みんなくだらねーこと言ってきますよね。