WPFの軽量UIツールキット AdonisUIを試す

# AdonisUIでレトロモダンなWPFを

## 概要

[MaterialDesign in XAML Toolkit](http://materialdesigninxaml.net/)でWPFにも今風っぽい外観を持ち込んで、いい気になってた。
しかし、DLL類だけで4MB少々あって重い。良くも悪くもマテリアルデザイン。
[HandyControls](https://hosseini.ninja/) も試してみたが、HandyControlもHandyControlsも多言語化対応して高機能ゆえにコンポーネントはそこそこ魅力的だけど、ちょっと扱いづらかった。

というわけで、軽くて丁度いいコンポーネントがないか検索していたら単体でダークモードにするテーマ機能もある[AdonisUI](https://benruehl.github.io/adonis-ui/)というのがあったので、試してみた。

イラチな方は [GitHub](https://github.com/benruehl/adonis-ui) から [デモ](https://github.com/benruehl/adonis-ui/releases/download/1.17/AdonisUI.Demo.zip) を落とすと良い。

## インストール

公式ページの[Getting started](https://benruehl.github.io/adonis-ui/docs/getting-started/introduction/)どおりに。

- NuGet でパッケージインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23242/e8b9956d-b137-860b-82ed-bc3c3d3dc5a3.png)


- App.xaml に以下記述

```xml:App.xaml(抜粋)
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/AdonisUI;component/ColorSchemes/Light.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/AdonisUI.ClassicTheme;component/Resources.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
```

ガワであるWindowコンポーネントも、[代替品が用意](https://benruehl.github.io/adonis-ui/docs/guides/window/)されているので、お試しに使ってみる。
トップレベルをWindowの代わりにcontrols:AdonisWindowとする。
既存Windowを継承したのでなく別実装されたものらしくOS標準の状態（テーマ等）を受け継がないので、使いかたには注意が必要そう。

```xml:MainWindow.xaml(抜粋)
<controls:AdonisWindow
    x:Class="LivetAdonisUiTut01.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
    xmlns:v="clr-namespace:LivetAdonisUiTut01.Views"
    xmlns:vm="clr-namespace:LivetAdonisUiTut01.ViewModels"
    xmlns:adonisUi="clr-namespace:System.Drawing;assembly=System.Drawing"
    xmlns:adonisUi1="clr-namespace:AdonisUI;assembly=AdonisUI"
    xmlns:adonisExtensions="clr-namespace:AdonisUI.Extensions;assembly=AdonisUI"
    xmlns:controls="clr-namespace:AdonisUI.Controls;assembly=AdonisUI"
    xmlns:livetAdonisUiTut01="clr-namespace:LivetAdonisUiTut01"
    Title="MainWindow"
    Width="525"
    Height="350"
    PlaceTitleBarOverContent="True"
    >

    <controls:AdonisWindow.TitleBarContent 
        >
        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Right">
            <Button Content="?"
                    Style="{DynamicResource {x:Static adonisUi1:Styles.WindowButton}}"
                    FontFamily="Segoe UI"
                    FontSize="14"/>
        </StackPanel>
    </controls:AdonisWindow.TitleBarContent>

    <Window.Style>
        <Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}"/>
    </Window.Style>

    <Window.DataContext>
        <vm:MainWindowViewModel />
    </Window.DataContext>
(以下略)
```

ついになる MainWindow.xaml.cs も AdonisUI.Controlsをusingして、継承元を Window から `AdonisWindow` に変更

```cs:MainWindow.xaml.cs(抜粋)
using AdonisUI.Controls;

    public partial class MainWindow : AdonisWindow
```

## コンポーネント類

とりあえず最低限動く準備ができたので、コンポーネント類を使っていく。
基本的なコンポーネントはそのままで使える。

### 共通

ユーザ操作に影響するボタンやテキストボックス等は、マウスオーバーで目立つようになっている

### Button

マテリアルデザインではないが、WinFormsのクラシック風とみせかけて、リップル効果のあるボタンに代わる。
![adonis-demo-ripple-light.gif](https://benruehl.github.io/adonis-ui/img/adonis-demo-ripple-light.gif)

### DatePicker

カレンダーボタンが右側にあるテキストボックス。
カレンダーは、曜日表示等、そのまま日本語ロケールが使われる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23242/183dc90b-14e7-1771-1e0b-d41d8546a03b.png)


### TextBox

変わりなくみえるが、複数行入力などでスクロールバーがある状態のとき、タッチUI向けに(?)フォーカスが外れているときは[細いバー表示になるコントロール](https://benruehl.github.io/adonis-ui/docs/guides/scrollbars/)に代えることができる。

![adonis-demo-scrollbar-light.gif](https://benruehl.github.io/adonis-ui/img/adonis-demo-scrollbar-light.gif)

またウェブのテキストボックスでよくある入力前まで表示されるPlaceHolderの淡い文字列を[Watermark](https://benruehl.github.io/adonis-ui/docs/guides/watermark/)という機能として提供されている。

![adonis-demo-watermark-light.png](https://benruehl.github.io/adonis-ui/img/adonis-demo-watermark-light.png)

```xml:MainWindow.xaml
                 adonisExtensions:ScrollBarExtension.ExpansionMode="NeverExpand"
                 adonisExtensions:WatermarkExtension.Watermark="書いてみてちょ ..."
```



### Loading / ProgressBar

おしゃれでかわいい

![adonis-demo-progressbar-light.gif](https://benruehl.github.io/adonis-ui/img/adonis-demo-progressbar-light.gif)
![adonis-demo-loadingdots-light.gif](https://benruehl.github.io/adonis-ui/img/adonis-demo-loadingdots-light.gif)


## 雑なまとめ

MaterialDesignXAMLtoolkitはDLL類で4MBくらいあるが、AdonisUIは1/10の450KB程度。
さらっと試した感じHandyControlsより手軽で書きやすい。
MessageBox等も扱いやすそう。

ネストしたコントロールをGroupBoxなどでまとめてるケースを代替するレイヤリングシステムを使うと、コントロールの背景色を適切に設定してくれるらしい。ギョーミーなアプリでも視認性の高いUIを提供できそう。