Adonis UI 사용기

최근 WPF를 이용하여 사이드 프로젝트를 사용하기로 했다.

회사에서 그 동안 주구장창 Infragistics를 사용해와서 다른 UI toolkit을 사용해보고 싶었다.

적절한 대상을 찾기 위해 Nuget을 검색해보다가 Adonis UI라는 패키지를 발견했다.

Adonis UI

Home

Adonis UI는 메인 페이지의 설명처럼 '경량 UI 툴킷'이다. 기본적으로 WPF에서 제공하는 UI에 입힐 수 있는 Style을 제공하는 컨셉으로 구현 되어있다. 상대적으로 Control을 직접 제공하는 개수가 적은 것으로 보인다.

 

시작하기

ResourceDictionary 등록

먼저, 구현하고자 하는 프로젝트의 App.xaml에서 ResouceDictionary를 등록해준다.

아래와 같이 해당 Resouce를 등록하여 Application 전체에서 접근할 수 있도록 한다.

(프로젝트를 다크모드로만 구현하기 위해 ColorSchemes를 Dark로 등록하였다. 추후에 이 부분을 선택하게끔 변경할 예정)

 <Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/AdonisUI;component/ColorSchemes/Dark.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/AdonisUI.ClassicTheme;component/Resources.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

AdonisWindow 적용

WPF 프로젝트를 최초에 생성하면 App.xaml이 아래와 같이 구성된다.

<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

위 내용을 살펴보면 StartupUri가 MainWindow.xaml로 설정되어 있다. 프로그램 시작시 사용할 window로 보면 된다. Adonis UI를 적용하기 위해서 우리는 이 window에 AdonisWindow를 적용한다.

<adonisControls:AdonisWindow  
        xmlns:adonisControls="clr-namespace:AdonisUI.Controls;assembly=AdonisUI" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d" Height="450" Width="900"
        Title="Main Window">
    <Window.Style>
        <Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}"/>
    </Window.Style>
    <!-- 내용 -->
</adonisControls:AdonisWindow>

비하인드 코드의 상위 클래스 또한 AdonisWindow를 적용한다.

public partial class MainWindow : AdonisWindow
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

개발하기

위와 같이 설정을 해놓았다면 개발한 준비는 모두 끝났다. 이제부터 평소 WPF 개발과 동일하게 개발하면 된다.

Adonis UI 제공 Control

일반적인 Control은 WPF에서 제공하는 Control을 Style을 적용하여 사용하면 되지만, 몇몇의 Control은 Adonis UI에서 제공해준다.

Adonis UI에서 직접 제공해주는 대표적인 Control은 아래와 같다.

• AdonisWindow
  https://benruehl.github.io/adonis-ui/docs/guides/window/
• MessageBox
  https://benruehl.github.io/adonis-ui/docs/guides/message-box/
• SplitButton
  https://benruehl.github.io/adonis-ui/docs/guides/custom-controls/

Adonis UI Style 적용

우리는 기본적인 WPF Control에 Adonis UI를 입혀 화면에 나타낼수 있다.

필자의 경우는 ToggleButton을 Adonis UI를 사용하여 적용하였다.

 <ToggleButton Width="40" Margin="0, 5, 0, 0"
      Style="{DynamicResource {x:Static adonisUi:Styles.DefaultToAccentToggleButton }}" 
      Content="{Binding Value}" IsChecked="{Binding IsSelected}" Visibility="{Binding Visibility}"/>

위 내용처럼 기본적인 WPF Control을 사용하면서 Style에 DefaultToAccentToggleButton을 적용하였다.

(DefaultToAccentToggleButton외에도 여러 ToggleButton Style이 존재한다.)

 

<adonisControls:AdonisWindow 
        x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:adonisControls="clr-namespace:AdonisUI.Controls;assembly=AdonisUI" 
        xmlns:adonisUi="clr-namespace:AdonisUI;assembly=AdonisUI"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Style>
        <Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}"/>
    </Window.Style>
    <StackPanel>
        <ToggleButton Width="100" Margin="20" Style="{DynamicResource {x:Static adonisUi:Styles.DefaultToAccentToggleButton }}" Content="Default"/>
        <ToggleButton Width="100" Margin="20" Style="{DynamicResource {x:Static adonisUi:Styles.ToggleSwitch }}" Content="Switch"/>
        <ToggleButton Width="100" Margin="20" Style="{DynamicResource {x:Static adonisUi:Styles.ToolbarToggleButton }}" Content="Toolbar"/>
    </StackPanel>
</adonisControls:AdonisWindow>

위와 같이 모든 ToggleButton의 Style을 적용하면 아래와 같이 결과가 나타난다.

마무리

Infragistics에서는 대부분의 Control을 직접 제공한다. 기본적인 프로퍼티나 이벤트들은 유사했지만, 꼭 해당 Control만의 특이점이 있어서 레퍼런스를 찾아보는 것이 일상이었다. 반면에 Adonis UI의 경우에는 몇몇 Control을 제외하고는 WPF Control을 그대로 가져다 쓰면서 Style만을 적용하는 방식이기에 상대적으로 작업하기 용이했다.

 

하지만 Infragistics만큼의 방대한 양의 Control을 제공하지 않기 때문에 머릿속으로 구상했던 UI를 만들지 못하는 경우도 있었다. 아마도 유료와 무료의 차이가 아닐까?

 

결론적으로는 Adonis UI에 대한 경험은 긍정적이다. 추후에도 규모가 작은 프로젝트를 진행할 때에는 자주 사용할 듯 싶다.