[C#] Windows Formにてタイトルバーなしのフラットなおしゃれフォームを作成する方法

はじめに

C#でWindows Formアプリケーションを作成する際に、もともとのレイアウトをそのまま利用するのは見た目的にあまり良いとは言えないかと思います。

今回は、タイトルバーを非表示にし、全体的にフラットなフォームレイアウトを作成したいと思います。

プロジェクトを作成する

まずは、プロジェクトを作成していきます。

「新しいプロジェクトの作成」をクリックします。

プロジェクトを作成:手順1

「Windows フォーム アプリケーション (.NET Framework)」を選択します。

プロジェクトを作成:手順2

「プロジェクト名」を入力し「作成」します。

プロジェクトを作成:手順3

フラットなフォーム作成のための準備

まずは、対象フォームを選択した状態で、下記の設定を行います。

設定名設定値デフォルト値
AutoScaleModeNoneFont
StartPosisionCenterScreenWindowsDefaultLocation
FormBorderStyleNoneSizable
BackColorWhiteControl

「初期状態」

初期状態

「設定後」

設定後

真っ白なキャンパスが出来上がりました。

この状態からタイトルバーやボタンを自作していきます。

フラットなデザインになるように設定していく

まずは「ツールボックス」にて「panel」を選択し、デザイナのキャンパスにドラッグドロップします。

操作:1

操作:2

次に、panelのサイズと位置を調整し、配置します。

設定名設定値デフォルト値
DockTopNone
BackColor64,64,64Control

操作:3

タイトルのラベルを用意します。

「ツールボックス」にて「label」を選択し、デザイナのキャンパスにドラッグドロップします。

設定名設定値デフォルト値
FontMS UI Gothic, 14pt, style=BoldMS UI Gothic, 9pt
TextFlat Design Form
Location25,15

操作:4

あとは好きなツールを配置します。

今回は右上の閉じるボタンも再現しておきます。

(Button)

設定名設定値デフォルト値
FontMeiryo UI, 14.25ptMS UI Gothic, 9pt
Textx
BackColorTransparentControl
FlatStyleFlatStandard
Size30,30

操作:5

あとは、それぞれのツールに対して処理を書いていくだけですね。

「x」ボタンをクリックしたときの動作は下記のような感じですね

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
        this.Close();
    }
}

さいごに

まずは、簡単にですが、フラットなUIをWindows Form アプリケーションで作成してみました。

ただ、この状態だとタイトルバーを押下状態でフォームを移動したりすることができません。

次回は、今回作成したタイトルバー(パネル)を押下状態でフォームを移動する方法をご紹介したいと思います。

タイトルとURLをコピーしました