WPFの無料UIライブラリ3選!概要・使用方法

初めに

WPFの開発でモダンなデザインを構築する上でUIライブラリは非常に強力なツールです
UIライブラリを使用すると楽なだけでなくUXまでの向上が見込めます
Windowsデスクトップアプリ開発をする際によく使うフレームワーク・WPFでの無料UIライブラリを3つ紹介していきたいと思います
今回紹介するライブラリにはデモアプリがあるので開発も楽に行えると思います

参考までにデモアプリを横に並べてみました

右から順に[MaterialDesign in Xaml,WinUI3,WPF UI]

Material Design in Xaml

Material Design in XamlはMaterialDesignをWPF上で使えるようにしたUIライブラリです
豊富なコンポーネントが用意されており私はAndroidアプリケーションなどとUIを統一したいときに使っています

デモアプリ

下記リンクからDemoApp.zipを落としてRelease内にあるMaterialDesignDemo.exeを実行するとデモアプリを動かすことが出来ます
デモアプリのコンポーネント右下にある</>ボタンを押すとコンポーネントを利用するためのXamlコードが出てくるのでそのままコピペして利用することが出来ます

利用方法

Nugetパッケージをインストールします

App.xamlに以下を追加します

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Indigo.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

MainWindow.xamlなどコンポーネントを利用するページ・ウィンドウの先頭に

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

を追加することで

<materialDesign:PackIcon Kind="ExclamationThick" />

のように利用することが出来ます

WinUI3

WinUI3はWindows App SDKのWindows UIライブラリです
Windows 10以降を対象としたデスクトップアプリを作成することができ今後も長くサポートが続くと考えています

Windowsらしいモダンなアプリを構築する事が出来るので幅広く使用することが出来ます
デフォルトのUIと比較してみるためにタイマーを作ってみました
ボタンを見てみるとかなりモダンなデザインになっていることが確認できます(WinUI3はこれだけではないです！)

デモアプリ

デモアプリはMicrosoftStoreに公開されているので簡単にインストールすることが出来ます

デモアプリからもMicrosoft感を感じます(個人の感想)

利用方法

過去に私が導入方法について書き記した記事があるのでこちらを参考にしてください
プロジェクトの作り方が少し特殊になっています

WPF-UI

WPF-UIはWPFでWinUI3に似たモダンなデザインが構築できるUIライブラリです
約2年前にリリースされ長いサポートが期待できます

デモアプリ

デモアプリはMicrosoftStoreに公開されており簡単にインストールして試すことが出来ます

導入方法

導入方法は2こあります

Nugetパッケージを利用する

Nugetパッケージを利用してWPFにWPF-UIを導入することが出来ます

Nugetパッケージを追加し利用するページ・ウィンドウの先頭に追加します

xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"

これでWPF-UIの導入が完了しました

<ui:Button Content="Run" Icon="FlashPlay20" Margin="16"/>

このようにして利用することが出来ます

拡張機能を利用する

拡張機能をインストールすることで画像のように素早くプロジェクトを作ることが出来ます

FluentNavigationを選択するとMVVMパターンがすでに整備されている状態になります

何を選択するか

さて、ここまで3つのUIライブラリを紹介しましたが全てがポテンシャルの高く何を選択するか迷うでしょう
究極は個人の好みになりますが参考までに私ならという考えを記します
例えばWebサービスxデスクトップサービスなどの大規模なアプリでなら私はMaterialDesignを採用してWebサービスと統一性を持たせていきたいところです
業務用などのデスクトップサービスではWPF-UIのFluentかつModernという概念が刺さると思います
是非デモアプリをインストールして自信で試してみてください！
また今回は紹介しきれていないUIフレームワークがあります。ほかのフレームワークも精査してみてください🙇
この記事が開発の手助けになれば幸いです👍