本記事ではPrismで作成したWPFのプロジェクトに『おしゃれなデザイン』と『画面をすぐに更新する機能』を追加するOSSの導入方法をご紹介しています。
前回の記事では、作成したPrismのプロジェクトをGitLabに登録し、変更記録を保存できるようになりました。
これでプロジェクトに機能を実装していく準備ができたので、本記事から機能のインストールやコードの実装を行っていきます。
最初に行うのは『おしゃれなデザイン』と『画面の即時更新機能』を追加するためのインストール作業です。
『操作しても画面の数値や文字が変わらないダサいデザインのアプリ』なんてゴミ同然ですからね！
笑顔でスゴい事を言っていますよ(笑)
気になるところへ読み飛ばす
MahApps.Metroをプロジェクトに導入する
まずはアプリにおしゃれなデザインを反映させるOSSを導入していきます。
今回使用するのは『MahApps.Metro』というWPFアプリをモダンデザインに変更するツールです。
MITライセンスなので、無料で商標利用も可能なOSSになっています。
本家サイトへのリンクは本記事の最後にまとめておきますので、必要に応じてご覧ください。
了解です！
まずは次の画像のように、プロジェクト『PrismWPF』を選択してから右クリックを押して①『NuGetパッケージの管理』を選択してください。
すると次のような画面が表示されると思います。
②『参照』をクリックしたら下にある検索窓で③『MahApps.Metro』を入力して検索しましょう。
検索が完了したら④の『MahApps.Metro』をクリックして、⑤『インストール』を選択してください。
もし次のような変更のプレビュー画面が出たら、⑥『適用』を押してOKです。
インストールはこれで終わりなのですが、まだ画面を閉じないでくださいね！
了解っす！
MahApps.Metroだけでも、おしゃれなデザインにすることはできるのですが、1つ欠点があります。
それは使えるアイコンの種類がかなり少ないということです。
その欠点を補うために、現在表示されている画面にある『MahApps.Metro.IconPacks』も一緒にインストールしていきます。
『MahApps.Metro.IconPacks』の横にマウスカーソルを当てると下矢印が出てきますので、その⑦『下矢印をクリック』してインストールしましょう。
この方法でもインストールできるんですね～
はい！お好きな方法でインストールしてくださいね！
次のような変更のプレビュー画面が表示された場合は、⑧『適用』をクリックしておきましょう。
これで、WPFアプリをおしゃれなデザインにする準備は整いました。
アプリにデザインを反映するコードの実装は次の記事でご説明しますので、今回はこのまま画面の即時更新機能をインストールしていきましょう。
ReactivePropertyをプロジェクトに導入する
続いてインストールするのは『ReactiveProperty』というOSSになります。
これを導入しておくと、文字や数値を操作で変えたときに即座に画面に反映する機能を簡単に実装することができるのです。
WPFをラクに実装したいなら、必須のOSSだと思います。
なら入れちゃいます！
ReactivePropertyをインストールしないと実装するコードがめちゃくちゃ増えます。
実装するコードが増えるということは、実装ミスや修正忘れが発生しやすくなるということなので、ラクに実装できるのはとっても重要なことなのです。
NuGetパッケージマネージャーが開かれていると思いますので、検索窓に①『ReactiveProperty』と入力します。
そしたら『ReactiveProperty.WPF』を探して、②『下矢印をクリック』してインストールしましょう。
必ず『WPF』を選んでくださいね！
間違えるところでした…
次のような変更のプレビュー画面が表示された場合は、③『適用』をクリックしておきましょう。
これでインストールは完了したので、次は実装に移りますよ！
楽しみです！
付録：OSSへのリンク
ここにOSSの本家HPへのリンクを貼っておきますので、必要に応じて参照してください
