WPF UI 라이브러리 살펴보기

WPF UI

안녕하세요! 이재웅입니다. 제가 이번에 소개하는 WPF-UI 라이브러리는 이미 @dimohy 님이 소개해주신 바 있는데요. 그래서 좀 더 이 라이브러리에 대해 알아보고 사용 방법에 대해서도 살펴보도록 하려 합니다.


디모이님이 소개해주신 WPF UI 소개

WPF UI GitHub 레포지터리

1. 설치

이 라이브러리는 Nuget으로 제공되며 WPF-UI란 이름으로 배포되어 있습니다.


또한 2022 11월을 기준으로 53K라는 높은 다운로드를 유지하고 있군요. :smile:

사실상 모든 버전에서 동작될 수 있도록 지원하고 있습니다. (참고로 당연히 .NET 7 에서도 잘 동작합니다.)

NET6 NET5
넷코어3
NETFramework48
넷프레임워크47
넷프레임워크461

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를 상속 받아 사용하고 있습니다. 이건 좋군요. 네임스페이스는 고정이니 좋은 아이디어입니다.

말 나온김에 내부적으로 어떻게 구현되어있는지도 한번 봅시다. :smile:

  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

항목의 띠를 표시하는 간단한 컨트롤입니다. 방향에 따라 항목이 다음 행이나 열로 줄 바꿈될 때까지 항목이 가로 또는 세로로 쌓입니다. 제어는 가상화를 사용하여 많은 양의 항목을 지원합니다.

제대로 작동하려면 모든 항목의 크기가 같아야 합니다.

GitHub - sbaeumlisberger/VirtualizingWrapPanel: Implementation of a VirtualizingWrapPanel for WPF running .NET Framework 4.5.2+, .NET Core 3.1+ or .NET 5.0+ 기반 .

VirtualizingItemsControl

가상화된 시스템. 윈도우. 통제 수단. 항목 제어 .

GitHub - sbaeumlisberger/VirtualizingWrapPanel: Implementation of a VirtualizingWrapPanel for WPF running .NET Framework 4.5.2+, .NET Core 3.1+ or .NET 5.0+ 기반 .

VirtualizingPanelBase

가상화된 패널을 만들기 위한 기본 추상 클래스입니다.

GitHub - sbaeumlisberger/VirtualizingWrapPanel: Implementation of a VirtualizingWrapPanel for WPF running .NET Framework 4.5.2+, .NET Core 3.1+ or .NET 5.0+ 기반 .

VirtualizingWrapPanel

System 에 대한 확장된 기본 클래스입니다 . 윈도우. 통제 수단. 가상화 패널 .

GitHub - sbaeumlisberger/VirtualizingWrapPanel: Implementation of a VirtualizingWrapPanel for WPF running .NET Framework 4.5.2+, .NET Core 3.1+ or .NET 5.0+ 기반 .


끝으로 이 라이브러리는 GitHub 오픈소스로 관리되고 있기 때문에, 구조 구성과 기술 등을 상세하게 들여다 볼 수 있습니다. 그리고 만약 여러분의 프로젝트에서도 이와 같은 형태로 구성하고 관리하길 원한다면 이 라이브러리는 최고의 레퍼런스가 될 것입니다.

제가 준비한 내용은 여기까지 입니다.
읽어주셔서 감사합니다. :smile:

좋아요 13