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

9243 ワード
Xaml WPF .NET AdonisUI .NET テキストリンク

AdonisUIでレトロモダンなWPFを

概要

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

というわけで、軽くて丁度いいコンポーネントがないか検索していたら単体でダークモードにするテーマ機能もあるAdonisUIというのがあったので、試してみた。

イラチな方は GitHub から デモ を落とすと良い。

インストール

公式ページのGetting startedどおりに。

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

  • App.xaml に以下記述
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コンポーネントも、代替品が用意されているので、お試しに使ってみる。
トップレベルをWindowの代わりにcontrols:AdonisWindowとする。
既存Windowを継承したのでなく別実装されたものらしくOS標準の状態（テーマ等）を受け継がないので、使いかたには注意が必要そう。

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 に変更

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

    public partial class MainWindow : AdonisWindow

コンポーネント類

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

共通

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

Button

マテリアルデザインではないが、WinFormsのクラシック風とみせかけて、リップル効果のあるボタンに代わる。

DatePicker

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

TextBox

変わりなくみえるが、複数行入力などでスクロールバーがある状態のとき、タッチUI向けに(?)フォーカスが外れているときは細いバー表示になるコントロールに代えることができる。

またウェブのテキストボックスでよくある入力前まで表示されるPlaceHolderの淡い文字列をWatermarkという機能として提供されている。

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

Loading / ProgressBar

おしゃれでかわいい


雑なまとめ

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

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