WPF UI
안녕하세요! 이재웅입니다. 제가 이번에 소개하는 WPF-UI 라이브러리는 이미 @dimohy 님이 소개해주신 바 있는데요. 그래서 좀 더 이 라이브러리에 대해 알아보고 사용 방법에 대해서도 살펴보도록 하려 합니다.
디모이님이 소개해주신 WPF UI 소개 글
WPF UI GitHub 레포지터리
1. 설치
이 라이브러리는 Nuget으로 제공되며 WPF-UI란 이름으로 배포되어 있습니다.
또한 2022 11월을 기준으로 53K라는 높은 다운로드를 유지하고 있군요. 
사실상 모든 버전에서 동작될 수 있도록 지원하고 있습니다. (참고로 당연히 .NET 7 에서도 잘 동작합니다.)
2. App 적용
설치 후 가장 먼저 필요한 작업은 Application에 리소스(WPF-UI)를 추가하는 것입니다.
ThemeDictionary와 ControlsDictionary를 MergedDictionaries 안에 포함시킵니다. Theme 종류는 Dark와 Light, 그리고 HighContrast 3가지 모드 제공되고 있습니다.
<Application x:Class="WpfUiDemoApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfUiDemoApp"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ui:ThemesDictionary Theme="Dark" />
<ui:ControlsDictionary />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
그런데 특이한 점이 있죠? 보통 ResourceDictionary를 통해 Source를 지정하는 것이 일반적인데 여기서는 ResourceDictionary를 상속 받아 사용하고 있습니다. 이건 좋군요. 네임스페이스는 고정이니 좋은 아이디어입니다.
말 나온김에 내부적으로 어떻게 구현되어있는지도 한번 봅시다.
public ThemeType Theme
{
set
{
base.Source = new Uri(
"pack://application:,,,/Wpf.Ui;component/Styles/Theme/"
+ value switch
{
ThemeType.Dark => "Dark",
ThemeType.HighContrast => "HighContrast",
_ => "Light",
}
+ ".xaml", UriKind.Absolute);
}
}
Setter로만 구현되어 있군요.
3. UI 컨트롤
WPF의 주요 컨트롤을 모두 제공하는 것은 아니지만 UI 커스터마이징이 필요한 거의 모든 컨트롤들이 포함되어 있습니다.
아래 항목들은 공식 Documentation을 통해 가져온 내용입니다.
Anchor
웹 페이지, 파일, 이메일 주소, 동일한 페이지의 위치 또는 URL이 지정할 수 있는 모든 것에 대한 하이퍼링크를 만듭니다.
Arc
모서리가 둥근 대칭 호를 그리는 컨트롤입니다.
AutoSuggestBox
사용자가 키보드를 사용하여 텍스트를 입력할 때 제안하는 텍스트 컨트롤을 나타냅니다.
Badge
항목을 강조 표시하거나 주의를 끌거나 상태를 표시하는 데 사용됩니다.
Breadcrumb
현재 탐색 항목 의 이름과 INavigation 을 사용하여 탐색할 수 있는 상위 항목을 표시합니다 .
Button
시스템 에서 상속됨 . 윈도우. 통제 수단. 버튼 , Symbol Regular 추가 .
Card
내용과 바닥글 이 있는 간단한 카드 .
CardAction
시스템 에서 상속됨 . 윈도우. 통제 수단. 기초 요소. Fluent Design에 따라 스타일이 지정된 Button Base 대화형 카드입니다.
CardColor
Ala Pa**원 컬러 카드.
CardControl
시스템 에서 상속됨 . 윈도우. 통제 수단. 기초 요소. 버튼 카드 오른쪽에 추가 컨트롤을 표시하는 기본 컨트롤입니다.
CardExpander
시스템 에서 상속됨 . 윈도우. 통제 수단. 접을 수 있는 콘텐츠를 숨길 수 있는 확장기 컨트롤입니다.
ClientAreaBorder
시스템 을 사용하는 경우 . 윈도우. 껍데기. Window Chrome 에서 UI 요소를 클라이언트가 아닌 영역으로 확장하려면 이 컨테이너를 System 의 템플릿에 포함할 수 있습니다 . 윈도우. 내부 콘텐츠가 자동으로 클라이언트 영역을 채우도록 창 . 이 컨테이너를 사용하면 System 스타일의 Setter/Trigger에서 수행되는 다양한 여백 조정을 제거할 수 있습니다 . 윈도우. 창 상태가 변경될 때의 창입니다.
CodeBlock
소스 코드의 일부를 포맷하고 표시합니다.
ControlsServices
정적 값으로 라이브러리 컨트롤을 초기화하는 데 사용됩니다.
Dialog
약간 투명한 배경과 두 개의 작업 버튼이 있는 큰 카드를 표시합니다.
DropDownButton
하나를 선택할 수 있는 선택 항목의 플라이아웃을 드롭다운하는 컨트롤입니다.
DynamicScrollBar
커스텀 시스템. 윈도우. 통제 수단. 기초 요소. 사용자가 취한 작업에 따라 이벤트가 있는 스크롤 막대 .
DynamicScrollViewer
커스텀 시스템. 윈도우. 통제 수단. 사용자가 취한 작업에 따라 이벤트가 있는 스크롤 뷰어 .
Flyout
인터페이스의 요소에 대한 정보를 표시하는 팝업 창을 만드는 컨트롤을 나타냅니다.
FontIcon
선택 가능한 글꼴 모음이 있는 아이콘 글리프가 포함된 텍스트 요소를 나타냅니다.
Hyperlink
웹 브라우저에서 URL을 여는 버튼입니다.
LoadingScreen
Progress Ring 이 있는 사전 스타일 로딩 화면 .
Menuu\Item
확장 시스템. 윈도우. 통제 수단. Symbol Regular 속성 이 있는 메뉴 항목 .
MessageBox
알림을 위한 맞춤형 창.
NavigationCompact
Windows 11의 작업 관리자와 유사한 스타일의 최신 탐색.
NavigationFluent
Windows 11용 Fluent Design의 원칙에 따라 스타일이 지정된 최신 탐색.
NavigationItem
탐색 요소입니다.
NavigationStore
Windows 11용 Fluent Design의 원칙에 따라 스타일이 지정된 최신 탐색.
NavigationView
INavigation 컨트롤, System 을 포함하는 준비된 탐색입니다 . 윈도우. 통제 수단. 프레임 및 이동 경로 .
NotifyIcon
트레이 메뉴의 아이콘 구현을 시스템으로 나타냅니다. 윈도우. 프레임워크 요소 .
NumberBox
패턴을 지정할 수 있는 숫자를 입력하기 위한 텍스트 필드입니다.
PasswordBox
수정된 암호 컨트롤입니다.
ProgressRing
회전하는 로딩 링.
Rating
상호 작용이 있는 등급 척도를 표시합니다.
Snackbar
스낵바는 앱이 수행했거나 수행할 프로세스를 사용자에게 알립니다. 일시적으로 창 아래쪽에 나타납니다.
SplitButton
분할 버튼 은 드롭 다운 버튼 이지만 추가 실행 적중 대상이 있습니다.
SymbolIcon
아이콘 글리프가 포함된 텍스트 요소를 나타냅니다.
TextBox
확장 시스템. 윈도우. 통제 수단. Placeholder Text 와 같은 추가 매개변수가 있는 텍스트 상자 .
ThumbRate
엄지손가락 중 하나를 클릭하여 긍정적 또는 부정적으로 평가할 수 있습니다.
TitleBar
창에 대한 사용자 정의 탐색 버튼.
ToggleSwitch
토글 스위치 를 사용 하여 두 가지 상호 배타적인 옵션(예: 켜기/끄기)을 사용자에게 제공합니다.
TreeGrid
진행중인 작업.
TreeGridHeader
진행중인 작업.
TreeGridItem
진행중인 작업.
TreeViewItem
확장 시스템. 윈도우. 통제 수단. Symbol Regular 속성 이 있는 트리 보기 항목 .
UiPage
확장 시스템. 윈도우. 통제 수단. WPF UI 기능이 있는 페이지 .
UiWindow
확장 시스템. 윈도우. WPF UI 기능이 있는 창 입니다.
VertualizingGridView
항목의 띠를 표시하는 간단한 컨트롤입니다. 방향에 따라 항목이 다음 행이나 열로 줄 바꿈될 때까지 항목이 가로 또는 세로로 쌓입니다. 제어는 가상화를 사용하여 많은 양의 항목을 지원합니다.
제대로 작동하려면 모든 항목의 크기가 같아야 합니다.
VirtualizingItemsControl
가상화된 시스템. 윈도우. 통제 수단. 항목 제어 .
VirtualizingPanelBase
가상화된 패널을 만들기 위한 기본 추상 클래스입니다.
VirtualizingWrapPanel
System 에 대한 확장된 기본 클래스입니다 . 윈도우. 통제 수단. 가상화 패널 .
끝으로 이 라이브러리는 GitHub 오픈소스로 관리되고 있기 때문에, 구조 구성과 기술 등을 상세하게 들여다 볼 수 있습니다. 그리고 만약 여러분의 프로젝트에서도 이와 같은 형태로 구성하고 관리하길 원한다면 이 라이브러리는 최고의 레퍼런스가 될 것입니다.
제가 준비한 내용은 여기까지 입니다.
읽어주셔서 감사합니다.