WPF UI 라이브러리
Web의 Bootstrap 같은 멋진 UI 테마를 적용해서 WPF APP을 만들고 싶다. 어떻게 하면 될까?
Bootstrap 같은 WPF용 라이브러리를 찾아야 한다. github에서 wpf로 검색해 star 수로 정렬해 보니 몇가지가 보인다.
MaterialDesignInXamlToolkit 은 날먹하기에는 좀 어려워 보인다.
MahApps.Metro는 그대로 사용하기에도 충분해 보인다.
WPF-UI는 스크린샷을 보니 대단히 멋지다. 한눈에 반했다.
Prism은 대단히 훌륭하고 완성도 있어 보이지만 상용으로 사용하기에는 라이선스 제약이 있다.
결국 MahApps.Metro와 WPF-UI에서 선택해야 하는데, 스크린샷을 보니 WPF-UI를 선택하지 않을 이유가 없다. 구글링해서 WPF-UI의 평판을 살펴보니 칭찬일색이다.
WPF-UI 기반의 APP 생성
이 작업은 Getting-started를 따라서 진행하면 된다.
- Visual Studio를 열고
- WPF Application을 생성한다. 정상적으로 빌드되고 실행된다.
WPF-UI를 사용하도록 수정한다.- 패키지관리자를 통해
WPF-UI패키지 추가 App.xaml수정하여 리소스를 WPF-UI에서 제공하는 테마로 변경한다.
- 패키지관리자를 통해
- 빌드해서 화면이 정상적으로 보이는지 확인한다.
WPF-UI Wizard로 APP 생성
Getting-started에서 설명한 방식으로 Application을 생성하면 Hello World 수준의 APP이 만들어진다. MVVM도 적용하고 메뉴바와 메뉴별 화면도 만들어야 한다.
좀 더 많은 내용을 자동으로 만들어주어서 커스터마이징 하는 수준으로 작업하고 싶다. WPF-UI는 Visual Studio를 확장해서 WPF-UI를 사용하는 APP을 생성할 수 있게 한다.
- 확장관리자에서
WPF-UI를 검색해 설치한다. - Visual Studio를 재시작한다. (이제 프로젝트를 생성할 때 WPF-UI Applicaiton을 선택할 수 있다)
WPF UI - Fluent Navigation을 선택해 Application을 생성한다.
디렉토리 구조
생성된 코드를 실행하면 아래와 같은 APP을 볼 수 있다. 이제 메뉴를 추가하고 페이지만 추가하면 될 정도로 이미 완성도가 꽤 높은 수준이다.
솔루션 탐색기에서 디렉토리 구조를 보면 MVVM 아키텍처가 적용된 것도 확인할 수 있다.
MVVM
코드를 자세히 살펴보기 전에 MVVM 아키텍처에 대해서 학습하는 것이 좋겠다. 대충 살펴보니 화면을 디자인하는 View와 화면에 표시할 데이터의 구조를 정의하는 Model, 데이터를 관리하고 화면에 제공하는 ViewModel 정도로 역할을 나눈 후 의존관계를 최소화할 수 있도록 몇가지 기술이 사용된 것 같다.
나중에 다시 살펴보겠다. 개념은 크게 어려울 것이 없으니, 이 아키텍처가 WPF에서 어떻게 구현되었는지 소스코드를 보고 이해하고, 아키텍처의 의도에 맞게 활용하는 것이 더 중요할 것 같다.
패키지 종속성
MVVM을 지원하기 위한 MS의 CommunityToolkit.Mvvm과 Application의 생성/종료를 담당하는 Hosting이 있고, 앞에서 선정한 UI 라이브러리인 WPF-UI 패키지를 참조하고 있다.
사용 프레임워크는 NETCore.App과 WindowsDesktop.App.WPF이다. 닷넷 프레임워크가 아닌 닷넷(.net8 같은)을 사용하고 WinForm 대신 WPF를 사용한다는 의미이다.
Models
Dashboard 페이지와 Data 페이지에서 사용할 데이터의 모델을 정의한다. 모델에 특별한 것은 없고, Dashboard 페이지에 표시할 Counter값과 Data 페이지에 표시할 Color 값이 전부이다.
ViewModels
이 폴더는 Pages와 Windows 2개의 서브폴더로 나뉘어져 있다. Dashboard 페이지와 Data 페이지, Settings 페이지에 데이터를 제공하는 ViewModel은 Pages 폴더에 정의되어 있다. Main 윈도우는 Windows폴더에 정의되어 있다.
Views
이 폴더 역시 Pages와 Windows 2개의 서브폴더로 나뉘어져 있다. 화면을 정의하는 xaml 파일이 위치한다.
Services
이 폴더에는 ApplicationHostServices와 PageService가 있다.
ApplicationHostServices는 IHostedService 인터페이스를 구현한 것인데 앞에 종속성에서 언급한 Microsfot.Extensions.Hosting에 의해 Application이 관리되려면 필요한 것 같다. 이 클래스에서 중요해 보이는 메서드는 HandleActivationAsync()인데 Application이 시작될 때 호출되는 Task로 NavigationWindow를 찾아 DashboardPage를 로딩한다.
기타 폴더
이 외에도 Assets 폴더에 아이콘 이미지 파일들이 있고, Helpers 폴더에 Converter 클래스가 하나 있고, Resources 폴더에 Translation 클래스가 있는데 아직은 특별한 것이 없으니 무시해도 될 것 같다.
기타 파일
프로젝트의 최상위 폴더에는 manifest파일과 ico파일, AssemblyInfo, 공통 Using 목록이 있는데 지금은 무시해도 될 것 같다. 하지만 App.xaml은 파일명을 보니 뭔가 중요한 정보를 담고 있을 것 같다.
