アプリの第一印象は見た目で判断される事が多い気がします。見た目が殺風景なアプリとデザインにも凝ったアプリなら、デザインが凝ったアプリの方がいいアプリだと思われるのではないでしょうか。
こう言った理由からアプリを作成する時は、なるべくデザインも拘るようにしています。
この記事では、「ModernWpfUI」というライブラリを使って、モダンなデザインへ変更する方法を紹介しています。このライブラリはモダンなデザインで GUI 画面を作成したい方にオススメです。ぜひ参考にしてみて下さい。
![](https://marunaka-blog.com/wp-content/uploads/2021/11/1f376bb9c724abce01920d783552b69c-300x200.jpg)
オススメの参考書
C#の使い方が丁寧に解説しており、「基礎からしっかりと学びたい」という初心者の方にオススメの一冊です。サンプルコードも記載してあり、各章の最後に復習問題があるので理解度を確認しながら読み進めることができます。新しい C# のバージョンにも対応している書籍です。
WPFをモダンなスタイルへ
![](https://marunaka-blog.com/wp-content/uploads/2022/03/091184bcda645b76415dad025b422929.jpg)
最新の Windows11 ではこれまでのデザイン・スタイルを刷新し、「Fluent Design System」に従ったモダンなデザインになっています。
例えば、エクスプローラーのリボンは機能が整理されて、シンプルかつモダンなデザインに変更されています。
![](https://marunaka-blog.com/wp-content/uploads/2023/02/4891350c9ec600f471b968f357999848.png)
他にも長らく機能やデザインが変更されてなかったメモ帳もモダン化されています。
一方で、WPF は .NET Frameork 3.0 が登場して以降の Microsoft が提供するフレームワークという事もあって、既存の UI コントロールなどは Windows Form とほぼ変わらない見た目になっています。実際にこれらの UI コントロール を使って画面を作ると少し古っぽい見た目になってします。
XAML で見た目に関しては自力でカスタマイズできますが、もっとお手軽にモダンな見た目にしたいですよね。
そんな時は「ModernWpfUI」というライブラリをオススメします。
このライブラリなら次のような見た目を簡単に実現できます。(Githubより引用)
![](https://marunaka-blog.com/wp-content/uploads/2023/02/c82f449ab3fb48173778d67683708900-1.png)
ModernWpfUIの使い方
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2ba5cbb657d2e1599edd30d8fa258ed4-1024x358.jpg)
今回は下記に記載した環境で動作確認を実施します。
環境
項目 | 内容 |
---|---|
OS | Windows11 |
IDE | Visual Studio 2022 |
フレームワーク | .NET 7 |
UIフレームワーク | WPFアプリ |
まずは Visual Studio を起動して、WPF アプリケーションで新しいプロジェクトを作成します。
この時、フレームワークは「.NET 7.0(標準用語のサポート)」を選択します。
![](https://marunaka-blog.com/wp-content/uploads/2023/02/657ffe5948ea31656a215ed548fe0495.png)
ModernWpfUIのインストール
ソリューションエクスプローラーを開いて、プロジェクト名で右クリックして[NuGetパッケージの管理]を選択します。
[参照]タブを選択した後、検索欄に「ModernWpfUI」を入力します。検索結果の一覧から「ModernWpfUI(作者:Yimeng Wu)」を選択して、[インストール]ボタンをクリックします。
![](https://marunaka-blog.com/wp-content/uploads/2023/02/1328bbf9d4e555ab5741cbb22821fd56.png)
ここでは、バージョン0.9.6をインストールしています。
ModernWpfUIのテーマを適用する
次にプロジェクトの App.xaml を開いて、次のリソースを追加します。
以下のソースコードの6行目と10~13行目が該当するコードになります。
<Application
x:Class="Sample.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Sample"
xmlns:ui="http://schemas.modernwpf.com/2019"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ui:ThemeResources />
<ui:XamlControlsResources />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
ここまで出来れば、モダンなテーマを WPF に適用できるようになります。
次のサンプルコードを MainWindow の XAML に記述して動作確認をしてみましょう。
<Window
x:Class="Sample.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:local="clr-namespace:Sample"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="http://schemas.modernwpf.com/2019"
Title="MainWindow"
Width="800"
Height="450"
ui:WindowHelper.UseModernWindowStyle="True"
mc:Ignorable="d">
<ui:SimpleStackPanel Margin="12" Spacing="24">
<TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="My first ModernWPF app" />
<Button Content="I am a button" />
<Button Content="I am an accent button" Style="{StaticResource AccentButtonStyle}" />
</ui:SimpleStackPanel>
</Window>
画面にボタンとテキストブロックを配置しました。実行したのが次の図になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/02/871e6db93bc7d92741cae0034a8c1401.png)
コントロールの見た目が変わって、モダンな感じになりました。
テーマのモード切り替え
ModernWpfUI は「ライト」と「ダーク」の2つモードがあり、このモードは Windows OS のテーマで変更する方法と WPF の App.xaml で変更する方法があります。
Windows OS のテーマで変更する方法
Windows の[スタート]メニューから[設定]をクリックします。サイドメニューから[個人用設定]をクリックして[色]を選択します。
ここでモードを変更すると、WPF で作成したアプリケーションのモードを変更されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/02/325fd9655b7337fccbef821d934dee62.png)
モード選択が”ライト”の場合は次のような見た目になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/02/871e6db93bc7d92741cae0034a8c1401.png)
モード選択が”ダーク”の場合は次のような見た目になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/02/6aa87fa8b7a43530fec9f6d0656ec3f5.png)
WPF の App.xaml で変更する方法
プロジェクトの App.xaml を開いて、ThemeResources に RequestedTheme プロパティを追加します。このプロパティでテーマの選択を行います。(11行目)
<Application
x:Class="Sample.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Sample"
xmlns:ui="http://schemas.modernwpf.com/2019"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ui:ThemeResources RequestedTheme="Light" />
<ui:XamlControlsResources />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
RequestedTheme が”Light”の場合は次のような見た目になります。
<ui:ThemeResources RequestedTheme=”Light” />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/871e6db93bc7d92741cae0034a8c1401.png)
RequestedTheme が”Dark”の場合は次のような見た目になります。
<ui:ThemeResources RequestedTheme=”Dark” />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/6aa87fa8b7a43530fec9f6d0656ec3f5.png)
ここでテーマの選択を行った場合は、Windows OS のテーマに依存しなくなります。
コントロールの紹介
![](https://marunaka-blog.com/wp-content/uploads/2022/03/e79f61a6baca46b24df8b1f92d141ae5-2-1024x358.png)
ここからはモダンな見た目になった UI コントロールを紹介します。
Button
ボタンは、あらゆる操作のトリガーになるコントロールです。
<Button… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/78ea21b782fefc00977f4c6fdd1db88e.png)
Calendar
カレンダーは、ユーザーが好きな日時を選択できるコントロールです。
<Calendar… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/e8d7683df3962e5ebc5545c849571895.png)
CheckBox
チェックボックスは、オンまたはオフの2つの状態を切り替えて選択できるコントロールです。
<CheckBox… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/3c50030e4a103b264e54c8f87f7d42ae.png)
ComboBox
コンボボックスは、リストからユーザーが任意の項目を選択できるコントロールです。
<ComboBox… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/bfd46480e8ab61419e94ce484c58aa2e.png)
DatePicker
デートピッカーは、ユーザーが好きな日付を選択し、それを任意の書式で表示するコントロールです。
<DatePicker… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/3aa6be863e9f72d29a4ad33c7df5058c.png)
Expander
エキスパンダーは、エリアに書かれた文字を開閉できるコントロールです。ヘッダーは開閉に関係なく表示されます。
<Expander… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/c33a75376355c90e04b2a23717d45f19.png)
GroupBox
グループボックスは、複数のコントロールを1つのグループとして扱うコントロールです。
<GroupBox… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/7943d48e9fdd623529d04f594a08f8ed.png)
ListBox
リストボックスは、リスト化された項目を表示するコントロールです。
<ListBox… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/ccc4e9559f720958d44131f4c592d70c.png)
ListView
リストビューは、リスト化された項目を表示・制御するコントロールです。
<ListView… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/683fbc1672c9095324fe1a3875c48460-1.png)
ProgressBar
プログレスバーは、処理の進行状況を表示するコントロールです。
<ProgressBar… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/c6b92cb8fc480ff30477b2a943b8c3a4.png)
RadioButton
ラジオボタンは、グループ化された中から1つの項目を選択する時に使うコントロールです。
<RadioButton… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/c16102b0f41ad896c180602fb306c80b.png)
TextBox
テキストボックスは、ユーザーが文字列を入力できるコントロールです。
<TextBox… />
![](https://marunaka-blog.com/wp-content/uploads/2023/02/aff51d4708bdfa87f87e173b18f205fd.png)
まとめ
![](https://marunaka-blog.com/wp-content/uploads/2023/04/c35f903f10ed2371757ca77d9f41dce9-1024x358.png)
この記事では「ModernWpfUI」というライブラリを使って、モダンなデザインへ変更する方法を紹介していました。
このライブラリを使って GUI 画面の見た目を変えてみてはいかがでしょうか。
![](https://marunaka-blog.com/wp-content/uploads/2022/11/5b06ffe152bc8aa87073943cbcb585ca-300x200.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2f5a8ba6b1682610f773da3b2f1516f9-300x169.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/09/1c0278efd52188a8154c18b8b21f1be2-300x169.jpg)
以上、最後まで読んで頂きありがとうございました。