【Metro Modern UI】WinFormをお手軽にオシャレに変更!

Install

Install

こんにちは!のらくら です!
VisualStudio2017をインストールしたということで、とりあえず何か作りつつ触ってみよう!
ということで、今回はお手軽にオシャレなUIを使える!ということで、
「Metro Modern UI」というのをご紹介しつつ、適当に作っていきます。
ご紹介と言いつつ、のらくらも初めて使ってみるんですけどね・・・。
そして、何作ろう・・・。
うん、適当にファイル名一括置換と&ファイル内の一括置換とかでいきましょう!
(注意:中身のロジックはこの記事には載せません。あくまで「Metro Modern UI」の紹介なので。)

とにかく画像をふんだんに使って、NuGetからインストールとか
やったことないよって方、いやいやVisualStudio初めて触るよって方でも!
これを読めば分かる!ってぐらい丁寧に書いていきたいと思います。

あ、VS2017のインストールをしたいよって方は
こちらの記事をどうぞ!
そうだ!Visual Studio 2017をインストールしよう!

何はともあれ新規プロジェクト

さっそくやっていきましょう!
とりあえず、まあ新規でプロジェクト作らないと始まらないのでそこから。
ファイルの新規作成のプロジェクトを選択。

NewProject

NewProject

こんな感じで、Windowsフォームアプリケーションを選んで、
場所とか名前はお好みで。出来たら「OK」を。

SelectWinForm

SelectWinForm

はい、こんな画面になりましたね!
相変わらず、ひと昔前のデザインな感じでどこか哀愁がありますね!
とりあえず、新規プロジェクトが完成です。

WinForm

WinForm

「Metro Modern UI」を導入します

ではさっそく。お手軽にオシャレに出来るやつを導入していきます!
その名も「Metro Modern UI」!
導入方法は2パターンぐらいかな。

1.Webサイトからインストールして、自分で突っ込む
2.VisualStudioからNugetで突っ込む

「1でやりたい!」って方は、ごめんなさい。説明なしで。
今回は、2の方法でやっていきますよ!こっちの方が絶対楽なので!
1のやり方やったことないし、よく知らないってのは秘密・・・

では、やっていきましょう。
ツールのNuGetパッケージマネージャーのパッケージ管理を選択。

Nuget

Nuget

検索のところに「MetroModernUI」と入れると出てくるので、
プロジェクトにチェックを付けてインストールを押す。

Install

Install

こんな感じに、なんかソリューションに追加されていればオッケーです。

Complete

Complete

どんどんいきます。
MetroUI用のコントロールが用意されているので、次はそれを使えるように設定していきます。
とりあえず、ツールボックスにMetroUI用の階層を作ります。
ツールボックスの空いてるところで右クリックのタブの追加で。
名前はお好みで。
のらくらは、「Metro」とつけておきました。

TabAdd

TabAdd

作った階層のところで右クリックからのアイテムの選択。

SelectItem

SelectItem

画面が出てきたら、DLL突っ込む必要があるので参照ボタンを押しちゃいます。
そしたら、今回作ったプロジェクト内になんかそれっぽいフォルダがあるので、どんどん潜っていくとこんなDLLが入っている所があるので、
真ん中の「MetroFramework.dll」を選択して開くを押します。

AddDLL

AddDLL

はい、これでこんな感じになってればオッケーです!

CompleteAddTool

CompleteAddTool

これで導入が完了です!!
特に難しいこともなく、すんなり出来たと思います。
タイトル通りお手軽!ですよね!

とりあえず見た目をキレイに!

導入が終わったのでさっそくデザインをキレイにしていきます。
まずはForm1のusingに下の通り追加します。

using MetroFramework.Forms;

そして、継承を変更します。
これを

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

これに。

namespace FullReplace
{
    public partial class Form1 : MetroForm
    {
        public Form1()
        {
            InitializeComponent();
        }
    }
}

はい、これでどうなったか見てみましょう!
こんな感じに変わってましたか?継承変えるだけで、良い感じになりましたね。
これ便利だわ。

NewDesign

NewDesign

ついでに何個かコントロール配置してみちゃいましょう。
適当においてデバッグ実行してみた。
なんかテキストボックスの下側切れてる・・・。原因分かる方教えて下さい・・・。
まあいったん気にしないことにしとこう。

Design

Design

ということで、後は普通にロジック書いていけばオッケーですね。
そっちは、それぞれ皆さんが作りたいものを作っていくと思うので。省略。
ここまでで疲れてしまったので・・・。

まとめ

いかがだったでしょうか?お手軽にオシャレっぽいUIを導入することが出来ましたよね?
今回は、導入がメインということでそれ以降は特に何も書いていませんが、
StyleとかThemeプロパティを変更するともっと色々見た目を変えることが出来るみたいですよ。
気になった方は、色々調べてみてください!
そして、調べた結果をのらくらにも教えていただけると嬉しいです。
あ、初めてのVS2017を使用して感じたこととか何も書いてなかった。
そのうち書いてみよう。

ということで、
のらくら でした!

1 Comment

名無しの通り人

TabControlを使うと内部にコントロールが配置できませんでした。
『”CtrlName”をTabControlに追加できません。TabPageのみをTabControlsに直接追加できます』
との表示が…

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です