脱・レガシー！VB.NET WPFアプリをWindows 11風のモダンUIへ進化させる「ModernWpf」活用術
「せっかく業務効率化のためにVB.NETでツールを作ったのに、見た目がWindows XP時代のようなグレーの画面で、なんだか古臭い……」
そんな悩みを感じたことはありませんか？
プログラミングの世界では、ロジック（中身）がどれほど完璧でも、UI（見た目）がユーザーに「使いにくそう」「信頼できなさそう」という印象を与えてしまうと、そのツールの価値は半減してしまいます。
こんにちは。今日は、皆さんが書いた大切なコードを、一瞬にしてWindows 11のような洗練された「Fluent Design System」へと昇華させる魔法のような手法をお伝えします。
ターゲットは、WPF (Windows Presentation Foundation)。
そして、その救世主となるのがオープンソースライブラリ「ModernWpf」です。
「難しそう……」と身構える必要はありません。ここをクリアすれば、Visual Basic (VB.NET) のUI構築の基本はバッチリですよ。さあ、一緒にモダンな開発の世界へ踏み出しましょう！
1. なぜ「見た目」が重要なのか？ — アーキテクトの視点
エンジニアとして、まず理解してほしい「本質」があります。
UIのモダン化とは、単にボタンの色を綺麗にすることではありません。
- 視覚的階層（Visual Hierarchy）: 何が重要で、何が背景なのかをユーザーに直感的に伝えること。
- 一貫性（Consistency）: Windowsの標準操作（ダークモードへの切り替え、角丸のボタンなど）と調和させること。
- 認知負荷の軽減: 余計な装飾を削ぎ落とし、ユーザーが迷わない設計にすること。
従来のWindows Formsや、設定を忘れた初期状態のWPFは、これらの要素が不足しがちです。そこで、「既存のコントロールの見た目（テンプレート）を、モダンな定義で上書きする」という戦略をとるのです。
2. 準備：ModernWpfをプロジェクトに召喚する
まずは、あなたのプロジェクトに「モダンな装飾セット」を導入しましょう。これには NuGet（ヌゲット） というパッケージ管理ツールを使います。
手順
1. Visual Studio で WPF アプリケーション（VB.NET）を開きます。
2. メニューの [ツール] → [NuGet パッケージ マネージャー] → [ソリューションの NuGet パッケージの管理] を選択。
3. 「参照」タブで `ModernWpfUI` を検索し、インストールします。
これだけで、あなたのプロジェクトは「モダンな部品」を手に入れる準備が整いました。
3. 実践：App.xaml への魔法の記述
ここが最も重要なステップです。一つ一つのボタンを書き換える必要はありません。アプリ全体の「ルール」を書き換えるのです。
`App.xaml` を開き、以下のように `ResourceDictionary` を追加してください。
<!-- App.xaml -->
<Application x:Class="WpfApp1.Application"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
xmlns:ui="http://schemas.modernwpf.com/2019"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- ここが魔法の呪文：ModernWpfのスタイルをアプリ全体に適用します -->
<ui:ThemeDictionary />
<ui:XamlControlsDictionary />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>【ここがポイント！】
- `xmlns:ui=”…”`: これにより、XAMLの中で `ui:` という接頭辞を使ってModernWpfの機能を使えるようになります。
- `MergedDictionaries`: これは「既存のスタイル設定を、新しい設定と合体させる」という意味です。これにより、標準の `Button` や `TextBox` が、自動的にモダンな見た目に差し替わります。
4. 実践：MainWindow.xaml でモダンな要素を使う
次に、実際の画面を作ってみましょう。標準のコントロールを使うだけでも十分綺麗になりますが、ModernWpf特有のコントロールを使うと、より「Windows 11らしさ」が増します。
<!-- MainWindow.xaml -->
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="http://schemas.modernwpf.com/2019"
Title="モダンなVB.NETアプリ" Height="450" Width="800"
Background="{DynamicResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="20">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Width="300">
<TextBlock Text="設定メニュー"
FontSize="28"
Margin="0,0,0,20"
HorizontalAlignment="Center"
FontWeight="Bold"/>
<!-- 標準のButtonでも、App.xamlの設定によりモダンな見た目になります -->
<Button Content="保存する"
Margin="0,10"
Style="{StaticResource AccentButtonStyle}"/> <!-- アクセントカラー適用 -->
<!-- ModernWpf特有のスイッチコントロール -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10">
<TextBlock Text="ダークモード有効" VerticalAlignment="Center" Margin="0,0,10,0"/>
<ToggleSwitch x:Name="ThemeToggle"
OnContent="" OffContent=""
IsOn="True"
Toggled="ThemeToggle_Toggled"/>
</StackPanel>
</StackPanel>
</Grid>
</Window>5. ロジック：VB.NET でテーマを切り替える
「見た目」が決まったら、次は「動き」です。ユーザーがスイッチを操作したときに、アプリのテーマ（ライト/ダーク）を切り替えるコードを書いてみましょう。
`MainWindow.xaml.vb` に以下のコードを記述します。
' MainWindow.xaml.vb
Class MainWindow
''' <summary>
''' トグルスイッチが操作された時のイベントハンドラ
''' </summary>
''' <param name="sender">イベントの発生源</param>
''' <param name="e">イベント引数</param>
Private Sub ThemeToggle_Toggled(sender As Object, e As RoutedEventArgs)
' ToggleSwitchを取得
Dim toggle As ToggleSwitch = TryCast(sender, ToggleSwitch)
If toggle Is Nothing Then Return
' モダンWPFのテーマを切り替えるロジック
' ここでは、IsOnの状態に基づいてThemeDictionaryを操作します
If toggle.IsOn Then
' ライトモードへ
ModernWpf.Controls.Theme.RequestedTheme = ModernWpf.Controls.Theme.ThemeMode.Light
Else
' ダークモードへ
ModernWpf.Controls.Theme.RequestedTheme = ModernWpf.Controls.Theme.ThemeMode.Dark
End If
End Sub
End Class【プロのアドバイス：陥りやすいエラー】
初心者がよく陥るのが、「NullReferenceException（参照エラー）」です。
`ThemeToggle_Toggled` が、画面が完全に読み込まれる前（コンストラクタの段階）に実行されてしまうことがあります。
上記のコードのように `TryCast` を使い、オブジェクトが正しく存在するかチェックする癖をつけると、アプリのクラッシュを劇的に減らせますよ。
6. まとめ：極限の知見を日常に
今回の手法は、いわば「外装のフルモデルチェンジ」です。
エンジンの仕組み（ビジネスロジック）を一切変えることなく、見た目（UI）だけを最新鋭のものに入れ替えることができました。
今日学んだことの振り返り：
1. ModernWpf を NuGet で導入する。
2. `App.xaml` の `MergedDictionaries` にスタイルを登録し、アプリ全体に適用する。
3. `DynamicResource` を活用して、テーマ変更に追従する設計にする。
4. VB.NET 側では、テーマのプロパティを操作して動的な変化を実現する。
「コードを書くこと」は手段であり、「価値あるツールを提供すること」が目的です。モダンなUIを備えたツールは、それだけでユーザーの信頼を勝ち取ることができます。
さあ、次はあなたの手で、その古めかしいアプリケーションに新しい命を吹き込んでみてください。応援していますよ！
