[.Net] C# WinForm에서 Metro UI(Modern UI) Framework 적용하기(예제 포함)

소개

MFC 기반에서 프로그램을 만들 때 UI 작업이 생각보다 꽤 많은 시간을 차지합니다. 컨트롤 색상이나 마우스 동작에 따른 효과를 적용하기가 쉽지 않고, 뭐든지 사용자가 알아서 개발해야 하기 때문이죠. 이에 반해 C#은 UI 적용이 정말 편합니다. 크기나 위치 조정, 색상 등 MFC 보다 더 많은 기능을 제공하기 때문입니다. 하지만 MFC의 불편함에 따른 기대감이 높은 것 때문인지, 개인적으로 그렇게 많이 만족스럽진 못합니다. 결국에 예쁘게 UI를 꾸미고 싶으면 서브 클래싱을 해야 하더군요.

이런 부족함을 채워주기 위한 Metro UI(Modern UI)가 있습니다. 무료이며 웬만한 사용자들은 만족할만한 기능을 충분히 제공하는 UI 프레임워크입니다. 본격적으로 알아보도록 하겠습니다.

Metro UI란?

우선 위키백과의 정의부터 보겠습니다.

메트로(Metro)는 마이크로소프트가 타이포그래피 기반의 디자인 언어의 내부 코드명이다. 마이크로소프트 내부적으로는 법적 문제로 인해 임시적으로 '모던 UI'(Modern UI)라는 용어를 사용 중이다. 윈도우 10이 레드스톤 2까지는 메트로였는데 레드스톤 3부터 플루언트 디자인으로 바뀌었다.

즉, 마이크로소프트가 사용한 UI 프레임워크인데요. 사각형 타일 모양의 버튼을 기반으로 한 UI라고 이해하면 되겠습니다. 아마 가장 많이 접한 경험은 윈도우 8이라고 생각이 됩니다.

출처: PCWorld

그래서 .Net WinForm을 위한 Window Modern UI를 적용하면 아래와 같은 효과를 볼 수 있습니다.

Light Theme를 적용한 UI

Black Theme를 적용한 UI

MetroFramework에 대한 자세한 특징은 아래 링크에서 확인할 수 있습니다.

링크: thielj.github.io/MetroFramework/#Screensots

Metroframework

따라 하기

본격적으로 WinForm에 Metro UI를 적용해 보겠습니다. Visual Studio를 실행하고 Windows Forms 앱을 선택하여 ExamMetroUI라는 이름의 프로젝트를 생성합니다.

Windows Forms 프로젝트 생성

우리가 흔히 보던 C# WinForm이 보입니다.

기본 WinForm UI 화면

Metro UI는 NuGet을 통해 쉽게 설치가 가능합니다. 아래와 같이 솔루션용 NuGet 패키지 관리 메뉴를 클릭합니다.

솔루션용 NuGet 패키지 관리 메뉴 클릭

검색란에 metroui를 검색하면 여러 항목이 표시됩니다. 그 중 MetroModernUI를 선택하고, 아래와 같이 체크박스 체크 후 설치 버튼을 클릭합니다.

MetroModernUI 설치

설치 후 프로젝트 참조에 MetroFramework 관련 dll이 추가된 것을 확인할 수 있습니다.

MetroFramework dll이 추가된 모습

그리고 Form 디자인 화면의 도구 상자를 보면, 아래와 같이 Metro 관련 UI 컨트롤이 추가된 것을 확인할 수 있습니다.

Metro UI Control이 추가된 모습

이제 Form1.cs에서 아래와 같이 코드를 수정합니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace ExamMetroUI
{
    public partial class Form1 : MetroFramework.Forms.MetroForm //상속 클래스 변경
    {
        public Form1()
        {
            InitializeComponent();
        }
    }
}

그리고 Form1.cs[디자인]을 보면 아래와 같이 변경되어 있습니다.

Form에 Metro UI가 적용된 모습

이제 Metro UI Control을 추가하여 기본 UI보다 예쁘게 꾸밀 수 있습니다.

Metro UI Control 예시

아래 예제 코드는 본문에서 보여준 예제입니다.

ExamMetroUI.zip

0.90MB